C++ rtmp livestream ZeroC ICE OpenCV Media

海阔天空 张翼飞翔

我的学习笔记。--我爱这里,因为无广告的骚扰。
随笔 - 80, 文章 - 2, 评论 - 126, 引用 - 0
数据加载中……

JSMpeg 低延时H5直播

【原创】 2019.09.05  


JSMpeg项目地址:https://github.com/phoboslab/jsmpeg

JSMpeg 是一种采用Javascript解码音视频的技术,可用于视频直播或点播。

 

首先,我们为什么要用JSMpeg技术?

  • HTTP-FLV技术在IOS系统下不被支持。
  • WebRTC技术兼容性差。
  • HTTP Live Streaming (HLS) 有巨大的,无法优化的直播延时。
  • 并不是所有浏览器可以解码H.264, 并不是所有浏览器可以解码VP8。

 

因此,JSMpeg直播方案几乎是唯一的高兼容性、低延时H5直播方案。

      

播放器核心代码很简单:

<script src="jsmpeg.min.js"></script>

<div class="jsmpeg" data-url="video.ts"></div>

创建一个完整的播放Demo步骤如下

下载 jsmpeg.min.js

https://jsmpeg.com/jsmpeg.min.js

下载 一个ts文件,并改名video.ts

https://jsmpeg.com/blade-runner-2049-360p.ts

创建一个index.html文件,内容如下:


<!DOCTYPE html>
<html>
<head>
      
<title>JSMpeg Demo</title>
      
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<div class="content">
      
<div class="section">
             
<h1>JSMpeg Vod Demo - 2019.09.02 Evan  </h1>
      
</div>
      
<div class="jsmpeg full-width" data-url="video.ts" 
      data-loop
="true" data-autoplay="true""></div>
</div>
<script type="text/javascript" src="jsmpeg.min.js"></script>
</body>
</html>


写好的html文件在这里:http://47.244.50.172:8080/play/jsmpeg/360p/index.html

再配置一个nginx服务器(用其他web服务器也可以)。在nginx的html目录创建创建一个播放目录 例如:nginx/html/play/jsmpeg/360p/

将  jsmpeg.min.js、  video.ts、  index.html 三个文件放到创建的目录,播放环境就搭建完毕了:

用谷歌浏览器访问下面地址,即可播放。

http://47.244.50.172:8080/play/jsmpeg/360p/

其中47.244.50.172:8080要根据你的nginx提供的服务改成你自己的IP和端口

这个播放过程很流畅,画面清晰,对CPU的消耗比VLC高100%左右。这个播放需要等文件下载完毕后才开始播放,文件加载时间比较长。

直播
这里有个文章https://imququ.com/post/html5-live-player-2.html
作者5年没更新了,现在的版本已经采用TS流并且支持音频了。
不过他的文章给我很多帮助,引用这里的一句话:

看到这里,大家肯定会说,这不是要一次性下完全部内容么,怎能称之为直播。是的,要实现直播,还要用 Web Sockets 实现一个实时传输流的服务。FFmpeg 支持很多直播流格式,但不支持 Web Sockets。解决方案是用 FFmpeg 开一个 HTTP 直播流,再开个 Node 服务转一下。

详细一点的过程是这样的,用 NodeJS 监听 FFmpeg 的 HTTP 直播地址,把收到的数据 通过 Web Sockets 广播给所有客户端。
Websocket代码在这里:https://github.com/phoboslab/jsmpeg/blob/master/websocket-relay.js

 Websoket服务部署:

我这里使用的系统是 CentOS 7 64bit 
创建目录:

mkdir /opt/nodejs/

下载nodejs

cd /opt/nodejs

wget https://nodejs.org/dist/v12.9.1/node-v12.9.1-linux-x64.tar.gz

tar zxvf  node-v12.9.1-linux-x64.tar.gz

安装ws模块。注意,这里有个坑,如果按照官网提供的方式安装,即直接敲命令 npm install ws 会将ws模块安装到其他目录,导致启动服务报错:“cannot find module 'ws'”,所以我这里改成这样的安装方式:

