【腾讯云】TRTC直播推流+页面渲染推流云直播实践

简介

该文档只作为功能实践，让读者对trtc直播，页面渲染，以及云直播有个大致直观的了解，不作为生产环境使用。

该文档需要开通腾讯云的TRTC，云直播，scf云产品，其中scf中的页面渲染需要开通cos，redis，vpc等云产品。

该文档实践步骤如下:

1. 使用TRTC的web demo开启直播房间
2. 使用云函数的“TRTC直播推流”模板函数给web直播房间推流
3. 使用云直播生成录播和直播地址
4. 使用云函数的“页面渲染”应用录播TRTC的直播房间并推流给云直播。该测试文档录制TRTC直播的时候因为url只是个静态网页，最终只是录制了房间的静态网页，并没有录制到TRTC推流过来的音视频。
5. 使用云直播的直播地址播放云直播推流过来的录制。

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.myqcloud.com", 
                "Bucket":"williamji-1253970226", 
                 "Region":"ap-guangzhou", 
                "TargetDir":"record-output/", 
                "TargetName":"record-file-name"  
        },
        "ServiceParam": {           
            "RtmpUrl": "rtmp://66679.livepush.myqcloud.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/目录下。播放录制结果文件如下