In remote education, video conferencing, remote loss assessment, financial audiovisual recording, and online medical consultation scenarios on Web, considering the needs for evidence collection, quality inspection, review, archiving, and playback, it is often necessary to record and store the entire video call or interactive live streaming process. Page recording provides the ability to record any Web page in the cloud and store it, enabling replay anytime, anywhere.
In online education and video conferencing scenarios, web page recording enables full-scenario capture of all elements on the page, including audio and video, whiteboard presentations, and chat windows, while ensuring synchronization between call content and whiteboard time. It fully records all real-time information in the "class" or "meeting," achieving a WYSIWYG result.
Billing details:
Capability bit unlock: To use the web page recording feature, your calling application (SDKAppId) must subscribe to the RTC-Engine Monthly Packagessome versions are usable. Proceed to purchase.
Usage fees: Using the web page recording feature will generate usage fees. For details, see the Billing of Web Page Recording description.
Feature Overview
With TRTC's web page recording feature, you can obtain the entire web page's original content and upload it to a specified Cloud Object Storage (COS) platform or VOD platform as needed. The recording result file supports MP4 and HLS formats.
Record browser page: We can achieve real-time browser web page recording by specifying a web page.
Recording file format: Supports MP4 format and HLS format.
Output resolution: We support setting different output resolutions within the limit of no more than 1920*1080.
File storage: Supports storing in COS or VOD.
Callback notification: We support callback notification. By configuring your callback domain, the event status of web page recording will notify your callback server. For recording callback address configuration and event description, see Cloud Recording and Web Page Recording Callback.
Note:
Note: The webpage to be recorded must start playback immediately after the URL loads and requires no interactive operation. For more precautions, please refer to Integration Notes.
Recording Mode Description
Web Page Recording
As shown below is a classic scenario of using web page recording:
1. Customers can initiate a web page recording request through TencentCloud API, specifying the URL of the target Web Page and storage parameters in the request.
2. The TRTC web page recording service will access the specified URL on the cloud and render in real time, preserving all original content presented by the Web Page.
3. The TRTC web page recording service performs real-time recording of the rendered Web Page, enabling the recording result to restore the panoramic real effect of the Web Page.
4. After the task ends, HLS or MP4 files are generated based on recording parameters and uploaded to the designated cloud storage platform (currently supporting Tencent Cloud COS and Tencent Cloud VOD).
Web Page Recording and Relaying
TRTC provides customers with a solution for simultaneous web page recording and relaying. They can initiate both actions with a single call by setting relaying parameters in the web page recording request. While recording, the audio and video stream is relayed to the CDN platform in real time, ensuring the viewing and recording content are identical.
Note:
Note: When using the web page recording and relaying mode, pay attention to the Relay to CDN Webhooks for relay-related operations. If you initiate the relay feature at the same time, Billing of Relay Fees will occur.
File Splitting Description
Conditions for splitting recorded MP4 files:
Configurable range for recording split duration: 1-1440 minutes (default: 120 minutes).
MP4 file size reaches 2GB.
Recording Upload to Cloud Storage Description
The recording backend will upload the recorded file to the cloud storage platform (VOD or COS) via the designated method after the recording ends, and send the recording result (playback address or recording file name) to you in the form of a callback.
When uploading to COS, to ensure you can obtain the media file storage address, please note the 310 callback. The 310 callback sends the recording task ID (TaskId) and recording file name (FileList) to you. You need to manually construct the media file playback address based on the third-party storage bucket information (StorageParams.CloudStorage.Bucket), region information of third-party cloud storage (StorageParams.CloudStorage.Region), file location information (StorageParams.CloudStorage.FileNamePrefix), recording task ID (TaskId), and recording file name (FileList) in the web page recording request.
When uploading to VOD, to ensure you can obtain the media file playback address, please note the 311 callback. The 311 callback sends the playback address of the recorded file on the VOD platform to you.
Note:
The recorded file will be uploaded to your designated cloud storage platform (VOD or COS). To ensure the recording succeeds, please ensure your designated VOD or COS service is available.
Page recording only supports uploading to a single cloud storage platform (VOD or COS). Concurrent storage parameter settings are unsupported.
When uploading to COS, the 310 callback returns a recording task ID (TaskId) carrying a suffix similar to "_StartTimeMs_1717156238963". The timestamp in the suffix is fixed as 13 digits. You can truncate the returned recording task ID based on actual business needs.
API Usage Description
API Interface and Recording Concurrency Limit
The call rate limit for the recording API is 20 qps.
API timeout duration is 5 seconds.
Default concurrent recording support for a single application is 200 streams. Tasks exceeding the concurrency quota will fail.
Initiating Recording
To start web page recording, call the API (StartWebRecord). Pay special attention to the Task ID (TaskId) parameter in the response result. This parameter is the unique identifier for this recording task. You need to save this Task ID as input parameters for subsequent operations on this recording task API.
To query the recording task status, call the API (DescribeWebRecord). The input parameter is the Task ID (TaskId) from the recording response result (this parameter is the unique identifier for this recording task), or use the SdkAppId and RecordId input during web page recording initiation in the input parameters. Using these parameters, you can query the corresponding recording task status.
Recording task in progress: When the Status in the returned response of an API call is 1, it represents an ongoing recording task.
Recording task is finished: When the Message in the returned response of an API call is "task not exist", it represents the recording task is finished or not started.
Stop Recording
Stop the recording task by calling the API (StopWebRecord), requiring the task ID (TaskId) parameter in the response result when initiating recording. This parameter is the unique identifier for this recording task. You can stop the corresponding recording task using this parameter.
Note:
You can specify the recording task duration through the MaxDurationLimit parameter when starting recording. When the duration reaches the designated MaxDurationLimit value, the recording stops automatically, thereby eliminating the need to call the stop recording API. The default maximum recording duration is 10 hours.
Recording Callback Event
The web page recording feature provides multiple callback events to help you promptly learn about the processing progress and completion status of recording tasks. For callback address configuration and event description, see Cloud Recording and Web Page Recording Callback.
Recording File Management
Searching Recording Files
After the recording task ends, the files recorded by TRTC web page recording will be uploaded to your specified cloud storage platform (VOD or COS). You can directly go to the VOD Console or COS Console to search.
Note:
For COS, if you set the FileNamePrefix parameter in the recording parameters, the recording files will be saved in the specified bucket Bucket/${FileNamePrefix}/${TaskId}. Otherwise, the recording files will be saved directly in the bucket Bucket/${TaskId}.
Receiving Recording File
When uploading recording files to VOD, except for manually searching for recorded files, you can also configure the callback address on the console, allowing Tencent Cloud to proactively push messages of new recording files to your server.
After the last audio and video stream in the room exits, this process typically takes approximately 30 seconds to several minutes (the specific time depends on your recorded file size). Once completed, Tencent Cloud will send a notification to your server via the callback URL (HTTP/HTTPS) set in recording callback configuration.
Tencent Cloud will push recording and related events to your server through the callback URL you set. You can get the playback address VideoUrl of the recording file by receiving the upload success callback with event type 311. The callback information is as follows:
{
"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"
}
}
}
}
Integration Notes
Restrictions for Web Applications
The resolution upper limit of the generated video from web page recording is 1920 × 1080.
The resolution of any video source in the web page to be recorded should not exceed 1920 × 1080.
The downstream bandwidth of the page to be recorded should not exceed 5 Mbps, and the upload bandwidth should not exceed 5 Mbps.
The webpage to be recorded should not use WebGL functionality.
Ensure your Web application does not cause excessive CPU usage, memory and bandwidth consumption, and complies with laws and regulations.
Page recording supports autoplay of video elements with the autoplay attribute enabled without user interaction. However, if the video element on the webpage to be recorded does not have the autoplay attribute enabled, its content will not play automatically, possibly causing the web page recording to fail.
The webpage to be recorded should not redirect to URLs of different domains, and other forms of redirection should be avoided if possible. If the webpage to be recorded requires a login operation, please first handle the login attempt and then proceed with recording. Otherwise, the recording result may remain stuck on the login UI.
TencentCloud API Request
There may be a delay of about 5 seconds from request initiation to web page recording start. It is advisable to trigger the recording request in advance to ensure recording content integrity.
Page recording does not support layout changes.
If the RecordUrl filled in the StartWebRecord method cannot open normally, the recording service will automatically exit upon success. You can refer to cloud recording integration best practices and use the backoff strategy to call DescribeWebRecord multiple times to confirm the recording service has started normally.
Detecting Page Loading Timeout
In the record scenario, network issues and other factors may lead to the following problems:
Unable to access the recording page properly, such as failed to load page or takes too long, making it impossible to determine the actual time point of valid recording, which may result in missing important content.
The recording page can be accessed normally, but the HTML elements fail to load properly.
During recording, HTML elements that change fail to load properly, leading to inconsistency between the recording content and the expected result.
Failed to play back audio and video on the recording page.
To ensure the recorded content is consistent with expectations, follow the solution below to improve web page recording reliability.
1. Set page loading timeout time
Call the StartWebRecord method and set the page loading time limit via the ReadyTimeout field.
ReadyTimeout: Number Type, in seconds, in the range of [0,60].
0 or leave unset means not to check the page loading status.
≥ 1, indicates the page loading timeout time.
< 0 or non-integer indicates incorrect settings, and the cloud API will return an error message.
Note:
<Note>When you set up ReadyTimeout, please ensure the recording page can judge whether page loading is complete to avoid task start failure caused by not detecting page readiness.</Note>
2. Judge if loading is completed and notify the browser
Note:
You need to manually judge whether the page is loaded, then implement the subsequent logic.
Page Loading Complete
Page Loading Timeout
If the page is loaded, call the notifyReady method within the set ReadyTimeout to notify the browser that the page has loaded successfully.
notifyReady is called as follows:
// Sample call to notifyReady
<script>
function notifyReady() {
if (window.notifyReady) {
window.notifyReady();
}
}
</script>
If the page loading times out, meaning the notifyReady method is not called within the set ReadyTimeout to notify the browser, the browser will automatically reload the page. You will receive the 803 event callback (EVENT_TYPE_WEB_RECORDER_STATUS_UPDATE), where the Status field is 1 and the EventMessage field is Page load timeout.
If the reload is successful, refer to the logic of page loading complete and call the notifyReady method to notify the browser.
If the page loading times out again, it means the reload failed and the recording service stops. You will receive the 801 event callback (EVENT_TYPE_WEB_RECORDER_START) notifying you that the recording task start failed, where the Status field is 2 and the EventMessage field is Page load timeout. Upon receiving the callback notification, you can determine whether to re-initiate the recording task according to actual business needs.
Other Descriptions
During recording, if the current MP4 file duration exceeds the maxVideoDuration value or its size exceeds 2GB, the recording service will create a new MP4 file.
If you fill in the URL of the target page in the start method, the Web client will automatically publish audio and video streams, and the recording service will also become a streaming source. Therefore, a user interface with a green background color may appear in your application. To avoid this issue, you can add the query field is_recorder=1 to the target page URL, such as "https://URL?is_recorder=1", and include the following logic on the page:
If is_recorder is 1, the Web client does not publish audio and video streams.
If is_recorder is not 1, the Web client publishes audio and video streams.
During web page recording, the recording service acts as a Web application client. Therefore, if your Web application includes a list of users, we recommend hiding this user in the user list.
Scaling Out Scenarios
The TRTC web page recording solution can record not only TRTC RTC sessions but also any accessible webpage passed in. Therefore, for developers, leveraging TRTC's web page recording ability enables more creative gameplay, such as:
1. Using technical measures, synchronize operations on local and cloud-rendered webpages for multiple users, then record the multi-user collaboration process via web page recording as tutorial materials.
2. Multiple users can use the web page recording solution to record a video source and forward it to the live streaming CDN. Subsequently, multiple users can watch the live stream together.
The follow-up TRTC web page recording solution will combine AI to explore more audio/video processing value-added services based on recording and relaying foundational capabilities, assist customers to further reduce costs and improve efficiency, and expand business boundaries.
