JavaScript实现网页端播放摄像头实时画面

JavaScript实现网页端播放摄像头实时画面

目录

初衷

应对的场景

涉及到的范围

解决问题的思路

摄像头的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也一样,这两个东西要是不会,这篇文章也就不用看了。

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

Express参考

接受请求的代码

var express = require('express'); const requestmanager = require('../lib/RequestManager') var router = express.Router(); router.get('/', function (req, res) { res.send('Carmeras Server is Runing...'); }); /* GET users listing. */ router.post('/', function (req, res) { var cfg = req.body let result = new requestmanager().Open(cfg) res.json(result) }); router.post('/close', function (req, res) { var cfg = req.body new requestmanager().Close(cfg) res.json({ state: 'close the rtsp stream success.' }) })

这里用到了 node-rtsp-stream 、express 、express.Router 还引用了一个 RequestManager,这是我自己写的一个管理请求的包,代码如下:

const Stream = require('node-rtsp-stream') const os = require('os'); ///获取本机ip/// function getIPAdress() { var interfaces = os.networkInterfaces(); for (var devName in interfaces) { var iface = interfaces[devName]; for (var i = 0; i < iface.length; i++) { var alias = iface[i]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } } } const args = [] const requestManager = function () { } //这里是在原型上加上打开和关闭两个方法 requestManager.prototype = { Open: function (arg) { let result = {} if (args.length == 0) { result = this._create(arg) result = this._openVideo(result) } else { args.forEach(a => { if (a.rtspUrl == arg.rtspUrl) { result = a } }) if (result.port === undefined || result.rtspUrl === undefined) { result = this._create(arg) result = this._openVideo(result) } } result = Object.assign(result,{url:`ws:\\${getIPAdress()}:${result.port}`}) return result; }, Close: function (arg) { let result = {} let idx = -1 idx = args.findIndex(a => a.rtspUrl == arg.rtspUrl) if (idx !== -1) { args[idx].stream.stop() result = args.splice(idx, 1) } else { } console.log(args) return result }, //这里是产生一个随机端口号,用来推流使用。 _randomPort: function () { let port = Math.floor(Math.random() * (4001 - 3001) + 3001) return port }, //这里是核心推流代码,其实很简单。 _openVideo: function (arg) { arg.stream = new Stream({ name: 'name', //streamUrl: 'rtsp://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("http://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("http://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.webp", } 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="https://jsmpeg.com/jsmpeg.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></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("http://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("http://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.webp", } player = new JSMpeg.Player(url, opt); }) } </script> </body>

以上就是全部的内容,完整代码可以到gitee上下载。

以上就是JavaScript实现网页端播放摄像头实时画面的详细内容,更多关于JavaScript摄像头实时画面的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读