浏览器无插件实时预览摄像头（jsmpeg）

小马同学
FFmpeg
2020-08-22
20热度
0评论

设计思路：ffmpeg采集摄像头rtsp流并转码，nodejs启动websocket发送转码后的流，前端页面使用canvas实时渲染。

搭建步骤：

1、安装ffmpeg，并配置环境变量（省略）

2、安装nodejs（省略）

3、使用npm命令安装 webSocket 依赖，CMD执行：

npm install ws

4、下载jsmpeg，并解压

github：https://github.com/phoboslab/jsmpeg

可直接下载：jsmpeg-master.zip

5、启动Websocket中继。提供输入HTTP视频流的密码和端口，以及我们可以在浏览器中连接到的Websocket端口：

node websocket-relay.js [密码] [ffmpeg推送端口] [前端webSocket端口]

node websocket-relay.js supersecret 8081 8082

6、启动ffmpeg转发rtsp流至8081端口

ffmpeg -rtsp_transport tcp -i rtsp://admin:admin123@192.168.5.28/h265/ch1/sub/av_stream -f mpegts -codec:v mpeg1video -s 1920*1080 -b:v 1000k -bf 0 http://127.0.0.1:8081/supersecret

解决ffmpeg拉流转发频繁丢包问题：

[rtsp @ 0000000000122bc0] max delay reached. need to consume packet

[rtsp @ 0000000000122bc0] RTP: missed 33 packets

原因：这是rtsp协议默认使用udp导致的问题，所以强制使用tcp（-rtsp_transport tcp）方式可以一定程度避免丢包。

7、修改view-stream.html文件为你node服务器转发的视频流的ip地址和端口号，浏览器访问view-stream.html就可以看到实时的摄像头画面了。

var canvas = document.getElementById('video-canvas');

var url = 'ws://127.0.0.1:8082/';

var player = new JSMpeg.Player(url, {canvas: canvas});

其他方案：

方案一：RTSP转HLS：

优点：苹果推出的协议可以在手机浏览器直接显示。

缺点：延迟太大、谷歌等一些浏览器不兼容

方案二：TSP转RTMP：

优点：基本无延迟，比较成熟。

缺点：依赖flash ，但是现在flash逐渐被淘汰。