從0開始搭建自己的直播平臺

粤海科技君發表於2024-11-05

本文講述瞭如何從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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* 以下是評論討論區 *</h4>
<p class="comments">直播內容還可以,點贊!</p>
<p class="gray">打call 直播流暢</p>
<p class="red">直播流暢</p>
</template>

執行

npm install

npm run dev

5. 最終效果,大功告成

注意:我這裡測試,大概有4-5秒的延遲

相關文章