08年HTML5第一份正式草案发布后，业界就视其为一个充满希望的新生儿。有人曾预言HTML5将成为互联网的新大陆，在那些年这是个充满争议的话题，而如今其伴随移动互联网而野蛮生长和无孔不入，当年的预言也逐渐成为现实。

14年手机小游戏《围住神经猫》的一夜爆红令HTML5游戏开发工具白鹭引擎一举成名，同时也让更多人看到了HTML5的广阔前景。随着其最大绊脚石IE+Flash的日渐式微，HTML5在移动互联时代高歌猛进，成为唯一通吃Windows、Linux、OS X、iOS、安卓和WP的跨平台语言。

我们知道，在移动互联网初期原生APP制约了开发规则和利润分配，商家、开发者都急于寻求一种规范统一、技术开放的WebAPP来打破原生APP的垄断，HTML5显然成了他们的垂青对象。HTML5依赖开放Web分布，很好地继承了传统Web超文本时代的链接经济；同时还能实现原本只有原生APP才能实现的诸如LBS、本地数据存储、音视频播放、调用摄像头和GPU硬件加速等功能。也就是说，WebAPP不仅继承了Web的特性，还能够替代APP的大部分功能，无论从用户体验层面还是从应用间数据传输来看都是非常棒的选择。这让人不禁想起B/S架构取代C/S风靡互联网的种种经典案例。

随着HTML5未来愈渐明朗，互联网公司围绕着WebAPP的建设也开始大张旗鼓。搜狐力推的快站，百度的直达号，腾讯的微信公众账号，阿里的UC应用中心，都采用HTML5技术，各大平台都希望利用WebAPP来打造移动产品的生态基础。这不仅仅说明HTML5技术、开发上的便利性，更体现在商业模式上的多元化，用户体验和生态扩大的固有需求。

很多人已经知道搜狐快站是一个一站式移动建站云平台，服务贴近中小企业需求，而近期其所宣布的全面免费也颇体现了互联网的开放分享精神。快站樊功臣在无穷俱乐部沙龙上强调了APP和HTML5之间为什么选择后者，一方面是看中了HTML5重交互、重开放的特性， H5能满足中小企业百分之八九十的建站需求，企业对信息服务的推广是在任何地方传播任何内容，它可以无孔不入，相对APP的成本壁垒则较低；另一方面APP还面临一个更新难的问题，更新一个功能需要来回发版重做，效率低下，而HTML5能够克服各种困难，因为它背后的驱动力非常强大，国内几乎平台级公司都是其推动者。

我们认为，快站集搜狐技术部15年建站的组织过程资产积累，包括CMS、社区互动和电子商务版本，其产品成熟品质可靠值得肯定，而上线数月来已打通百度直达号、微信公众平台和各大搜索引擎等等，为快站的13万多家站点提供强力引流的成绩来看，其发展还是非常迅速的。这也从侧面验证了HTML5的生态渗透性是如何地“无孔不入”。

尽管HTML5具备众多卓越性，但在移动端与原生APP之争仍处下风，主要原因归结为以下四点：

1、标准尚未完善，技术不成熟，开发者生态不完整；

2、尚未突破载体瓶颈，浏览器渲染性能低下；

3、缺乏渠道、运营商等成熟生态支持；

4、对网络环境依赖较大。

这些原因最终造成HTML5在部分功能和体验上大打折扣，但事实上我们发现随着互联网公司逐渐入局和开发者生态日渐完善，加之业界上游对技术性能的解决，大多是可以克服的。

未来趋势来看，HTML5成为主流我们几乎都可预见。跨平台、低成本、程序快速迭代、开放的数据交互，这些显著优势都将成为企业、开发者选择HTML5的理由。以版本交付为例，很多开发者有这样的体会，一个原生APP上线，这时突如其来的一个大BUG往往成为大麻烦，开发者须连夜修复然后静待二、三周Apple审核，这段时间往往就已决定这款产品的成败。而HTML5则没有这样的问题，你只需修复再刷新即可。

最近，业界传来了可喜消息：W3C宣布HTML5标准于今年10月底正式定稿，这为所有HTML5开发者注入了一针强心剂，也预示着HTML5的时代即将全面来临。有了标准，剩下的就是完善生态的事情了。值得一提，搜狐在新闻客户端产品曾领跑至前，而快站的免费策略与开发者体系的支持完善，汇聚更多开发人才和专业者智慧，打造全面拥抱移动互联网的HTML5移动建站云平台及衍生生态，其未来表现令人期许。

