纯前端如何在网页端播放摄像头的实时画面

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

如何在网页端播放摄像头的实时画面

初衷

写这篇博客已经是项目过去很久了，之所以写是因为当时被这个问题为难了很久。我原本是做后端的，涉及到前端的东西，当时是两眼一黑。好在最后还是解决了。当相信这个内容还是有价值的，所以今天整理出来，帮助未来可能需求的人。

应对的场景

希望在自己的Web应用中播放局域网（不能上云），或是广域网的摄像头实时画面。

涉及到的范围

1. Nodejs 以及 Express
2. WebSocket html页面拉流
3. ffmpeg 推流用
4. node-rtsp-stream 主要依赖这个东西，将 rtsp 流推送到 Ws
5. JSMpeg 主要用来播放 ws 流画面

这个解决方案是全前端方案，所以后端的流处理都是用Node处理的。

解决问题的思路

1. 首先要拿到摄像头的播放Rtsp通道。（有些是带密码的，有些不带密码）。
2. 使用ffmpeg将rtsp流转成ws流。
3. 当客户端请求播放摄像头画面的时候，Node接受请求，并将流地址返回给前端。
4. 前端使用 JSMpeg 去播放ws流，画面呈现。
5. 闭关的时候，仍然请求后端，用Node处理。闭关推流进程。

摄像头的Rtsp地址

因为这里没有摄像头，所以我在网上搜索了一个流地址：

  rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'

如果电脑中装了 VCL，则可以使用VCL的流地址播放功能去播放，这里我就不做演示了。

ffmpeg 下载，安装，配置环境变量

这里我在gitHub上找到了一个ffmepg下载地址 ,这个版本是windows版本的。

安装就不用说了，下一步，下一步即可，最后就说配置环境变量。其作用就是在命令行状态下可以直接通过 ffmpeg 访问到文件。

nodejs 和 Express

nodejs 我就不详细介绍了，express也一样，这两个东西要是不会，这篇文章也就不用看了。

然后就是写代码接受前端到http请求了。可以参考博客园里面的express介绍。稍后我会贴出代码，建议看看文档。

Express参考

接受请求的代码

var express = require('express');
const requestmanager =