JavaScript實現(xiàn)網(wǎng)頁端播放攝像頭實時畫面
更新時間：2022年02月23日 09:25:26 作者：莫問哥哥
這篇文章主要介紹了如何利用JavaScript實現(xiàn)在網(wǎng)頁端播放局域網(wǎng)（不能上云）或是廣域網(wǎng)的攝像頭的實時畫面，文中的示例代碼講解詳細，需要的可以參考一下
初衷
寫這篇博客已經是項目過去很久了，之所以寫是因為當時被這個問題為難了很久。我原本是做后端的，涉及到前端的東西，當時是兩眼一黑。好在最后還是解決了。當相信這個內容還是有價值的，所以今天整理出來，幫助未來可能需求的人。
應對的場景
希望在自己的Web應用中播放局域網(wǎng)（不能上云），或是廣域網(wǎng)的攝像頭實時畫面。
涉及到的范圍
- Nodejs 以及 Express
- WebSocket html頁面拉流
- ffmpeg 推流用
- node-rtsp-stream 主要依賴這個東西，將 rtsp 流推送到 Ws
- JSMpeg 主要用來播放 ws 流畫面
這個解決方案是全前端方案，所以后端的流處理都是用Node處理的。
解決問題的思路
- 首先要拿到攝像頭的播放Rtsp通道。（有些是帶密碼的，有些不帶密碼）。
- 使用ffmpeg將rtsp流轉成ws流。
- 當客戶端請求播放攝像頭畫面的時候，Node接受請求，并將流地址返回給前端。
- 前端使用 JSMpeg 去播放ws流，畫面呈現(xiàn)。
- 閉關的時候，仍然請求后端，用Node處理。閉關推流進程。
攝像頭的Rtsp地址
因為這里沒有攝像頭，所以我在網(wǎng)上搜索了一個流地址：
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'
如果電腦中裝了 VCL，則可以使用VCL的流地址播放功能去播放，這里我就不做演示了。
ffmpeg 下載，安裝，配置環(huán)境變量
這里我在gitHub上找到了一個ffmepg下載地址 ,這個版本是windows版本的。
安裝就不用說了，下一步，下一步即可，最后就說配置環(huán)境變量。其作用就是在命令行狀態(tài)下可以直接通過 ffmpeg 訪問到文件。
nodejs 和 Express
nodejs 我就不詳細介紹了，express也一樣，這兩個東西要是不會，這篇文章也就不用看了。
然后就是寫代碼接受前端到http請求了。可以參考博客園里面的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
},
//這里創(chuàng)建參數(shù)。
_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 程序開始推流。其參數(shù)如下：
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 它是設置畫幅大小的。所以我這里用到了參數(shù) 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.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="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.jpg",
}
player = new JSMpeg.Player(url, opt);
})
}
</script>
</body>
以上就是全部的內容，完整代碼可以到gitee上下載。
以上就是JavaScript實現(xiàn)網(wǎng)頁端播放攝像頭實時畫面的詳細內容，更多關于JavaScript攝像頭實時畫面的資料請關注腳本之家其它相關文章！
相關文章
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對數(shù)組中的每個元素執(zhí)行一個函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關于JavaScript中forEach和map詳細講解的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了如何禁止iframe里面的腳本彈出的窗口覆蓋了父窗口,經測試，貌似只能在IE下進行需要的朋友可以參考下2014-09-09
下面小編就為大家?guī)硪黄猨s獲取新浪天氣接口的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了解析JS在獲取當前月的最后一天遇到的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
JavaScript之Map和Set_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript之Map和Set的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
一般情況下的單條件篩選，數(shù)組的filter方法就能夠滿足需求，本文討論的重點是多條件下的復合篩選，并列出了幾個相關知識點，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了js實現(xiàn)圖片預加載的方法，內容很詳細，帶領大家全面認識js圖片預加載模塊，感興趣的小伙伴們可以參考一下2016-11-11
關于innerHTML后丟失動態(tài)綁定的EVENT問題解決方法
用innerHTML取出一段內容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失，下面與大家分享下解決方法，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要介紹了當某個文本框成為焦點時如何清除文本框內容,需要的朋友可以參考下2014-04-04
不是效率的問題 是 內存碎片的問題 用數(shù)組速度比“+”要慢 只是內存占的少和內存碎片少一些，現(xiàn)在根本不推薦用數(shù)組來處理了。2010-12-12