背景

物聯網時代，作為開發，基本上都需要在系統中調取攝像頭的實時視頻，不懂的時候覺得挺復雜了，但是弄的久之后發現有很多比較好的方法，可以實現在系統中打開攝像頭實時視頻更加快速和流暢。在此之前我經歷了幾個階段：
1.第一個階段是使用rtmp轉rtsp的方式，通過nginx的一個模塊加上ffmpeg去進行視頻的播放，其中存在一個問題rtsp在瀏覽器中播放時需要flash插件的支持，不然播放不了（且打開比較慢），雖然有時會出現問題，但是一直這樣也用了很久，在給客戶部署的時候也發現比較麻煩，所以有了第二個階段。
2.第二階段我發現客戶的攝像頭版本比較新，可以支持websocket的播放，這種方式基本不用部署nginx的模塊和ffmpeg,直接使用海康攝像頭的api就可以在瀏覽器播放實時視頻了，這個階段的方案如下【方案一】所示。
3.接下來到了階段三，為什么有階段三呢，是因為websocket播放攝像頭實時視頻雖好，但是客戶還是有大部分攝像頭不支持websocket的方式，于是又發現了一種新的技術，舊的的攝像頭也可以通過自己寫websocket服務端的方式實現，技術是ffmpeg+websocket+jsmpeg+java的方式實現，這個方式主要是參考：
https://blog.csdn.net/qq_36304149/article/details/114983991?utm_source=app&app_version=5.5.0&code=app_1562916241&uLinkId=usr1mkqgl919blen
這個方法實現容易，經過多次測試，沒有發現大的問題，視頻可以連續播放超過一晚上，可以任意根據websocket客戶端連接進行視頻流的推送，可以多個電腦同時打開多個不同的視頻，基本都沒什么問題。

其中jsmpeg可以直接在官網進行下載。
websocket客戶端連接地址：

var player = new JSMpeg.Player('ws://192.166.11.136:9102/aa/rtsp?param=10ebce7e-52f6-4c36-8ac4-31fc22bbb850_7', {canvas: document.getElementById('video'),decodeFirstFrame: true,disableWebAssembly: false,throttled: false, //這里設置為false，不然不觸發onSourceCompleted事件chunkSize: 4 * 1024 * 1024,disableGl: false,audio: true,autoplay:true,loop:false,onSourceCompleted:()=>{}

10ebce7e-52f6-4c36-8ac4-31fc22bbb850_7是UUID加攝像頭ID
該參數可以在打開視頻的時候調用后臺接口生成這樣一個會話ID.

ffmepg推流地址：

ffmpeg -rtsp_transport tcp -i "rtsp://admin:password@ip:554/Streaming/Channels/101?transportmode=unicast" -q 0 -f mpegts -codec:v mpeg1video -s 700x400 http://192.166.11.136:9120/aa/rtsp?query=7

其中query=7表示這是攝像頭id為7的視頻流，通過ffmpeg進行推送的，服務端只需要寫一個接口地址進行取流推送即可。

坑1

ffmpeg推送幾分鐘就中斷了（不要取懷疑ffmpeg的問題還是接口超時等問題，其實就是取流的問題），參考：
https://blog.csdn.net/qq_40351360/article/details/125284210

注意，最好不要用這個方案！！！！！！！！！！，發現存在問題，瀏覽器容易內存異常，這個錯誤不好解決！！2022-11-30

方案一

https://blog.csdn.net/qq_40351360/article/details/124894387?spm=1001.2014.3001.5502

總結

以上是生活随笔為你收集整理的在自己网页浏览器端通过websocket接入海康摄像头实时视频-方案二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。