在自己网页浏览器端通过websocket接入海康摄像头实时视频-方案二

Posted 2023-03-15 itxiaoxd2020

背景

物联网时代，作为开发，基本上都需要在系统中调取摄像头的实时视频，不懂的时候觉得挺复杂了，但是弄的久之后发现有很多比较好的方法，可以实现在系统中打开摄像头实时视频更加快速和流畅。在此之前我经历了几个阶段：
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