海康安防摄像机推流到H5页面(websocket-relay+ffmpeg+jsmpeg.js方案)

原创作者:温岭王骏
环境:
测试摄像机:海康威视 DS-2CD7T4EP-LS
显卡:NVIDIA 1050
流媒体服务器:websocket-relay
拉流推流:ffmpeg
H5播放器:jsmpeg

上文海康安防摄像机推流到H5页面(node-media-server+ffmpeg+flv.js),采用的方案是node-media-server+ffmpeg+flv.js,本文中采用的方案是:websocket-relay+ffmpeg+jsmpeg.js

1、nodejs的安装及摄像机的配置,没有特别之处,请搜索网络及参考上文。
2、下载jsmpeg,里面包含了jsmpeg.min.js和websocket-relay.js
3、运行websocket-relay.js

node websocket-relay.js supersecret 8081 8082

8081是接收视频流的端口,8082是输出视频流的端口

4、ffmpeg推流到websocket-relay
假设摄像机用户名:admin,密码:hik12345
推流命令:

ffmpeg -rtsp_transport tcp -i rtsp://admin:hik12345@192.168.1.18:554/h264/ch1/sub/av_stream  -c copy -q 0 -map 0:0 -f mpegts -codec:v mpeg1video http://127.0.0.1:8081/supersecret

不能加-hwaccel cuvid -c:v h264_cuvid参数,会有冲突。实际延时小于1秒,貌似已经自动使用了GPU编解码。

5、H5页面

<html>
<body>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById('video-canvas');
        var url = 'ws://127.0.0.1:8082';
        var player = new JSMpeg.Player(url, {canvas: canvas, loop: true, autoplay: true});
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容