cd node-v12.9.1-linux-x64/bin

./node ./npm install ws

./node ./npm install http-server

拷贝JSMpeg项目里面的websocket-relay.js 文件到这个目录:

/opt/nodejs/node-v12.9.1-linux-x64/bin

运行 ./node websocket-relay.js  live 

这里的‘live’字符串实际上是密码,注意和下面推流的密码需要保持一致,否则推流会失败。

到这里websocket服务搭建完毕。

采集摄像头视频推流:

下载ffmpeg windows版本 https://ffmpeg.zeranoe.com/builds/

我这里使用的版本是 ffmpeg-4.2-win64-static.zip

这里我遇到个坑,运行官网提供的推流命令会失败。可能因为官网文档2年多没更新了,旧版本文档中的ffmpeg命令已经不支持了。

经过测试,ffffmpeg 4.2 windows版本可以成功推送摄像头视频的命令如下:

ffmpeg -y -f vfwcap -r 25 -i 0 -f mpegts -codec:v mpeg1video -s 1280x720 -b:v 1000k  -bf 0 http://47.244.50.172:8081/live/


这条ffmpeg命令的各个参数解释如下

-y: 覆盖目标

-f vfwcap: 设置视频源类型为vfwcap (VfW 视频采集)

-r 25: 设置帧率25fps

-i 0: 从0号摄像头采集

-f mpegts: 设置输出视频格式 mpegts

-codec:v mpeg1video 设置视频编码

-s 1280x720: 设置输出尺寸

-b:v 1000k: 设置输出码率

-bf 0: 未知  (官网例子都带了这个参数,但Evan不知道这个参数的具体含义)


播放:

再写个直播播放器 的index.html,代码如下:


<html>
<head>
<title>WS video player</title>
<style type="text/css">
body 
{
text-align
: center;
width
: 100%;
height
: 100%;
}
#videoCanvas 
{
/* Always stretch the canvas to 640x480, regardless of its internal size. */
width 
: 100%!important;
max-width
: 800px;
}
</style>
<style type="text/css">
html, body 
{
background-color
: #333;
text-align
: center;
}
</style>
</head>
<body>
<h1>JSMpeg player - Evan v2019.09.03</h1>
<p>
<input type="text" id="inputUrl" onkeydown="if(event.keyCode==13)play();" value="ws://47.244.50.172:8082/"
size
="80" />
<button id="btnplay" onClick="play();" type="button">Play</button>
</p>
<p>
<canvas id="videoCanvas" align = "center">
</p>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('videoCanvas');
var bPlay = false;
var player = null;
var btn = document.getElementById('btnplay');
function play(){
if(bPlay)
{
player.stop();
//player.destroy()
delete player;
player 
= null;
bPlay 
= false;
btn.innerHTML 
= "Play";
}
else
{
var playUrl = document.getElementById("inputUrl").value ;
player 
= new JSMpeg.Player(playUrl, {canvas: canvas});
btn.innerHTML 
= "Stop";
bPlay 
= true;
}
}
</script>
</body>
</html>


(写好的html文件在这里: http://47.244.50.172:8080/play/jsmpeg/live/index.html)

将  jsmpeg.min.js、   index.html 放到nginx 的html目录,然后在谷歌浏览器里面打开这个地址,就可以观看直播视频了。播放地址:

 http://47.244.50.172:8080/play/jsmpeg/live/

到这里,简单的JSMpeg直播环境搭建完毕。这个服务器仅仅支持推一路流,同时推多路流还需要改写ws服务器脚本。写一个支持多路流的ws脚本不难,写好后替换官网的websocket-relay.js文件就可以了。

本文链接:http://www.cnweblog.com/fly2700/archive/2019/09/07/325500.html



posted on 2019-09-07 18:33 ZhangEF 阅读(954) 评论(0)  编辑  收藏 所属分类: H5视频直播配置部署


只有注册用户登录后才能发表评论。
该文被作者在 2019-09-10 13:35 编辑过
网站导航: