傻瓜直播教程

對於大部分觀衆來說，沒人關心電影是怎麼拍的；對於大部分導演來說，沒人關心攝影機是如何生產的。若是你的客戶或者你的老闆問你我們公司能不能搭建一個直播平臺？在這個雲技術氾濫的時代，你不再用去關心那麼繁瑣的細節。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裏就是這個樣子：

好吧，屏幕是黑的，由於我沒有開始推流。一旦開始推流，這裏面就會有畫面了。

是否是足夠簡單？喜歡就給個贊吧！

參考文章

• 視頻直播前端方案