1小时从0开始搭建自己的直播平台(详细步骤)

大家好，欢迎来到IT知识分享网。

本文讲述了如何从0开始，利用腾讯云的平台，快速搭建一个直播平台的过程。

效果图

详细步骤

准备工作

第一步：添加域名并检验cname配置

https://console.cloud.tencent.com/live/domainmanage

1.先填加一个推流域名

填加过程中，需要校验对域名的持有，按页面的提示，为域名增加提示中的校验配置即可。

2. 点击完下一步，得到一个cname地址

3. 将cname地址，配置到所添加的推流域名的解析当中。

其中绿色勾，表示已经完成cname的配置校验，可以进行下一步。

4. 按如上1-3的过程，再配置一个播放域名。两个域名均过了校验之后，可以进入到下一步了。

第二步：生成推流地址

其中，红框中的两项会用到。

第三步：开始推流

1.下载obs软件

Open Broadcaster Software（简称 OBS）是一款好用的第三方开源程序直播流媒体内容制作软件，为用户提供免费使用，它可支持 OS X、Windows、Linux 操作系统，适用多种直播场景，满足大部分直播行为的操作需求。

https://obsproject.com/download?spm=a2c4g..2.15.6aac1445JPlKR8

2. 填加采集对象

3. 开始推流

点击开始直播，看到下面有绿色信号及传输速率，表示推流成功。

4. 验证推流成功

在控制台中的流管理中，可以看到有此视频流，且可以直接预览推流的结果。

第四步：生成播流地址 && VLC验证

第五步：自定义播放(以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> 

4. 执行

npm install npm run dev 

5. 最终效果，大功告成

注意：我这里测试，大概有4-5秒的延迟