JavaScript實現(xiàn)網(wǎng)頁端播放攝像頭實時畫面

第JavaScript實現(xiàn)網(wǎng)頁端播放攝像頭實時畫面目錄初衷應(yīng)對的場景涉及到的范圍解決問題的思路攝像頭的Rtsp地址ffmpeg下載，安裝，配置環(huán)境變量nodejs和ExpressJSMpeg播放和請求打開關(guān)閉

初衷

寫這篇博客已經(jīng)是項目過去很久了，之所以寫是因為當時被這個問題為難了很久。我原本是做后端的，涉及到前端的東西，當時是兩眼一黑。好在最后還是解決了。當相信這個內(nèi)容還是有價值的，所以今天整理出來，幫助未來可能需求的人。

應(yīng)對的場景

希望在自己的Web應(yīng)用中播放局域網(wǎng)（不能上云），或是廣域網(wǎng)的攝像頭實時畫面。

涉及到的范圍

Nodejs以及ExpressWebSockethtml頁面拉流ffmpeg推流用node-rtsp-stream主要依賴這個東西，將rtsp流推送到WsJSMpeg主要用來播放ws流畫面

這個解決方案是全前端方案，所以后端的流處理都是用Node處理的。

解決問題的思路

首先要拿到攝像頭的播放Rtsp通道。（有些是帶密碼的，有些不帶密碼）。使用ffmpeg將rtsp流轉(zhuǎn)成ws流。當客戶端請求播放攝像頭畫面的時候，Node接受請求，并將流地址返回給前端。前端使用JSMpeg去播放ws流，畫面呈現(xiàn)。閉關(guān)的時候，仍然請求后端，用Node處理。閉關(guān)推流進程。

攝像頭的Rtsp地址

因為這里沒有攝像頭，所以我在網(wǎng)上搜索了一個流地址：

rtsp:///vod/mp4:BigBuckBunny_115k.mov'

如果電腦中裝了VCL，則可以使用VCL的流地址播放功能去播放，這里我就不做演示了。

ffmpeg下載，安裝，配置環(huán)境變量

這里我在gitHub上找到了一個ffmepg下載地址,這個版本是windows版本的。

安裝就不用說了，下一步，下一步即可，最后就說配置環(huán)境變量。其作用就是在命令行狀態(tài)下可以直接通過ffmpeg訪問到文件。

nodejs和Express

nodejs我就不詳細介紹了，express也一樣，這兩個東西要是不會，這篇文章也就不用看了。

然后就是寫代碼接受前端到http請求了。可以參考博客園里面的express介紹。稍后我會貼出代碼，建議看看文檔。

Express參考

接受請求的代碼

varexpress=require('express');

constrequestmanager=require('../lib/RequestManager')

varrouter=express.Router();

router.get('/',function(req,res){

res.send('CarmerasServerisRuning...');

/*GETuserslisting.*/

router.post('/',function(req,res){

varcfg=req.body

letresult=newrequestmanager().Open(cfg)

res.json(result)

router.post('/close',function(req,res){

varcfg=req.body

newrequestmanager().Close(cfg)

res.json({state:'closethertspstreamsuccess.'})

這里用到了node-rtsp-stream、express、express.Router還引用了一個RequestManager，這是我自己寫的一個管理請求的包，代碼如下：

constStream=require('node-rtsp-stream')

constos=require('os');

///獲取本機ip///

functiongetIPAdress(){

varinterfaces=workInterfaces();

for(vardevNameininterfaces){

variface=interfaces[devName];

for(vari=0;iiface.length;i++){

varalias=iface[i];

if(alias.family==='IPv4'alias.address!==''!ernal){

returnalias.address;

constargs=[]

constrequestManager=function(){}

//這里是在原型上加上打開和關(guān)閉兩個方法

requestMtotype={

Open:function(arg){

letresult={}

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}`})

returnresult;

Close:function(arg){

letresult={}

letidx=-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)

returnresult

//這里是產(chǎn)生一個隨機端口號，用來推流使用。

_randomPort:function(){

letport=Math.floor(Math.random()*(4001-3001)+3001)

returnport

//這里是核心推流代碼，其實很簡單。

_openVideo:function(arg){

arg.stream=newStream({

name:'name',

//streamUrl:'rtsp:///vod/mp4:BigBuckBunny_115k.mov',

streamUrl:arg.rtspUrl,

wsPort:arg.port,

ffmpegOptions:{//optionsffmpegflags

'-stats':'',//anoptionwithnoneccessaryvalueusesablankstring

'-r':30,//optionswithrequiredvaluesspecifythevalueafterthekey

'-s':arg.size,

'-codec:a':'mp2',

'-ar':44100,

'-ac':1,

'-b:a':'128k'

returnarg

//這里創(chuàng)建參數(shù)。

_create:function(arg){

lettarget={

rtspUrl:'rtsp:///vod/mp4:BigBuckBunny_115k.mov',

port:this._randomPort(),

size:'1024*768',

stream:null

letsource={

rtspUrl:arg.rtspUrl,

port:this._randomPort(),

size:arg.size,

stream:null

Object.assign(target,source)

args.push(target)

returntarget

module.exports=requestManager

當Open方法被調(diào)用的時候，node-rtsp-stream會調(diào)用ffmepg程序開始推流。其參數(shù)如下：

ffmpegOptions:{//optionsffmpegflags

'-stats':'',//anoptionwithnoneccessaryvalueusesablankstring

'-r':30,//optionswithrequiredvaluesspecifythevalueafterthekey

'-s':arg.size,

'-codec:a':'mp2',

'-ar':44100,

'-ac':1,

'-b:a':'128k'

這里關(guān)注-s它是設(shè)置畫幅大小的。所以我這里用到了參數(shù)arg.size。帶_(下劃線)的方法內(nèi)部使用。關(guān)鍵位置都給了注視了，一般應(yīng)該是看的懂了。

JSMpeg播放和請求打開關(guān)閉

這是個第三方庫，在gitee和gitHub上都有，這里列出Gitee上的地址JSMpeg我用到的關(guān)鍵代碼就幾句

/*初始化并播放*/

letplayer=newJSMpeg.Player(url,opt);

/*銷毀關(guān)閉*/

player.destroy()

至于請求，可以用axios或是jquery庫，我這里用的是jquery

varplayer

//關(guān)閉

functioncloseStream(){

$.post(":3000/cameras/close/",{rtspUrl:$('#rtsp').val()},function(result){

player.destroy()

//打開

functionstart(){

varrstp=$('#rtsp').val()

varsize=$('#size').val()

$.post(":3000/cameras/",{rtspUrl:rstp,size:size},function(result){

varurl="ws://:"+result.port;

varcanvas=document.getElementById('video-canvas');

letopt={

canvas:canvas,

poster:"0.jpg",

player=newJSMpeg.Player(url,opt);

完整的Html如下：

!DOCTYPEhtml

head

metacharset="utf-8"

metaname="viewport"content="width=device-width"

titleDEMOnode-rtsp-stream-jsmpeg/title

scriptsrc="/jsmpeg.min.js"/script

scriptsrc="/jquery/2.0.0/jquery.min.js"/script

styletype="text/css"

html,

body{

text-align:center;

input[type='text']{

width:450px;

/style

/head

body

div

!--spanrtsp:inputtype="text"name="rtsp"id="rtsp"value="rtsp://admin:xcs123456@1:554/h264/ch1/main/av_stream"/spanbr/--

spanrtsp:inputtype="text"name="rtsp"id