实现页面录制

最近更新时间:2024-10-12 16:42:51

我的收藏

应用场景

在 Web 端的远程教育、视频会议、远程定损、金融双录、在线医疗等应用场景中,考虑取证、质检、审核、存档和回放等需求,常需要将整个视频通话或互动直播过程录制和存储下来的情况。页面录制提供在云端录制任何一个浏览器页面并存储的能力,实现随时随地回看。
以在线教育,视频会议场景为例,通过页面录制可以全场景录制页面内的全部元素,包括音视频画面,白板演示以及聊天窗口等各类内容,并保证通话内容与白板时间同步,可以完整的录制这个“课堂”或“会议”的所有实时信息,达到所见即所得的目的。

费用说明:
能力位解锁:使用页面录制功能需为您发起调用的应用(SDKAppId)订阅 TRTC包月套餐 尊享版旗舰版解锁此能力。
用量费用:使用页面录制功能会产生用量费用,详细请见 页面录制费用 说明。

功能说明

通过 TRTC 的页面录制功能,您可以获取整个浏览器页面的所有原始内容,并按照需要上传到指定的对象存储平台或点播平台。录制结果文件支持 MP4 和 HLS 格式。
录制浏览器页面: 我们通过指定浏览器页面,可以实现录制实时浏览器页面的能力。
录制模式:支持 页面录制页面录制与转推 两种模式。
录制文件格式:支持 MP4 格式和 HLS 格式。
输出分辨率:在不超过1920*1080的限制下,我们支持设置不同的输出分辨率。
文件存储:支持存储到对象存储COS 或存储到云点播VOD
回调通知:我们支持回调通知的能力,通过配置您的回调域名,页面录制的事件状态会通知到您的回调服务器。录制回调地址配置和事件说明请见 云端录制和页面录制回调
注意:
待录制页面需要 URL 加载完即播放,且不需要任何形式的交互操作,其他更多注意事项请参见 接入注意事项

录制模式说明

页面录制

如下图所示为使用页面录制的经典场景:
1. 客户可以通过云 API 发起页面录制请求,在该请求中指定待录制的 Web Page 的 URL,以及录制存储参数。
2. TRTC 页面录制服务会在云端访问指定的 URL 并实时渲染,保留 Web Page 所呈现的所有原始内容。
3. TRTC 页面录制服务对渲染出的 Web Page 进行实时录制,使录制结果能够还原 Web Page 的全景真实效果。
4. 在录制任务结束后,会根据录制参数生成 HLS 或者 MP4 文件并上传到指定云存储平台(目前支持腾讯云COS和腾讯云VOD)。




页面录制并转推

TRTC 对于具有同时使用页面录制并转推场景的客户,提供了可一次调用发起可同时实现转推并录制的使用方式(在页面录制请求中设置转推参数),在进行录制的同时,将音视频流实时转推到 CDN 平台,实现转推观看和录制内容完全一致。
注意:
使用页面录制并转推模式时,转推相关操作请关注 旁路转推回调,若同时发起转推功能会产生 旁路转推费用

文件切分说明

录制 MP4 文件切分的条件:
录制切分时长可设置范围1-1440分钟,默认120分钟。
单个 MP4 文件大小达到 2GB。

录制上传云存储说明

录制后台会在录制结束后将录制的文件通过您指定的方式上传到云存储平台(云点播 VOD 或对象存储 COS),并通过回调的形式把录制结果(播放地址或录制文件名)发送给您。
上传对象存储COS时,为确保您能够获取到媒体文件存储地址,请您关注310回调。310回调把录制任务 ID(TaskId) 以及录制文件名(FileList)发送给您。您需要根据页面录制请求中的第三方存储桶信息(StorageParams.CloudStorage.Bucket)、第三方云存储的地域信息(StorageParams.CloudStorage.Region)、文件位置信息(StorageParams.CloudStorage.FileNamePrefix)以及录制任务ID(TaskId)和录制文件名(FileList)自行拼接出媒体文件播放地址。
上传云点播VOD时,为确保您能够获取到媒体文件播放地址,请您关注311回调。311回调会把录制文件在点播平台的播放地址发送给您。
注意:
文件录制后会上传至您指定云存储平台(云点播 VOD 或对象存储 COS),为确保录制文件成功,请确保您指定的云点播 VOD 或对象存储 COS 服务可用。
页面录制仅支持上传单一云存储平台(云点播 VOD 或对象存储 COS),不支持同时设置对应存储参数。
上传对象存储 COS 时,310回调返回的录制任务 ID(TaskId)会额外携带类似“_StartTimeMs_1717156238963”这样的后缀,后缀中的时间戳长度固定为13位,您可以按实际业务需要对返回的录制任务 ID 进行截取。

