基于FFMPEG+JSMPEG+Nodejs的web流媒体方案

本次介绍一种方案：基于FFMPEG+JSMPEG+Nodejs的web流媒体方案。

通过本方案可以轻松实现摄像头监控视频的web显示。本文以海康威视摄像头为例， 型号为DS-2CD2055， 需要将此摄像头的实时图像在web页面上实时显示。 同时介绍了在windows和Linux ubuntu18 下安装FFMPEG，JSMPEG，Nodejs的步骤

1 简介

1. FFMPEG

FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。它包括了目前领先的音/视频编码库libavcodec。 FFmpeg是在 Linux 下开发出来的，但它可以在包括 Windows 在内的大多数操作系统中编译。

 

本方案中，ffmpeg用来将海康威视摄像头的RTSP流转成mpegts流，并将H.264编码为mpeg1video。

 

1. JSMPEG

JSMpeg 是用 JavaScript 编写的视频播放器。它包括 MPEG-TS 解码器，MPEG 1 视频和 MP2 音频解码器，WebGL 和 Canvas2D 渲染器和 WebAudio 声音输出。JSMpeg 可以通过 Ajax 加载静态视频，并允许通过 WebSocket 提供低延迟流(~50 ms)。

JSMpeg 可以在 iPhone5S 上以 30 fps 的速度解码 720 p 视频，在任何现代浏览器(Chrome、Firefox、Safari、Edge)中都可以使用，而且压缩速度只有 20 kb。

 

本方案中，JSMpeg 接收ffmpeg推送的视频流，并对外提供websocket端口，接收web浏览器的视频流请求。

 

1. Nodejs

大家都很熟悉了。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 [1]

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言

 

本方案中，Node.js 提供JSMPEG的运行环境，并作为http server 提供web访问接口。

2 安装配置

2.1 FFMPEG安装配置

下载

Ffmpeg官网只提供源码的下载：

http://www.ffmpeg.org/download.html

下载编译好的二进制包，可以从zeranoe下载

https://ffmpeg.zeranoe.com/builds/

 

安装

下载之后，直接解压，可执行文件在bin目录下，本人是在

D:\study\webVideo\ffmpeg-20200403-win64-static\bin

 

将此目录加到path环境变量中，这个不用教了吧，不会的话，baidu一下吧。

在命令行中输入 ffmpeg, 如果输出以下信息，说明安装成功：

 

Linux 下，直接运行：

sudo apt-get install ffmpeg 

 

2.2 node.js安装配置

下载

在官网下载安装包https://nodejs.org/en/

直接双击安装包，安装即可。

安装完成后，在命令行输入node -v,  正确显示版本号，说明安装成功

后面，需要把node_modules 目录加到path环境变量，否则后面会出现包找不到的错误。

默认的node_modules是在user 目录，例如，本人的是在C:\Users\Administrator\node_modules

 

Linux下，

sudo apt-get update

sudo apt-get install -y software-properties-common

sudo add-apt-repository ppa:chris-lea/node.js

sudo apt-get update

sudo apt-get install nodejs

查看是否安装成功

robin@robin:/local/dev/delivery/wwwroot$ npm -v

6.14.4

robin@robin:/local/dev/delivery/wwwroot$ nodejs -v

v12.16.2

#更改源

sudo npm config set registry https://registry.npm.taobao.org

sudo npm config list

 

Websocket和http-server安装

在cmd控制台输入:

npm install ws -g

npm install http-server -g

2.3 JSMPEG 安装配置

下载：https://codeload.github.com/phoboslab/jsmpeg/zip/master

直接解压即可

在解压的目录下会有websocket-relay.js文件

 

3 启动

3.1启动websocket-relay.js

打开命令行，进入websocket-relay.js文件所在的目录，运行：

• node websocket-relay.js passwd 8081 8082

passwd: 为设置的密码

8081：是ffmpeg推送端口

8082：是前端webSocket端口

 

输出如下：

D:\study\webVideo\jsmpeg-master>node websocket-relay.js foa123456 8081 8082

Listening for incomming MPEG-TS Stream on http://127.0.0.1:8081/<secret>

Awaiting WebSocket connections on ws://127.0.0.1:8082/

Stream Connected: ::ffff:127.0.0.1:51321

 

3.2启动运行ffmpeg

打开命令行，输入：

ffmpeg -i "rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream" -r 30 -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/123456

 

其中，

• "rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream" 是海康摄像头的RTSP URL地址，具体的格式介绍请参见5.3节。
• http://127.0.0.1:8081/123456 是ffmpeg需要把视频流推送到的地址， foa123456是推流密码
• 其他的参数可以参看ffmpeg的手册。

 

输出如下：

C:\Users\Administrator> ffmpeg -i "rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream" -r 30 -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/123456

ffmpeg version git-2020-04-03-52523b6 Copyright (c) 2000-2020 the FFmpeg developers

  built with gcc 9.3.1 (GCC) 20200328

  configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libsrt --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvmaf --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-ffnvcodec --enable-cuda-llvm --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt --enable-amf

  libavutil      56. 42.102 / 56. 42.102

  libavcodec     58. 77.101 / 58. 77.101

  libavformat    58. 42.100 / 58. 42.100

  libavdevice    58.  9.103 / 58.  9.103

  libavfilter     7. 77.101 /  7. 77.101

  libswscale      5.  6.101 /  5.  6.101

  libswresample   3.  6.100 /  3.  6.100

  libpostproc    55.  6.100 / 55.  6.100

