ffmpeg+video+tomcat
HLS
(HTTP Live Streaming
) 直播 是有苹果提出的一个基于http
的协议。其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8
的文件列表来管理这些视频文件即ts文件。HLS
协议切分的 ts
文件大小会影响端到端的直播延迟，苹果官方文档推荐使用 6
秒的 ts 切片，这也就意味着从主播到观众的延迟至少会增加 6
秒，使用更短的切分方式并不是不可行，只是会带来巨大的额外开销和存储压力。
1.官网下载tomcat
压缩包解压缩，进入tomcat
的webapps
目录下，创建文件夹hls
2.创建demo.html
文件，其内容如下
<html>
<head>
<title>video</title>
<!-- 引入css -->
<link href="videojs/video-js.min.css" rel="stylesheet">
</head>
<body>
<div class="videoBox">
<video id="my_video_1" class="video-js vjs-default-skin" controls>
<source src="http://127.0.0.1:8080/hls/test.m3u8" type="application/x-mpegURL">
</video>
</div>
</body>
</html>
<script src="videojs/video.min.js"></script>
<script src="videojs/videojs-flash.js"></script>
<script src="videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
var player = videojs('my_video_1', {"autoplay":true});
player.play();
</script>
2.1
videojs
下载链接：https://pan.baidu.com/s/1vYOSqPtvtuhU_i2lExmh6A 提取码73f22.2 根据自己实际情况修改
source
标签m3u8
地址和script
标签videojs
的路径。
3.在Dos
窗口中，进入ffmpeg
的bin
目录执行下列ffmpeg
指令推流
D:\ffmpeg\bin\ffmpeg -i "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:\apache-tomcat-8.5.63\webapps\hls\test.m3u8"
4.验证
4.1
进入tomcat
的解压目录bin
文件夹下，双击startup.bat
启动tomcat
，确定tomcat
启动成功后，进入D:\apache-tomcat-8.5.63\webapps\hls
，成功的话可看到一个m3u8
文件和多个ts
文件。
4.2 在
chrome
浏览器中打开demo.html
，如果存在跨域请自行百度设置chrome
的跨域，在笔者的电脑中已经能够成功看到rtsp
流媒体成功在浏览器中播放。
ffmpeg+websocket+jsmpeg.js
JSMpeg
是用JavaScript
编写的视频播放器。它由MPEG-TS
多路分配器，MPEG1
视频和MP2
音频解码器，WebGL
和Canvas2D
渲染器以及WebAudio
声音输出组成。 JSMpeg
可以通过Ajax
加载静态视频，并可以通过WebSockets
进行低延迟的流传输（〜50ms）。使用JSMpeg
进行Rtsp
视频流播放的步骤
1.运行websocket-relay.js
1.1运行
websocket-relay.js
之前首先node
需要安装了webSocket
；如果没有安装则Dos
窗口中执行npm install ws --save
命令安装
1.2浏览器访问https://github.com/phoboslab/jsmpeg，下载
jsmpeg
至本地磁盘如D\jsmpeg-master.zip
1.3解压
jsmpeg-master.zip
，在Dos
窗口中进入jsmpeg-master
目录，不出意外jsmpeg-master
目录下将包含websocket-relay.js
文件。在Dos
窗口中执行node websocket-relay.js videoplay 9000 9001
；出现类似下图所示输出表示成功。
其中videoplay
是Http
路径，9000
是ffmpeg
推送Http
端口，9001
是Websocket
端口
2.运行ffmpeg
，将流媒体解码传输到中继的HTTP
端口
D:\ffmpeg\bin\ffmpeg -i "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:9000/videoplay
3.将浏览器中的JSMpeg
连接到中继的Websocket
端口，进入D:\jsmpeg-master
找到view-stream.html
，修改url
变量的地址为ws://127.0.0.1:9001/
<!DOCTYPE html>
<html>
<head>
<title>JSMpeg Stream Client</title>
<style type="text/css">
html, body {
background-color: #111;
text-align: center;
}
</style>
</head>
<body>
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('video-canvas');
//var url = 'ws://'+document.location.hostname+':9001/';
var url = 'ws://127.0.0.1:9001/';
var player = new JSMpeg.Player(url, {canvas: canvas});
</script>
</body>
</html>
4.在浏览器中打开view-stream.html
，可以看到rtsp
视频流成功播放
实现方式对比
通过实践两种播放rtsp
视频流的方式，不难发现hls
方式播放延迟高，且降低延迟成本高，而jsmpeg
延迟会低很多；jsmpeg
播放清晰流畅度不如hls
、长时间播放rtsp
流媒体不稳定，但是这些可以通过ffmpeg
命令调优且结合代码实现补偿重试解决。作为后端开发我们很容易实现http
接收流媒体数据，并开发用于取代websocket-relay.js
转发至websocket
的服务器，相比较之下HLS
后端能够做的事情相对少，后续如果开发流媒体运维平台HLS
的难度相比jsmpeg变得会困难。
各位读者思考下，你们想象到的流媒体运维平台将会有哪些功能呢？类似如在线人员，踢掉用户，流量监控，观看时长等等功能，欢迎补充。
