傻瓜直播教程

对于大部分观众来说，没人关心电影是怎么拍的；对于大部分导演来说，没人关心摄影机是如何生产的。若是你的客户或者你的老板问你我们公司能不能搭建一个直播平台？在这个云技术泛滥的时代，你不再用去关心那么繁琐的细节。nginx怎么配？你不须要关心；什么流媒体，什么分片，你不须要了解，这些事情早都已经有专业人士帮你打理好了。

你所要作的只是：去市场上买个车，而后——开。而最要命的是，价格低廉到令你发指的地步，不到20元你就能让100我的看你表演1整个小时（也许你能够给你的客户报价200元1小时？那是你的事情了）。

选车

我相信市场上已经有不少相似的车了，我相信AWS，阿里云或者也许还有七牛也都提供相似服务，但在这里我选择了百度开放云，好吧，听说他们卖什么药什么的，但这不是重点。重点是你能够选择他们家的直播功能。你能够去这里了解一下详情：https://cloud.baidu.com/doc/L...

配置

接下来的事情很简单，你须要创建一个会话，大概是像这么一个样子：

看不懂不要紧，稍微解释一下：输入设置一开始你不用管，就让它RTMP推流就行了，输出设置的话，你也不用设，记住最好用第一个就行了，由于第二个RTMP输出须要用到flash这个曾经人人喜欢而现在人人厌弃的孩子，直接致使你的用户根本没法在iPhone上观看，你总不但愿大半夜的老板把你叫起来讲他的朋(xiao3)友(mi4)用的手机看不了直播吧？

下面的同步录制和开启缩略图我一开始也是开了的，可是后来发现测试阶段实在吃不消，没几分钟时间就产生了好几十M的数据，由于BOS也是要花钱的，因此我给关上了，若是有人买单固然能够开开，其实仍是挺不错的功能，奥运会直播完后不是也有录像能够回放吗？这个就是干那个用的。

试驾

设置好以后，你就能够开始推流测试了：

在这里你能够设置一些东西，或者，简单粗暴，直接点击下面的开始推流，你就能够在左边的黑色窗口里看见你本身邪恶的头像了。是否是足够简单？

上路

光在驾校练还不行，咱们须要把车开到马路上，让全部人都看一看。理论上来讲，html5已经提供了video标签，咱们只须要把咱们的视频源放到video标签里就好了，就像这样：

<video src="rtmp://somedomain/someurl" />

但不幸的是，rtmp是Adobe家的东西，Apple家的老乔活着时就看不上他们家，因此这个东西没有办法在iPhone, iPad上播放，因而你考虑用最上面那个带.m3u8后缀的HLS输出吧，这但是Apple的东西，可是Google又瞧不上Apple，非是不能在桌面版的Chrome里播放HLS。怎么办？赢政尚未出生，书同文车同轨还只是一个美好的理想，咱们只好本身安装个万向轮，让它能在各类马路上奔跑，好在并不麻烦。

在这里，咱们须要下载安装一个叫video.js的东西，官网在这里：http://videojs.com/，而后在它基础之上再安装一个叫videojs+hls的东西，在这里：https://github.com/videojs/vi...

而后，写一段小小的代码：

<video id="example-video" width="600" height="300" class="video-js vjs-default-skin" controls>
    <source src="http://你从百度里获得的那个后缀为m3u8的连接.m3u8" type="application/vnd.apple.mpegurl">
</video>

接下来是一段js，我假定你已经安装好了刚才那两个依赖包里的css和js文件：

videojs.options.flash.swf = '/你的路径/video-js.swf';
player = videojs('example-video', {}, function () {
    this.play();
});
player.play();

就是这些，而后你就能够把你的网页分享出去，别人就能够看你直播了，不管是手机仍是PC，横着看竖着看，均可以了。在Chrome里就是这个样子：

好吧，屏幕是黑的，由于我没有开始推流。一旦开始推流，这里面就会有画面了。

是否是足够简单？喜欢就给个赞吧！

参考文章

• 视频直播前端方案