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

初衷

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

應對的場景

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

涉及到的范圍

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

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

解決問題的思路

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

攝像頭的Rtsp地址

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

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

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

ffmpeg下載，安裝，配置環境變量

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

安裝就不用說了，下一步，下一步即可，最后就說配置環境變量。其作用就是在命令行狀態下可以直接通過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(){}

//這里是在原型上加上打開和關閉兩個方法

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

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

_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

//這里創建參數。

_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方法被調用的時候，node-rtsp-stream會調用ffmepg程序開始推流。其參數如下：

ffmpegOptions:{//optionsffmpegflags

'-stats':'',//anoptionwithnoneccessaryvalueusesablankstring

'-r':30,//optionswithrequiredvaluesspecifythevalueafterthekey

'-s':arg.size,

'-codec:a':'mp2',

'-ar':44100,

'-ac':1,

'-b:a':'128k'

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

JSMpeg播放和請求打開關閉

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

/*初始化并播放*/

letplayer=newJSMpeg.Player(url,opt);

/*銷毀關閉*/

player.destroy()

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

varplayer

//關閉

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