基于FFMPEG+JSMPEG+Nodejs的web流媒体方案
基于FFMPEG+JSMPEG+Nodejs的web流媒体方案
本次介绍一种方案：基于FFMPEG+JSMPEG+Nodejs的web流媒体方案。
通过本方案可以轻松实现摄像头监控视频的web显示。本文以海康威视摄像头为例， 型号为DS-2CD2055， 需要将此摄像头的实时图像在web页面上实时显示。 同时介绍了在windows和Linux ubuntu18 下安装FFMPEG，JSMPEG，Nodejs的步骤
1 简介
- FFMPEG
FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。它包括了目前领先的音/视频编码库libavcodec。 FFmpeg是在 Linux 下开发出来的，但它可以在包括 Windows 在内的大多数操作系统中编译。
本方案中，ffmpeg用来将海康威视摄像头的RTSP流转成mpegts流，并将H.264编码为mpeg1video。
- 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浏览器的视频流请求。
- 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/
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:[email protected]: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:[email protected]: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:[email protected]: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:[email protected]: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:[email protected]: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:[email protected]: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:[email protected]:554/h264/ch1/main/av_stream
子码流取流:
rtsp://admin:[email protected]:554/h264/ch1/sub/av_stream
如果摄像机密码是foa123456,IP是192.168.1.135，RTSP端口默认554未做改动，是H.264编码，那么
主码流取流:
rtsp:// admin:[email protected]:554/h264/ch1/main/av_stream
子码流取流:
rtsp:// admin:[email protected]: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:[email protected]:554/Streaming/tracks/101?starttime=20120802t063812z&endtime=20120802t064816z
DS-9016HF-ST的IP通道01：
rtsp://admin:[email protected]: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:[email protected]: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