前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【腾讯云】TRTC直播推流+页面渲染推流云直播实践

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

原创
作者头像
williamji
修改2022-08-31 17:02:41
12.1K0
修改2022-08-31 17:02:41
举报
文章被收录于专栏:腾讯云产品

简介

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

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

该文档实践步骤如下:

  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推流地址后,点击"开始推流"。看到界面上显示已经再推流

页面渲染

页面渲染是云函数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字段。
代码语言:javascript
复制
{
    "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体样例
代码语言:javascript
复制
{
    "Action": "Stop",
    "Data": {
        "TaskID": "8046a745-f70e-4b4c-b16d-d8f7cc7af15c"
    }
}

  • 最终录制结果存放到调用录制接口Body体指定的Output里。测试路径是对应cos桶实例里的record-output/目录下。播放录制结果文件如下

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • TRTC直播推流
    • web改造发布
    • 云直播
      • 云直播产品
        • 云直播添加域名
          • 生成推流/播放地址
            • 云直播测试推流/播放
            • 页面渲染
              • 创建页面渲染应用
              相关产品与服务
              实时音视频
              实时音视频(Tencent RTC)基于腾讯21年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档