傻瓜直播教程

对于大部分观众来讲，没人关心电影是怎么拍的；对于大部分导演来讲，没人关心摄影机是如何生产的。如果你的客户或者你的老板问你咱们公司能不能搭建一个直播平台？在这个云技术泛滥的时代，你再也不用去关心那么繁琐的细节。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里就是这个样子：

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

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

参考文章

• 视频直播前端方案