本文講述瞭如何從0開始,利用騰訊雲的平臺,快速搭建一個直播平臺的過程。
準備工作
要有兩個已經備案完成的域名。
域名申請及備案的操作,這部分可以直接看騰訊雲的文件,也可以等我後面有時間自己再寫一下過程。
第一步:新增域名並檢驗cname配置
1.先填加一個推流域名
填加過程中,需要校驗對域名的持有,按頁面的提示,為域名增加提示中的校驗配置即可。
2. 點選完下一步,得到一個cname地址
3. 將cname地址,配置到所新增的推流域名的解析當中
稍微要等待一會,大概不到20分鐘的樣子,cname校驗成功後,會看到如下介面:
其中綠色勾,表示已經完成cname的配置校驗,可以進行下一步。
4. 按如上1-3的過程,再配置一個播放域名。兩個域名均過了校驗之後,可以進入到下一步了
第二步:生成推流地址
在地址生成器中,會看到已經帶出來的推流地址,
自定義appName
自定義StreamName
選擇過期時間後,點選生成地址,如下圖所示:
然後會看到生成的直播地址:
其中,紅框中的兩項會用到。
第三步:開始推流
1.下載obs軟體
Open Broadcaster Software(簡稱 OBS)是一款好用的第三方開源程式直播流媒體內容製作軟體,為使用者提供免費使用,它可支援 OS X、Windows、Linux 作業系統,適用多種直播場景,滿足大部分直播行為的操作需求。
https://obsproject.com/download?spm=a2c4g.11186623.2.15.6aac1445JPlKR8
2. 填加採集物件
這裡我選擇了螢幕和音訊
點選設定,選擇直播後,新增上面獲取到的:OBS伺服器和OBS推流碼
3. 開始推流
點選開始直播,看到下面有綠色訊號及傳輸速率,表示推流成功。
4. 驗證推流成功
在控制檯中的流管理中,可以看到有此影片流,且可以直接預覽推流的結果。
第四步:生成播流地址 && VLC驗證
參考上述第二步,選擇播放地址。
填入AppName和StreamName,注意要和前面的推流地址保持一致,點選生成地址。
則如上圖,可以看到不同協議所支援的播放地址。
此時,可以開啟電腦上的VLC工具,把RTMP地址填入,看是否可以正常播放。
也可以使用WebRTC地址,來快速驗證是否成功。
注意:此時如果是HTTP,不要用FLV或HLS地址,因為騰訊雲頁面的限制,只能填HTTPS協議,如果是自己建的頁面,則不會有此限制。
第五步:自定義播放(以Web為例)
這裡,我自己寫了一個vue的應用,用來生成一個可以載入直播畫面的網頁。
1.新建一個vue應用
這個就不多說了,如果不會的話,單獨找我吧。
npm init vue@latest
2. 安裝播放器 SDK
這個是騰訊雲視立方產品家族的子產品之一,提供直播、點播場景的影片播放能力。
https://cloud.tencent.com/document/product/881/20205
執行:
cd CSSDemo
npm install tcplayer.js
3.引入&App.vue的實現
<script>
import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.min.css'
export default{
components:{
TCPlayer
},mounted(){
var player = TCPlayer('tcplayer', {
sources: [{
src: 'webrtc://beginroad.cn/live/liveteststream', // 播放地址
}],
// license 地址,參考準備工作部分,在視立方控制檯申請 license 後可獲得 licenseUrl
//由於是localhost,不需要申請,隨便寫了
licenseUrl: 'license',
});
// player.src(url); // url 播放地址
}
}
</script>
<template>
<br></br>
<p>雲直播 Seven 測試</p>
<hr>
<video id="tcplayer" width="1000" height="700" preload="auto" playsinline webkit-playsinline></video>
<hr>
<h4> * 以下是評論討論區 *</h4>
<p class="comments">直播內容還可以,點贊!</p>
<p class="gray">打call 直播流暢</p>
<p class="red">直播流暢</p>
</template>
執行
npm install
npm run dev
5. 最終效果,大功告成
注意:我這裡測試,大概有4-5秒的延遲