背景

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

其中jsmpeg可以直接在官網(wǎng)進(jìn)行下載。
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, //這里設(shè)置為false，不然不觸發(fā)onSourceCompleted事件chunkSize: 4 * 1024 * 1024,disableGl: false,audio: true,autoplay:true,loop:false,onSourceCompleted:()=>{}

10ebce7e-52f6-4c36-8ac4-31fc22bbb850_7是UUID加攝像頭ID
該參數(shù)可以在打開視頻的時(shí)候調(diào)用后臺(tái)接口生成這樣一個(gè)會(huì)話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進(jìn)行推送的，服務(wù)端只需要寫一個(gè)接口地址進(jìn)行取流推送即可。

坑1

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

注意，最好不要用這個(gè)方案！！！！！！！！！！，發(fā)現(xiàn)存在問題，瀏覽器容易內(nèi)存異常，這個(gè)錯(cuò)誤不好解決！！2022-11-30

方案一

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。