c 新手一个人做网站,做防水施工 上什么网站找,如何做产品销售网站,wordpress怎么做网盘收索本文讲述了如何从0开始#xff0c;利用腾讯云的平台#xff0c;快速搭建一个直播平台的过程。 文章目录 效果图详细步骤准备工作第一步#xff1a;添加域名并检验cname配置1.先填加一个推流域名2. 点击完下一步#xff0c;得到一个cname地址3. 将cname地址#xff0c;配置…本文讲述了如何从0开始利用腾讯云的平台快速搭建一个直播平台的过程。 文章目录 效果图详细步骤准备工作第一步添加域名并检验cname配置1.先填加一个推流域名2. 点击完下一步得到一个cname地址3. 将cname地址配置到所添加的推流域名的解析当中。4. 按如上1-3的过程再配置一个播放域名。两个域名均过了校验之后可以进入到下一步了。 第二步生成推流地址第三步开始推流1.下载obs软件2. 填加采集对象3. 开始推流4. 验证推流成功 第四步生成播流地址 VLC验证第五步自定义播放(以Web为例)1.新建一个vue应用2. 安装播放器 SDK3. 引入App.vue的实现4. 执行5. 最终效果大功告成 效果图
最终实现了在网页当中有直播框来直播画面和音频其他地方显示文字的效果如下图所示
详细步骤
准备工作
要有两个已经备案完成的域名。 域名申请及备案的操作这部分可以直接看腾讯云的文档也可以等我后面有时间自己再写一下过程。 https://dnspod.cloud.tencent.com/ https://cloud.tencent.com/product/ba
第一步添加域名并检验cname配置
https://console.cloud.tencent.com/live/domainmanage
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?spma2c4g.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 vuelatest2. 安装播放器 SDK
这个是腾讯云视立方产品家族的子产品之一提供直播、点播场景的视频播放能力。 https://cloud.tencent.com/document/product/881/20205 执行
cd CSSDemo
npm install tcplayer.js3. 引入App.vue的实现
scriptimport TCPlayer from tcplayer.jsimport tcplayer.js/dist/tcplayer.min.cssexport 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 播放地址}}/scripttemplatebr/brp云直播 Seven 测试/phrvideo idtcplayer width1000 height700 preloadauto playsinline webkit-playsinline/videohrh4nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;* 以下是评论讨论区 */h4p classcomments直播内容还可以点赞/pp classgray打call 直播流畅/pp classred直播流畅/p
/template4. 执行
npm install
npm run dev5. 最终效果大功告成 注意我这里测试大概有4-5秒的延迟
