ffmpeg+jsmpeg+nginx实现多道h5视频直播

Posted 2021-05-16 peace-alice

需求：华为、海康威视等的摄像头直播格式为rtsp://***,要求在web页面中展示大屏同时显示5个摄像头的视频直播，不能使用任何播放器。

尝试过ie安装vlc插件可以，其他的chrome等浏览器对vlc的支撑很弱。

https://wiki.videolan.org/Documentation:WebPlugin/

在插件的官网上，由于主流的浏览器版本不能支撑vlc的播放效果。所以希望能从服务器端通过配置的方式解决，前端直接调用url的方式处理。

解决问题的思路是：获取摄像头数据流 --> FFmpeg转码 --> Node.js（搭建webSocket服务器） --> 在服务器上运行jsmpeg程序

记录下具体的操作过程如下：

本机操作系统：win10,虚拟机centos7.

1.先安装好nodejs和ffmpeg.

可以参考之前的文章

--安装nodejs---https://blog.csdn.net/peaceoncemore/article/details/116458340?spm=1001.2014.3001.5501

--安装ffmpeg--https://blog.csdn.net/peaceoncemore/article/details/116461999?spm=1001.2014.3001.5501

2.下载jsmpeg库

https://codeload.github.com/phoboslab/jsmpeg/zip/master

下载jsmpeg-master.zip后解压。可以修改容易记忆的名称  

$ unzip jsmpeg-master.zip

$ mv jsmpeg-master jsmpeg

3.Node.js安装webSocket模块

$ npm install ws -g

4.运行jsmpeg文件夹里面的websocket-relay.js

进入jsmpeg文件夹，运行websocket模块

$ cd /soft/jsmpeg

指令格式：node websocket-relay.js 密码 ffmpeg推送端口 前端webSocket端口

$ node websocket-relay.js password123456 8083 8082

注：第一次使用8081端口，报端口被占用，换成了8083端口

5.运行ffmpeg进行视频转码并转发

指令示例：ffmpeg -i “rtsp地址” -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/password123456

ffmpeg -rtsp_transport tcp  -i rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov -q 0 -f mpegts -codec:v mpeg1video -s 1366*768 http://127.0.0.1:8083/password123456

6.配置nginx，方便从浏览器端访问

安装nginx，下载稳定版本。

http://nginx.org/en/download.html

$ cd /soft

$ rz 

解压到对应的文件夹下

$ tar -zxvf  nginx-1.20.0.tar.gz

$ cd nginx-1.12.0

使用默认配置安装

$ ./configure

编译安装

make && make install

需要端口

为了避免端口重复，把默认的80端口修改成9098

启动

$ cd /usr/local/nginx/sbin

$ ./nginx

注：其他的相关命令

--停止--  ./nginx -s stop

--退出-- ./nginx -s quit

--重启-- ./nginx -s reload

注：在本机尝试，直接192.168.121.128:9098不能访问,但是ping 192.168.121.128是通的。后来查证发现是centos7的防火墙限制了端口，关闭防火墙ok了

关闭防火墙

$ systemctl status firewalld.service  #查看防火墙状态

$ systemctl stop firewalld.service            #停止firewall

$ systemctl disable firewalld.service    #禁止firewall开机启动

设置 iptables service

$ yum -y install iptables-services

如果要修改防火墙配置，如增加防火墙端口3306

$ vi /etc/sysconfig/iptables 

增加规则

-A INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j ACCEPT

保存退出后

$ systemctl restart iptables.service #重启防火墙使配置生效

$ systemctl enable iptables.service #设置防火墙开机启动

关闭防火墙之后可以正常启动了看到欢迎页面。

7.配置nginx.conf，访问只想ws对应的视频页面

$ cd /usr/local/nginx/conf

$ vim nginx.conf

配置root指向jsmpeg，index指向view-stream.html

打开http://192.168.121.128:9098

单个视频播放的ok了

8.配置多是视频同时播放

这里配置以配置2例做说明，多路照着写就可以了。

尝试配置多个端口发现2个视频都在一个页面显示了，视频不停闪烁，一会儿上个视频一会儿下个视频，如何把串在一起的视频分开呢，ws分别对应不同的端口是否ok？经过尝试ok，操作如下：

思路--jsmpeg下配置两个不同的ws对应的端口html----nginx配置不同的端口指向不同的ws对应的html--运行两路独立的视频播放

$ cd /soft/jsmpeg

$ vim view-stream.html

不太习惯命令行地编写代码，导出找个html到本地修改后再上传

$ sz view-stream.html

默认的端口是8082，修改端口为：8089，同时修改个容易记忆的名称为view-live2.html

上传对应的文件到/soft/jsmpeg下

修改/usr/local/nginx/conf/nginx.conf的配置，新增一个server

重启nginx

$ cd /usr/local/nginx/sbin

$ ./nginx -s reload

（1）关闭掉之前打开的ws和ffmpeg运行的终端，从新进入

（2）$cd /soft/jsmpeg

（3）保留这个终端不关闭，从新开一个终端

（4）这个ws8082端口，对应nginx的9098端口，在win10中输入http://192.168.121.128:9098可以看到之前的视频流demo

然后（1）-（4）的步骤

（5）新开一个终端，从新进入 $ cd /soft/jsmpeg

ws对应的端口是8089，视频的端口写一个没有的，8088

（6）保留这个终端不关闭，从新开一个终端

（4）这个ws8082端口，对应nginx的9099端口，在win10中输入http://192.168.121.128:9099可以看到这个摄像头的直播

至此，2路直播已经配置完毕，如果多道，再继续配置，思路一样的。听闻一个ws最多能支撑15路视频直播，再多会很卡，没有试过辣么多的。

踩坑了几天，终于ok了，留个印记，方便以后翻阅。

用到的相关的下载资源会统一放到上传的资源中，方便安装。