Input #0, rtsp, from 'rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream':

  Metadata:

    title           : Media Presentation

  Duration: N/A, start: 0.160000, bitrate: N/A

    Stream #0:0: Video: h264 (Main), yuvj420p(pc, bt709, progressive), 2560x1920, 12.50 tbr, 90k tbn, 180k tbc

Stream mapping:

  Stream #0:0 -> #0:0 (h264 (native) -> mpeg1video (native))

Press [q] to stop, [?] for help

[swscaler @ 0000027854e58100] deprecated pixel format used, make sure you did set range correctly

Output #0, mpegts, to 'http://127.0.0.1:8081/foa123456':

  Metadata:

    title           : Media Presentation

    encoder         : Lavf58.42.100

    Stream #0:0: Video: mpeg1video, yuv420p, 1366x768, q=2-31, 200 kb/s, 30 fps, 90k tbn, 30 tbc

    Metadata:

      encoder         : Lavc58.77.101 mpeg1video

    Side data:

      cpb: bitrate max/min/avg: 0/0/200000 buffer size: 0 vbv_delay: N/A

3.3 启动http-server

打开一个命令行进入jsmpeg目录，输入： http-server

输出如下：

D:\study\webVideo\jsmpeg-master>http-server

Starting up http-server, serving ./

Available on:

  http://192.168.56.1:8080

  http://192.168.1.109:8080

  http://192.168.1.2:8080

  http://127.0.0.1:8080

Hit CTRL-C to stop the server

4 查看视频画面

打开浏览器，输入： http://localhost:8080/view-stream.html

就可以看到视频画面了。

5 Trouble shooting

5.1 MPEG-1/2 does not support 12/1 fps

运行命令： ffmpeg -i “rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream” -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/123456

报如下错误：

[mpeg1video @ 0000017a40cd0700] MPEG-1/2 does not support 12/1 fps

Error initializing output stream 0:0 -- Error while opening encoder for output stream #0:0 - maybe incorrect parameters               such as bit_rate, rate, width or height

Conversion failed!

这是说mpeg1/2与12fps的帧率不兼容，mpeg不支持这么低的帧率。

在命令行加上 -r 30 参数即可

改为： ffmpeg -i "rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream" -r 30 -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/foa123456

问题解决

5.2 Error: Cannot find module 'ws'

运行 > node websocket-relay.js passwd 8081 8082 

报如下错误：

            Error: Cannot find module 'ws'

这是提示 找不到websocket module, 可是，websocket module 已经安装了。

这时，

Windows下需要把node module的目录加到path环境变量

默认的目录为 C:\Users\Administrator\node_modules， 如果已经改了配置，以配置的为准。

Linux下，export NODE_PATH=/usr/lib/node_modules

5.3 海康摄像头RTSP取流的URL格式

1）预览取流url

海康威视摄像头主码流取流:

rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream

子码流取流:

rtsp://admin:12345@192.0.0.64:554/h264/ch1/sub/av_stream

如果摄像机密码是foa123456,IP是192.168.1.135，RTSP端口默认554未做改动，是H.264编码，那么

主码流取流:

rtsp:// admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream

子码流取流:

rtsp:// admin:foa123456@192.168.1.135:554/h264/ch1/sub/av_stream

如果是H.265编码的，那么将H.264替换成H.265即可

 

2）回放取流url

RTSP回放URL规定：

rtsp://username:password@:/Streaming/tracks/(?parm1=value1&parm2-=value2…)

举例说明：

DS-9016HF-ST的模拟通道01：

rtsp://admin:12345@172.6.22.106:554/Streaming/tracks/101?starttime=20120802t063812z&endtime=20120802t064816z

DS-9016HF-ST的IP通道01：

rtsp://admin:12345@172.6.22.106:554/Streaming/tracks/1701?starttime=20131013t093812z&endtime=20131013t104816z

表示以单播形式回放指定设备的通道中的录像文件，时间范围是starttime到endtime，其中starttime和endtime的格式要符合ISO

8601。具体格式是YYYYMMDD”T”HHmmSS.fraction”Z”

，Y是年，M是月，D是日，T是时间分格符，H是小时，M是分，S是秒，Z是可选的、表示Zulu (GMT) 时间。

32及32路以下 NVR，IP通道号是从33开始的。但是取流地址中做了处理，从1开始即可

3）使用VLC验证格式

要验证rtsp url是否正确，可以使用VLC播放器验证。VLC播放器可以到https://www.videolan.org/ 下载并安装。

点击 媒体->打开网络串流…

在弹出的对话框中，输入RTSP URL，例如

rtsp://admin:foa123456@192.168.1.135:554/h264/ch1/main/av_stream

然后点击播放，如何格式正确，就能在VLC中看到摄像头的监控画面

 6 Reference

https://blog.csdn.net/u014535295/article/details/99303890

https://blog.csdn.net/xundh/article/details/94605598

https://blog.csdn.net/LLittleF/article/details/81111713?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-7