近项目中需要实时播放摄像头rtsp视频流，于是就专门做了些研究。而浏览器不能直接播放，只有通过插件或者转码来实现这个需求。

要实现这个目的，可以采用的方案非常得多，有商业的也有开源的，这里主要列举一些开源的方案。这里的方案都是我尝试过了的，有些成功，有些没成功。但是因为每个项目情况不同，这次没成的方法，换个项目也许就能成。

方案一: html5 + websocket_rtsp_proxy 实现视频流直播

实现原理

实现步骤

1. 服务器安装streamedian服务器
2. 客户端通过video标签播放

<video id="test_video" controls autoplay></video>

<script src="free.player.1.8.4.js"></script>
<script>

    if (window.Streamedian) {
        var errHandler = function(err){
            console.log('err', err.message);
        };

        var infHandler = function(inf) {
            console.log('info', inf)
        };

        var playerOptions = {
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };

        var html5Player  = document.getElementById("test_video");
        html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";

        var player = Streamedian.player('test_video', playerOptions);

        
        window.onbeforeunload = function(){
            player && player.destroy();
            player = null;
            Request = null;
        }
    }
</script>

注意：测试时先从官网申请license key，否则socket 只能识别localhost和127.0.0.1

优缺点

• 优点：实现比较简单
• 缺点：收费的，免费版有很多限制

参考链接

• html5 + websocket_rtsp_proxy 实现视频流直播
• streamedian
• html5_rtsp_player

方案二：ffmpeg + nginx + video，rtsp转rtmp播放

rtmp是adobe开发的协议，一般使用adobe media server 可以方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也可以直接使用nginx实现rtmp

rtmp方式的最大的优点在于低延时，经过测试延时普遍在1-3秒，可以说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而由于flash本身的安全，现代浏览器大多禁用flash

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

实现步骤

1. 安装ffmpeg工具
2. 安装nginx 注意：linux系统需要安装 nginx-rtmp-module 模块，Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)
3. 更改nginx配置

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}

ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('test_video', {"autoplay":true});
    player.play();
</script>

注意：使用谷歌浏览器播放时，需要开启flash允许

参考链接

• 在 Nginx 中启用 RTMP 服务
• ffmpeg.org
• videojs
• videojs flash

方案三：ffmpeg + video，rtsp转hls播放

HLS (HTTP Live Streaming) 直播 是有苹果提出的一个基于http的协议。其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8的文件列表来管理这些视频文件

HTTP Live Streaming 并不是一个真正实时的流媒体系统，这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时。在客户端，至少在一个分段媒体文件被完全下载后才能够开始播放，而通常要求下载完两个媒体文件之后才开始播放以保证不同分段音视频之间的无缝连接。

此外，在客户端开始下载之前，必须等待服务器端的编码器和流分割器至少生成一个TS文件，这也会带来潜在的时延。

服务器软件将接收到的流每缓存一定时间后包装为一个新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的几个片段的索引，以保证观众任何时候连接进来都会看到较新的内容，实现近似直播的效果。
这种方式的理论最小延时为一个ts文件的时长，一般为2-3个ts文件的时长。
实现步骤

1. 安装ffmpeg工具
2. ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"

ffmpeg 关于hls方面的指令说明

• -hls_time n: 设置每片的长度，默认值为2。单位为秒
• -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
• -hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量
• -hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

1. video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" 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>

参考链接

• ffmpeg hls
• videojs
• videojs-contrib-hls

方案四：VLC插件播放

播放步骤

1. 下载安装vlc
2. 浏览器播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

优缺点

• 优点： 可以直接播放RTSP，无需任何中介服务器的帮助
• 缺点： 需要手动安装插件； 基于NPAPI，不被最新的 Chrome 和 Firefox 支持
• 如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器，这个方案就是首选。

参考链接

• VLC wiki
• 插件安装方法

其他方案

WebRTC

WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 通过 webRTC 直接调用摄像头，但是如果要实现远程视频流的显示，则需要将 RTSP 转换为 WebRTC 流，供 web 端显示。
参考地址：github.com/lulop-k/kur…

h5stream

参考地址：

• github.com/liweilup/h5…
• 使用H5Stream开发实时监控系统
• H5Stream入门级应用，播放RTSP流视频

GB28181

参考地址：

• LiveGBS GB28181流媒体服务
• github

jsmpeg.js + ffmpeg + websocket + node

参考地址

• # 在web中播放rtsp视频方案对比

原文 浏览器播放rtsp视频流解决方案 - 掘金