API 使用接口说明

API 接口和录制并发限制

录制接口的调用频率限制为20qps。
单个接口超时时间为5秒。
单个应用下默认并发录制支持200路,超过并发限制的任务会失败。

发起录制

通过调用 API(StartWebRecord)来启动页面录制,需要重点关注响应结果中的参数——任务 ID(TaskId);这个参数是本次录制任务的唯一标识,您需要保存下这个任务 ID 作为后续针对这个录制任务接口操作的输入参数。
说明:
您可以前往控制台配置回调地址,以接收录制回调事件,请见 云端录制和页面录制回调说明

查询录制状态

通过调用 API(DescribeWebRecord)来查询录制任务状态,输入参数为录制时响应结果中的任务 ID(TaskId,这个参数是本次录制任务的唯一标识),或在输入参数中使用发起页面录制时输入的SdkAppId和RecordId,通过上述参数可以查询到对应录制任务的录制状态。
录制任务进行中:调用 API 返回的响应中的 Status 为1时,代表录制任务正在进行中。
录制任务已结束:调用 API 返回的响应中的 Message 为“task not exist”时,代表录制任务已结束或尚未启动。

停止录制

通过调用 API(StopWebRecord)来停止录制任务,需要使用发起录制时响应结果中的参数——任务 ID(TaskId);这个参数是本次录制任务的唯一标识,通过这个参数就可以停止对应录制任务。
说明:
您可以通过启动录制中的 MaxDurationLimit 参数来指定录制任务的持续时间,录制任务持续时长达到指定的MaxDurationLimit值时,会自动停止录制,从而省去调用停止录制 API 的操作。默认录制任务最大录制时长为10小时。

录制回调事件

页面录制功能提供了多种的回调事件,帮助您及时了解录制任务的处理进度和完成情况,录制回调地址配置和事件说明请见云端录制和页面录制回调

录制文件管理

查找录制文件

录制任务结束后,TRTC 页面录制中录制下来的文件上传至您指定的云存储平台(云点播VOD或对象存储 COS)。您可以直接前往 云点播控制台对象存储COS控制台 查找。
说明:
对于对象存储 COS,如果您在启动录制参数中设置了 FileNamePrefix 参数,录制文件将保存在您指定的存储桶Bucket/${FileNamePrefix}/${TaskId}下;否则,录制文件将直接保存在存储桶Bucket/${TaskId}下。

接收录制文件

录制文件上传云点播 VOD 时,除了手动查找录制文件,您还可以通过在控制台 配置回调地址,让腾讯云主动把新录制文件的消息推送给您的服务器。 房间里的最后一路音视频流退出后,该过程大约默认需要30秒至数分钟(具体时间根据您所录制的文件大小而定)。转存完成后,腾讯云会通过您在 设置录制回调 中设置的回调地址(HTTP/HTTPS)向您的服务器发送通知。
腾讯云会将录制和录制相关的事件都通过您设置的回调地址推送给您的服务器,您可以通过接收事件类型为311的上传成功回调来获取录制文件的播放地址 VideoUrl,具体回调信息见下方:
{
"EventGroupId": 3,
"EventType": 311,
"CallbackTs": 1622191965320,
"EventInfo": {
"RoomId": "20015",
"EventTs": 1622191965,
"UserId": "xx",
"TaskId": "xx",
"Payload": {
"Status": 0,
"TencentVod": {
"UserId": "xx",
"TrackType": "audio_video",
"MediaId": "main",
"FileId": "xxxx",
"VideoUrl": "http://xxxx",
"CacheFile": "xxxx.mp4",
"StartTimeStamp": "xxxx",
"EndTimeStamp": "xxxx"
}
}
}
}

接入注意事项

针对 Web 应用的限制

由页面录制生成的视频分辨率上限为 1920 × 1080。
待录制的网页中任何视频源的分辨率不应超过 1920 × 1080。
待录制页面的下行带宽不得超过 5 Mbps,上行带宽不得超过 5 Mbps。
待录制页面不应使用 WebGL 功能。
请确保您的Web应用不会过度占用CPU、内存和带宽,并且该Web应用的使用应符合法律法规。
页面录制支持 在无用户交互的情况下自动播放已启用autoplay属性的video元素。然而,如果待录制的网页中的video元素未启用autoplay属性,其内容将不会自动播放,这可能导致页面录制无法录制该网页。
待录制页面不应跳转至不同域名的 URL,并尽可能避免其他形式的跳转。如果待录制的页面需要登录操作,请先处理登录操作,然后进行录制。否则,录制结果可能会一直是待登录界面。

