实现思路为：服务器安装ffmpeg以及nodejs等软件，ffmpeg用来采集摄像头rtsp流，nodejs启动websocket发送采集到的rtsp流，前端页面使用canvas实时渲染。

实现步骤

1、安装最新版FFmpeg，安装资料：Linux环境如何安装最新版ffmpeg

2、安装nodejs，安装资料：Linux环境下安装最新版nodejs和npm教程

3、使用npm命令安装http-server

sudo npm -g install http-server

此处是为html文件启动服务供站外浏览器访问，当然也可以使用nginx、apache等，或者直接在windows客户端，打开静态文件即可，安装完成之后需要修改静态html文件里的视频流地址才可看到实时视频，修改view-stream.html中红框位置为你node服务器转发的视频流的ip地址加端口号。

4、下载jsmpeg项目文件

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

下载zip包上传至服务器即可。

5、重命名文件名为jsmpeg，然后cd jsmpeg/

6、安装node.js websocket依赖

npm install ws

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

node websocket-relay.js supersecret 8081 8082

8、如果使用的http-server 需要启动第三步安装的http-server将view-stream.html提供访问服务，不启动话就是用第三步的本地方法进行访问。

9、在浏览器访问view-stream.html，这时还看不到任何视频画面

10、启动ffmpeg转发rtsp流至8081端口，例：rtsp流为rtsp://账号:密码@摄像头ip:访问端口/cam/realmonitor?channel=1&subtype=1，启动命令：

cd 到安装ffmpeg目录下的bin目录中
./ffmpeg -i "rtsp://账号:密码@摄像头ip:访问端口/cam/realmonitor?channel=1&subtype=1" -f mpegts -codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 http://127.0.0.1:8081/supersecret

至此，这种方法应该就可以在浏览器看到实时的摄像头画面了。

参考文章：

本文参考于github公开项目，以及互联网公开文章，具体文章链接如下：

https://github.com/phoboslab/jsmpeg

https://blog.csdn.net/yelin042/article/details/78134113