如何用JavaScript实现网页端实时摄像头画面播放功能？

本文共计1428个文字，预计阅读时间需要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处理的。