云 API 请求

从请求发起到开始页面录制,可能会有约5秒的延迟。建议提前发起录制请求,以确保录制内容的完整性。
页面录制不支持更改布局。
如果您在StartWebRecord方法中填入的RecordUrl无法正常打开,录制服务将在StartWebRecord成功后自动退出。您可以参考云端录制集成最佳实践,使用退避策略多次调用DescribeWebRecord,以确认录制服务已正常启动。

检测页面加载超时

页面录制场景下,网络异常等偶然因素可能会造成以下问题:
无法正常访问待录制页面,如页面加载失败或时间过长,无法获知真正开始有效录制的时间点,可能会丢录重要内容。
可以正常访问待录制页面,但未能正确加载页面中的 HTML 元素。
录制过程中未能正常加载页面中发生变化的 HTML 元素,从而导致录制内容与预期不一致。
未能正常播放待录制页面中的音视频。
为了确保页面录制的内容与预期一致,建议您按照以下方案来提高页面录制的可靠性。
1. 设置页面加载超时时间
调用 StartWebRecord 方法时通过 ReadyTimeout 字段设置页面加载超时的时间限制。
ReadyTimeout:Number 类型,单位为秒,取值范围 [0,60]:
0 或不设置,表示不检测页面加载状态。
≥ 1,表示页面加载超时时间。
< 0 或非整数,表示设置错误,云API会返回错误信息。
注意:
当您设置了ReadyTimeout时,请务必确保待录制页面有判断页面是否加载完成,以避免因未检测到页面加载就绪从而导致录制任务启动失败。
2. 判断加载是否完成并通知浏览器
注意:
您需要自行判断页面是否加载完成,然后实现后续逻辑。
页面加载完成
页面加载超时
如果页面加载完成,则在设定的 ReadyTimeout 时间内调用 notifyReady 方法通知浏览器页面加载成功。
notifyReady 的调用示例如下:
// notifyReady调用示例 <script> function notifyReady() { if (window.notifyReady) { window.notifyReady(); } } </script>
如果页面加载超时,即在设定的 ReadyTimeout 时间内未调用 notifyReady 方法通知浏览器,则浏览器自动重新加载页面。您会收到 803 事件回调(EVENT_TYPE_WEB_RECORDER_STATUS_UPDATE),其中Status字段为1EventMessage字段为 Page load timeout
如果重新加载成功,则参考页面加载完成的逻辑,调用 notifyReady 方法通知浏览器。
如果页面加载再次超时,则表示页面重新加载失败,录制服务停止。您会收到 801 事件回调(EVENT_TYPE_WEB_RECORDER_START)通知您录制任务启动失败,其中 Status字段 为2EventMessage字段为 Page load timeout。在收到回调通知后,您可根据实际业务需要,决定是否重新发起录制任务。

其他说明

在录制过程中,如果当前MP4文件的时长超过maxVideoDuration的值或大小超过2GB时,录制服务将创建一个新的MP4文件。
如果您在 start 方法中填入待录制页面的 URL 会自动触发 Web 客户端发布音视频流,录制服务也会成为一个发流端,因此,您的应用中可能会出现一个绿色背景色的用户画面。 为规避该问题,您可以在待录制页面的 URL 中增加查询字段 is_recorder=1,例如:"https://url?is_recorder=1",并在该页面内添加以下逻辑:
如果 is_recorder 为 1,则 Web 客户端不发布音视频流。
如果 is_recorder 不为 1,则 Web 客户端发布音视频流。
进行页面录制时,录制服务相当于一个使用 Web 应用的客户端,因此,如果您的Web应用包含用户列表,建议您在用户列表中隐藏该用户。

拓展场景

TRTC 页面录制解决方案不仅可以录制 TRTC 的 RTC 会话,对于传入的任意可访问的页面,该方案均可以录制。因此对于开发者来说,借助于 TRTC 页面录制的能力,可以衍生出更多的创意玩法,例如:
1. 通过技术手段,将多人的本地页面及云端渲染页面的操作同步,通过页面录制,将多人协作的过程录制下来,作为后续的教程资料。
2. 多人可以使用页面录制方案录制一个视频源,并转推到直播 CDN,后续多人可以通过直播流一起观看。
后续 TRTC 页面录制方案,会在录制及转推基础能力上,结合AI探索更多的音视频处理增值服务,助力客户进一步降本增效,扩展业务边界。