天天看點

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

使用oss搭建一個完整的視訊直播網站,可以建立删除直播頻道,并且能夠使用直播軟體從pc端或者移動端推送視訊流,并在pc或者移動端觀看直播。

rtmp推流軟體

這裡使用開源軟體obs作為推流的來源,obs可以在官網上下載下傳,這裡為了加速我們提供了oss上的obs下載下傳位址。

<a href="http://workshop-res.oss-cn-shanghai.aliyuncs.com/obs-studio-0.13.4-installer.exe">obs(windows)</a>

<a href="http://workshop-res.oss-cn-shanghai.aliyuncs.com/obs-0.13.1-installer.dmg">obs(mac)</a>

<a href="https://obsproject.com">obs首頁</a>

oss首頁和控制台

<a href="https://www.aliyun.com/product/oss">oss首頁</a>

<a href="https://oss.console.aliyun.com/index#">oss控制台</a>

<a href="https://ak-console.aliyun.com/#/accesskey">accesskey擷取頁面</a>

<a href="https://www.aliyun.com/act/aliyun/ossdoc.html">oss文檔和sdk</a>

注意事項:預計耗費的費用

在搭建視訊網站的過程中,主要有觀看視訊直播的流量費用和oss的存儲費用。

這裡注意,由于隻有深圳地區的oss支援直播功能,是以為了成功完成課程,請建立深圳地區的bucket。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

建立完成之後我們點選bucket資訊頁面,檢視bucket的一些基本資訊。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

之後要做的事情就是将對應的bucket資訊填入視訊網站的設定中,這裡要填入的資訊有三個,bucket名稱、雲賬号的accesskeyid和accesskeysecret。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

完成設定之後可以回到視訊清單頁面,這個時候就可以看到擷取視訊清單已經成功了,如果已經有一些頻道的話就會在這裡顯示出來。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

在添加頻道之前,因為直播播放器使用的是js直接擷取視訊内容,是以需要設定一下跨域通路(cors)配置。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

點選網站頁面上方的建立頻道頁面,填寫一些基本資訊之後點選按鈕建立直播頻道。建立成功之後可以看到新建立的直播頻道的一些資訊,比如頻道的名稱、描述和hls直播位址。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

建立成功之後點選傳回連結傳回視訊清單頁面,可以看到新建立的直播頻道,因為目前還沒與直播流,是以無法顯示視訊的縮略圖,在直播頻道的下方的連結中就是rtmp的推送位址。

為了防止未授權使用者推送rtmp流,是以這裡的rtmp位址是簽名過的。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

在該連結上點選右鍵複制連結就可以得到rtmp的推流位址了。

在電腦上安裝一個直播軟體,這裡使用開源軟體obs作為推流的來源。可以通過以下連結來下載下傳。

這裡以mac版本為示例,安裝完成之後顯示如下:

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

按照下面的步驟來完成推流的設定:

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

這裡可以選擇很多輸入源,我們這裡選擇的是視訊捕獲裝置,也就是筆記本的攝像頭。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

将上一步擷取的rtmp位址填入然後開始推送視訊流。這裡有兩個需要填入的位址,但是上一步擷取到的rtmp連結是類似以下這種形式的。

<code>rtmp://live-test.demo-oss-cn-shenzhen.aliyuncs.com/live/workshop-test?ossaccesskeyid=nb3kv50scg8phhsq&amp;expires=1461075552&amp;signature=%2bnxtxdyjerp%2f4fby3vmmstbk2sw%3d</code>

那麼這裡填入的url為live/之前的部分。

<code>rtmp://live-test.demo-oss-cn-shenzhen.aliyuncs.com/live/</code>

流秘鑰為之後的部分。

<code>workshop-test?ossaccesskeyid=nb3kv50scg8phhsq&amp;expires=1461075552&amp;signature=%2bnxtxdyjerp%2f4fby3vmmstbk2sw%3d</code>

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

這樣就可以成功推送了。

重新整理原來的視訊頁面,就可以看到已經能正确顯示縮略圖了。點選縮略圖即可開始播放視訊。

201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站
201604深圳雲栖大會Workshop - 用OSS搭建一個視訊直播網站

繼續閱讀