如何用JavaScript在网页上实现摄像头实时视频流的播放？

本文共计1424个文字，预计阅读时间需要6分钟。

目录+初识+对应的场景+涉及到的范围+解决问题的思路+摄像头的Rtsp地址+ffmpeg下载、安装、配置环境变量+nodejs和Express+JSMpeg播放和请求打开关闭+初识+这篇博客已经过去很久了

目录

• 初衷
• 应对的场景
• 涉及到的范围
• 解决问题的思路
• 摄像头的Rtsp地址
• ffmpeg下载，安装，配置环境变量
• nodejs和Express
• JSMpeg播放和请求打开关闭

初衷

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

应对的场景

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

涉及到的范围

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

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