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

需求：华为、海康威视等的摄像头直播格式为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了，留个印记，方便以后翻阅。

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

ffmpeg+jsmpeg+nginx实现多道h5视频直播相关推荐

【腾讯Bugly干货分享】H5 视频直播那些事
为什么80%的码农都做不了架构师?>>> 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6 ...
[标题党]15分钟开发可支持百万观众的H5视频直播网站
15分钟用Rails开发一个Blog有什么意思?那是2005年的Hipster追捧的玩具. 现在都已经是2015年了.HTML应该读作Hipster's Toolkit Made Live了. 既然是 ...
酒店直播服务器系统,用ffmpeg+nginx服务器实现类似酒店视频直播系统
最近EasyDarwin群里有朋友是做酒店视频直播系统的,大概需求是这样的:从网络电视平台那里购买了一个直播源,直播源是按并发数收费的,如果能够只用一路客户端将这个直播源获取到酒店的内网,然后再在酒店 ...
基于阿里云直播实现视频推流(ffmpeg)/拉流(Django2.0)以及在线视频直播播放(支持http/https)功能
由于5g网络的光速推广,视频业务又被推上了风口浪尖,在2019年初我们还在谈论照片,短视频等关键字,而进入2020年,我们津津乐道的就只有视频,视频,还是视频,普通人拿起手机做直播早已不是奢望,去年我 ...
nginx+rtmp+OBS搭建音视频直播服务
文章目录 OBS Nginx-rtmp docker方式野生方式推流 hls单码流 rtmp多码流拉流 OBS 下载地址: http://www.obsproject.com.cn/downlo ...
使用Nginx搭建简单的音视频直播平台RTMP协议
https://blog.csdn.net/garrylea/article/details/77075337 https://blog.csdn.net/kenny25/article/detail ...
基础知识 - 视频直播
移动直播.视频直播.Live Video Streaming有多么火爆,搜搜这几个关键字就知道了.直播的形态也在不断发展中:美女秀场 -> 游戏直播 -> 全民直播.相应的拍摄设备也在变化 ...
关于视频直播系统源码所开发的直播平台全流程分析
直播全流程探索近年来,直播兴起,QQ音乐也接入了直播能力,支持演唱会的直播和主播.明星直播,根据互动方式的不同,我们可以分为互动直播和推流直播,本人有幸参与了直播从无到有的过程:对直播这一块有了一个 ...
nginx RTMP FFmpeg 视频直播
/***************************************************************************** nginx RTMP FFmpeg 视频直 ...

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

ffmpeg+jsmpeg+nginx实现多道h5视频直播相关推荐

最新文章

热门文章