第二节浏览器无插件播放rtsp[亲测有效]

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说第二节浏览器无插件播放rtsp[亲测有效],希望您对编程的造诣更进一步.

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下载链接：pan.baidu.com/s/1vYOSqPtv… 提取码73f2
2.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浏览器访问github.com/phoboslab/j…

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变得会困难。