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

背景

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

猜你喜欢

转载自blog.csdn.net/qq_40351360/article/details/125425263