简介
该文档只作为功能实践,让读者对trtc直播,页面渲染,以及云直播有个大致直观的了解,不作为生产环境使用。
该文档需要开通腾讯云的TRTC,云直播,scf云产品,其中scf中的页面渲染需要开通cos,redis,vpc等云产品。
该文档实践步骤如下:
- 使用TRTC的web demo开启直播房间
- 使用云函数的“TRTC直播推流”模板函数给web直播房间推流
- 使用云直播生成录播和直播地址
- 使用云函数的“页面渲染”应用录播TRTC的直播房间并推流给云直播。该测试文档录制TRTC直播的时候因为url只是个静态网页,最终只是录制了房间的静态网页,并没有录制到云函数推流过来的音视频。
- 使用云直播的直播地址播放云直播推流过来的录制。
TRTC直播推流
参考文章【腾讯云】TRTC直播推流实践
web改造发布
使用TRTC的web demo(参考:https://github.com/LiteAVSDK/TRTC_Web)修改相关代码可以创建直播房间,然后发布到网上(可以是公网或者内网,如果是内网需要页面渲染应用和直播url内网一致,否则无法录制)。
注意:本例测试最终web房间因为是静态页面,页面渲染录制出来的是静态直播房间,并没有录制到推流效果。需要研发根据TRTC相关SDK开发web界面用于直播录制。
- 该改造只是测试,因为默认的web demo发布后主界面是用户名,房间号,然后进入房间,录制的时候也只能录制该界面。需要改造成主界面是房间的界面。
- 改造点1,在下载的web demo中找到TRTC_Web-main/base-js/index.html,在body页签添加onload="login()",并且把index.html后面引用js的代码放head里
- 改造点2,在TRTC_Web-main/base-js/js/common.js中的login()函数中设置好roomId写死为111表示该房间号为111,默认有个用户为test1加入房间
- 改造好之后测试点击index.html文件,应该会直接显示房间窗口以及默认的一个用户名。
- 使用nginx把demo发布到公网上。这里是以容器化 公网clb的方式部署。部署完公网访问如下。
- 发布好之后,根据参考文章【腾讯云】TRTC直播推流实践使用云函数模板"TRTC直播推流"给对应SdkAppId的对应roomId(111)发送推流。发送之后查看发布的web房间里有推流视频以及推流用户
云直播
云直播产品
产品介绍:https://cloud.tencent.com/document/product/267/2822
应用场景:https://cloud.tencent.com/document/product/267/3031
云直播添加域名
参考文档:快速入门
- 开通云直播产品,需要设置直播,推流域名,并且两个域名不能一样。
- 添加域名参考文档:https://cloud.tencent.com/document/product/267/20381
- 添加完域名之后,会在控制台"云直播"->"域名管理"看到配置的播放域名和推流域名
生成推流/播放地址
参考文档:地址生成器
- 在控制台"云直播"->"地址生成器",选择推流域名,然后设置AppName(以live为例),以及StreamName(以williamji为例),然后点击生成地址,然后把生成结果单独记录起来。页面渲染的时候需要推流地址
- 在控制台"云直播"->"地址生成器",选择播放域名,然后设置AppName(以live为例),以及StreamName(以williamji为例),然后点击生成地址,然后把生成结果单独记录起来。注意播放域名地址生成使用的AppName,StreamName必须和推流的一样,否则推流之后播放地址看不到
云直播测试推流/播放
参考云直播文档 web推流
- 点击"云直播"->"Web推流",以"多路混流"为例,选择"多路混流"
- 在"多路混流"的输入配置添加输入源,第一个输入源以"摄像头采集"为例,开启摄像头
- 在"多路混流"的输入配置添加输入源,第二个输入源以"本地文件采集"为例,选择本地一个测试图片。
- 设置好输入源后,可以在右边预览查看
- 输入推流的WebRTC推流地址后,点击"开始推流"。看到界面上显示已经再推流
- 云直播播放要使用直播播放地址查看推流的信息,云直播播放方法参考:https://cloud.tencent.com/document/product/267/32733
- 这里测试使用tcplayer 预览直播地址的url,可以看到直播推流的画面,表示推流/播放测试成功。
页面渲染
页面渲染是云函数serverless应用提供的端到端的应用,主要功能包括音视频录制,转码,推流云直播等。相比全景录制多了推流云直播的功能。目前处于灰度中,得需要产研开白,页面渲染暂时没有产品文档,可以参考全景录制文档里的接口:https://cloud.tencent.com/document/product/583/62573
创建页面渲染应用
- 页面渲染依赖vpc,cos,redis,参考相关云产品文档先创建好。
- 页面渲染开白后,可以在"Serverless"->"Serverless应用"->"新建应用"来新建应用
- 在新建应用页面搜索"页面渲染"并选择,如果没有,则需要联系架构师开白
- 在页面渲染配置界面,把基础配置写好之后点击完成。页面渲染应用会创建多个云函数,需要一定的时间
- 页面渲染创建好之后,可以在"Serverless"->"Serverless应用"搜索并查看
- 点击进入应用,可以看到应用的云函数以及API网关
- 可以使用api网关提供的服务来调用页面渲染。这里测试使用apigw里面的调试接口处理
- 可以看到api网关使用了"应用认证"的鉴权类型,应用认证鉴权有多个语言的示例文档,python参考:https://cloud.tencent.com/document/product/628/56048
- 本例作为测试,直接使用apigw中的调试接口,并且修改鉴权类型为"免认证"(注意:生产环境千万不要使用免认证方式),点击页面渲染应用里提供的API网关链接跳转到对应的api网关"服务"和"API管理"。修改配置"鉴权类型"为"免认证",然后点击完成,最后发布
- 点击对应API里的"API调试",使用POST方法,然后选择Body,对应Body体为json。
- 输入json样例如下。Body体字段基本与全景录制保持一致,其中多了Mode字段以及ServiceParam字段。
{
"Action": "Start",
"Data": {
"RecordURL": "https://81.71.145.239/static/",
"Width": 1280,
"Height": 720,
"Mode": 3,
"CallbackURL": "https://service-9vl7ydee-1253970226.cq.apigw.tencentcs.com/release/williamji-helloworld",
"MaxDurationLimit": 21600,
"Output":{
"Cos":{
"Domain":"williamji-1253970226.cos.ap-guangzhou.myzijiebao.com",
"Bucket":"williamji-1253970226",
"Region":"ap-guangzhou",
"TargetDir":"record-output/",
"TargetName":"record-file-name"
},
"ServiceParam": {
"RtmpUrl": "rtmp://66679.livepush.myzijiebao.com/live/williamji?txSecret=c8fbec35de878b0f686a20efdba946bc&txTime=630F5BC0"
},
"Video": {
"Muxer": "mp4",
"EncryptKey": "",
"AuthUrl": ""
}
}
}
}
- 样例json中Mode为3表示录制和云直播推流模式,ServiceParam中的RtmpUrl写的云直播推流的生成地址(rtmp地址),RecordURL写的是TRTC直播房间url。
- 调用API调试之后,状态码200并且返回体里有TaskID和RequestID表示调用页面渲染成功。可以到应用对应的record云函数李查看录播以及推流日志。
- record云函数里的录制中间文件存放以及推流日志信息如下
- 可以使用直播播放地址查看推流的信息,注意直播播放地址需要参考:https://cloud.tencent.com/document/product/267/32733
- 使用tcplayer 预览直播地址的url,可以看到直播推流的画面。这里测试发现直播的内容只有一个"test1"用户,并没有云函数TRTC直播推流的"williamji2"用户以及TRTC推流视频,原因是web url对应的只是个静态index.html,页面渲染录制是 模拟浏览器打开url来录屏。TRTC直播房间得需要额外开发
- 调用页面渲染api接口的停止录制接口,使用POST方法,json体样例
{
"Action": "Stop",
"Data": {
"TaskID": "8046a745-f70e-4b4c-b16d-d8f7cc7af15c"
}
}
- 最终录制结果存放到调用录制接口Body体指定的Output里。测试路径是对应cos桶实例里的record-output/目录下。播放录制结果文件如下