如何用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处理的。
解决问题的思路
- 首先要拿到摄像头的播放Rtsp通道。（有些是带密码的，有些不带密码）。
- 使用ffmpeg将rtsp流转成ws流。
- 当客户端请求播放摄像头画面的时候，Node接受请求，并将流地址返回给前端。
- 前端使用 JSMpeg 去播放ws流，画面呈现。
- 闭关的时候，仍然请求后端，用Node处理。闭关推流进程。
摄像头的Rtsp地址
因为这里没有摄像头，所以我在网上搜索了一个流地址：
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'
如果电脑中装了 VCL，则可以使用VCL的流地址播放功能去播放，这里我就不做演示了。
ffmpeg 下载，安装，配置环境变量
这里我在gitHub上找到了一个ffmepg下载地址,这个版本是windows版本的。
安装就不用说了，下一步，下一步即可，最后就说配置环境变量。其作用就是在命令行状态下可以直接通过 ffmpeg 访问到文件。
nodejs 和 Express
nodejs 我就不详细介绍了，express也一样，这两个东西要是不会，这篇文章也就不用看了。
然后就是写代码接受前端到wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov', streamUrl: arg.rtspUrl, wsPort: arg.port, ffmpegOptions: { // options ffmpeg flags '-stats': '', // an option with no neccessary value uses a blank string '-r': 30, // options with required values specify the value after the key '-s': arg.size, '-codec:a': 'mp2', '-ar': 44100, '-ac': 1, '-b:a': '128k' } }) return arg }, //这里创建参数。 _create: function (arg) { let target = { rtspUrl: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov', port: this._randomPort(), size: '1024*768', stream: null } let source = { rtspUrl: arg.rtspUrl, port: this._randomPort(), size: arg.size, stream: null } Object.assign(target, source) args.push(target) return target } } module.exports = requestManager
当 Open方法被调用的时候，node-rtsp-stream会调用 ffmepg 程序开始推流。其参数如下：
ffmpegOptions: { // options ffmpeg flags '-stats': '', // an option with no neccessary value uses a blank string '-r': 30, // options with required values specify the value after the key '-s': arg.size, '-codec:a': 'mp2', '-ar': 44100, '-ac': 1, '-b:a': '128k' }
这里关注 -s 它是设置画幅大小的。所以我这里用到了参数 arg.size。带_(下划线)的方法内部使用。关键位置都给了注视了，一般应该是看的懂了。
JSMpeg 播放 和请求打开关闭
这是个第三方库，在gitee和gitHub上都有，这里列出Gitee上的地址JSMpeg我用到的关键代码就几句
/*初始化并播放*/ let player = new JSMpeg.Player(url, opt); /*销毁关闭*/ player.destroy()
至于请求，可以用axios 或是 jquery库，我这里用的是 jquery
var player //关闭 function closeStream() { $.post("127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function (result) { player.destroy() }) } //打开 function start() { var rstp = $('#rtsp').val() var size = $('#size').val() $.post("127.0.0.1:3000/cameras/", { rtspUrl:rstp, size: size }, function (result) { var url = "ws://127.0.0.1:" + result.port; var canvas = document.getElementById('video-canvas'); let opt = { canvas: canvas, poster: "0.jpg", } player = new JSMpeg.Player(url, opt); }) }
完整的Html如下：
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>DEMO node-rtsp-stream-jsmpeg</title> <script src="/uploads/allimg/230118/0U00L942-0.jpg"></script> <script src="/uploads/allimg/230118/0U00LQ2-1.jpg"></script> <style type="text/css"> html, body { text-align: center; } input[type='text'] { width: 450px; } </style> </head> <body> <div> <!-- <span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://admin:xcs123456@192.168.3.11:554/h264/ch1/main/av_stream"></span><br /> --> <span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></span><br /> <span>rtsp : <input type="text" name="size" id="size" value="1024*768"></span><br /> <canvas id="video-canvas"> </canvas><br /> <input type="button" value="Start Stream" onclick="start()"> <input type="button" value="Close Stream" onclick="closeStream()"> </div> <script type="text/javascript"> var player function closeStream() { $.post("127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function (result) { player.destroy() }) } function start() { var rstp = $('#rtsp').val() var size = $('#size').val() $.post("127.0.0.1:3000/cameras/", { rtspUrl:rstp, size: size }, function (result) { var url = "ws://127.0.0.1:" + result.port; var canvas = document.getElementById('video-canvas'); let opt = { canvas: canvas, poster: "0.jpg", } player = new JSMpeg.Player(url, opt); }) } </script> </body>
以上就是全部的内容，完整代码可以到gitee上下载。
以上就是JavaScript实现网页端播放摄像头实时画面的详细内容，更多关于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处理的。
解决问题的思路
- 首先要拿到摄像头的播放Rtsp通道。（有些是带密码的，有些不带密码）。
- 使用ffmpeg将rtsp流转成ws流。
- 当客户端请求播放摄像头画面的时候，Node接受请求，并将流地址返回给前端。
- 前端使用 JSMpeg 去播放ws流，画面呈现。
- 闭关的时候，仍然请求后端，用Node处理。闭关推流进程。
摄像头的Rtsp地址
因为这里没有摄像头，所以我在网上搜索了一个流地址：
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'
如果电脑中装了 VCL，则可以使用VCL的流地址播放功能去播放，这里我就不做演示了。
ffmpeg 下载，安装，配置环境变量
这里我在gitHub上找到了一个ffmepg下载地址,这个版本是windows版本的。
安装就不用说了，下一步，下一步即可，最后就说配置环境变量。其作用就是在命令行状态下可以直接通过 ffmpeg 访问到文件。
nodejs 和 Express
nodejs 我就不详细介绍了，express也一样，这两个东西要是不会，这篇文章也就不用看了。
然后就是写代码接受前端到wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov', streamUrl: arg.rtspUrl, wsPort: arg.port, ffmpegOptions: { // options ffmpeg flags '-stats': '', // an option with no neccessary value uses a blank string '-r': 30, // options with required values specify the value after the key '-s': arg.size, '-codec:a': 'mp2', '-ar': 44100, '-ac': 1, '-b:a': '128k' } }) return arg }, //这里创建参数。 _create: function (arg) { let target = { rtspUrl: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov', port: this._randomPort(), size: '1024*768', stream: null } let source = { rtspUrl: arg.rtspUrl, port: this._randomPort(), size: arg.size, stream: null } Object.assign(target, source) args.push(target) return target } } module.exports = requestManager
当 Open方法被调用的时候，node-rtsp-stream会调用 ffmepg 程序开始推流。其参数如下：
ffmpegOptions: { // options ffmpeg flags '-stats': '', // an option with no neccessary value uses a blank string '-r': 30, // options with required values specify the value after the key '-s': arg.size, '-codec:a': 'mp2', '-ar': 44100, '-ac': 1, '-b:a': '128k' }
这里关注 -s 它是设置画幅大小的。所以我这里用到了参数 arg.size。带_(下划线)的方法内部使用。关键位置都给了注视了，一般应该是看的懂了。
JSMpeg 播放 和请求打开关闭
这是个第三方库，在gitee和gitHub上都有，这里列出Gitee上的地址JSMpeg我用到的关键代码就几句
/*初始化并播放*/ let player = new JSMpeg.Player(url, opt); /*销毁关闭*/ player.destroy()
至于请求，可以用axios 或是 jquery库，我这里用的是 jquery
var player //关闭 function closeStream() { $.post("127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function (result) { player.destroy() }) } //打开 function start() { var rstp = $('#rtsp').val() var size = $('#size').val() $.post("127.0.0.1:3000/cameras/", { rtspUrl:rstp, size: size }, function (result) { var url = "ws://127.0.0.1:" + result.port; var canvas = document.getElementById('video-canvas'); let opt = { canvas: canvas, poster: "0.jpg", } player = new JSMpeg.Player(url, opt); }) }
完整的Html如下：
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>DEMO node-rtsp-stream-jsmpeg</title> <script src="/uploads/allimg/230118/0U00L942-0.jpg"></script> <script src="/uploads/allimg/230118/0U00LQ2-1.jpg"></script> <style type="text/css"> html, body { text-align: center; } input[type='text'] { width: 450px; } </style> </head> <body> <div> <!-- <span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://admin:xcs123456@192.168.3.11:554/h264/ch1/main/av_stream"></span><br /> --> <span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></span><br /> <span>rtsp : <input type="text" name="size" id="size" value="1024*768"></span><br /> <canvas id="video-canvas"> </canvas><br /> <input type="button" value="Start Stream" onclick="start()"> <input type="button" value="Close Stream" onclick="closeStream()"> </div> <script type="text/javascript"> var player function closeStream() { $.post("127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function (result) { player.destroy() }) } function start() { var rstp = $('#rtsp').val() var size = $('#size').val() $.post("127.0.0.1:3000/cameras/", { rtspUrl:rstp, size: size }, function (result) { var url = "ws://127.0.0.1:" + result.port; var canvas = document.getElementById('video-canvas'); let opt = { canvas: canvas, poster: "0.jpg", } player = new JSMpeg.Player(url, opt); }) } </script> </body>
以上就是全部的内容，完整代码可以到gitee上下载。
以上就是JavaScript实现网页端播放摄像头实时画面的详细内容，更多关于JavaScript摄像头实时画面的资料请关注自由互联其它相关文章！