tencent cloud
Web

Mode fokus
Ukuran font
Terakhir diperbarui: 2025-12-24 10:30:38
Business Process
This section summarizes some common business processes of online claw machines to help you better understand the implementation of the entire scenario.
Online Claw Machine Real-Time Communication Engine (RTC Engine) Streaming
Online Claw Machine RTMP Streaming
The diagram below illustrates the sequence of RTC Engine streaming for an online claw machine, including processes such as RTC Engine streaming from a network camera and user-side stream pulling.
﻿
The diagram below illustrates the sequence of RTMP streaming for an online claw machine, including processes such as RTMP streaming from a network camera and user streaming pull.
﻿
Integration Preparation
Step 1: Activating the Services
The online claw machine scenario typically relies on the paid PaaS service of Tencent Cloud RTC Engine for implementation. RTC Engine provides real-time audio and video interaction capabilities. You can choose to activate the above service based on your specific business requirements.
1. Log in to the RTC Engine console, then click Create application on the Applications page. You can choose to upgrade the RTC Engine application edition as needed. For example, upgrading to the Flagship Edition unlocks more value-added feature services.
﻿
Note:
It is recommended to create two separate applications for the test environment and the production environment, respectively. When activating the RTC Engine service for the first time, you will receive a free trial duration package of 10,000 minutes.
The RTC Engine monthly packages (Free Trial, Lite, Standard, and Pro packages) can unlock different value-added feature services. For details, see RTC Engine Monthly Packages.
2. After the application is created, you can view its basic information under Application Management > Application Overview. Keep the SDKAppID and SDKSecretKey secure for future use, and take precautions to prevent key leakage that may result in unauthorized traffic usage.
﻿
Step 2: Importing the SDK
NPM Integration
1. You can use the npm command to install trtc-sdk-v5 in your project.
npm install trtc-sdk-v5 --save
2. Import a module in the project script.
import RTC Engine from 'trtc-sdk-v5';
Script Integration
Add the following code to your web page:
<script src="trtc.js"></script>
Note:
The trtc.js needs to be downloaded to your local project for integration. For the corresponding SDK, see download link and demo address.
Step 3: Performing Authentication and Licensing
UserSig is a security protection signature designed by Tencent Cloud to prevent malicious attackers from misappropriating your cloud service usage rights. RTC Engine validates this authentication credential when entering a room.
Debugging and testing phase: You can calculate and generate a UserSig using either the client sample code or the console, only used for debugging and testing.
Production stage: It is recommended to use the server computing UserSig solution, which has a higher security level and helps prevent the client from being decompiled and reversed, to avoid the risk of key leakage.
The specific implementation process is as follows:
1. Before calling the initialization API of the SDK, have your app request UserSig from your server first.
2. Your server generates the UserSig based on the SDKAppID and UserID.
3. The server returns the generated UserSig to your app.
4. Your app sends the obtained UserSig to the SDK through a specific API.
5. The SDK submits the SDKAppID + UserID + UserSig to the cloud server for verification.
6. The cloud platform verifies the validity of the UserSig.
7. After the verification is passed, the RTC Engine SDK will be provided with real-time audio and video services.
﻿
﻿
﻿
Note:
The method of generating UserSig locally during the debugging and testing stage is not recommended for the online environment because it may be easily decompiled and reversed, causing key leakage.
We provide the source code for server-side UserSig calculation in multiple languages (Java/Go/PHP/Node.js/Python/C#/C++). For details, see UserSig Calculation Source Code.
Step 4:  SDK Initialization and Listening
Create an RTC Engine SDK instance and set an event listener.
const trtc = TRTC.create();
﻿
trtc.on('error', err => {
  console.error(err);
});
Note:
It is recommended to listen to SDK event notifications. Perform log printing and handling for some common errors. For details, see Error Code Table.
Step 5: RTMP Pushing Address Generation (RTMP Pushing)
Generate an RTMP streaming address.
rtmp://rtmp.rtc.qq.com/push/roomID?sdkappid=application&userid=username&usersig=signature
The RTMP appName is push.
The room ID, application, username, and signature in the address need to be replaced with your business-specific values.
To simplify parameters, only string room IDs are supported. The room number should not exceed 64 characters and can only contain numbers, letters, and underscores.
Note:
If other RTC Engine endpoints need to watch the RTMP stream, use a string room ID for room entry.
For the UserSig generation rules, see UserSig (Please note that the signature should be within its validity period).
Example:
rtmp://rtmp.rtc.qq.com/push/hello-string-room?sdkappid=140*****66&userid=******rtmp2&usersig=eJw1jdE********RBZ8qKGRj8Yp-wVbv*mGMVZqS7w-mMDQL
Integration Process
API Sequence Diagram
﻿
Step 1: Claw Machine Streaming
RTC Engine Streaming
1. Calculate and generate UserSig using either the client sample code or the console.
2. Configure the SdkAppid, UserId, UserSig, RoomId, and other information on the RTC Engine network camera or streaming box to start streaming.
Note:
RTC Engine room IDs are divided into numeric type roomId and string type strRoomId. The rooms of these two types are not interconnected. It is recommended to unify the room ID type.
RTC Engine user roles are divided into anchors and audiences. Only anchors have streaming permissions. The user role should be specified upon room entry. If the user role is not specified, the default role is anchor.
In the online claw machine scenario, it is recommended to use the rtc mode for entering a room, as this ensures lower latency.
RTMP Streaming
1. Use the RTMP Address Generator to generate an RTMP streaming address.
﻿
﻿
﻿
2. Configure the RTMP streaming address to the RTMP network camera or streaming box to start streaming.
Step 2: the User Entering Room and Pulling Stream
1. The user enters the RTC Engine room.
const trtc = TRTC.create();
// Enter a room
try {
  await trtc.enterRoom({ strRoomId, scene:'rtc', sdkAppId, userId, userSig});
  console.log('Room entry successful. ');
} catch (error) {
  console.error('Room entry failed. ' + error);
}
2. The user subscribes to the anchor’s audio and video streams.
﻿
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  // To play video images, place an HTMLElement in the DOM. It can be a div tag. Assume its ID is ${userId}_${streamType}.
  const view = ${userId}_${streamType};
  trtc.startRemoteVideo({ userId, streamType, view });
});
﻿
trtc.on(TRTC.EVENT.FIRST_VIDEO_FRAME, event => {
   // event.height: Video height.
   // event.width: Video width.
   // event.streamType: Video stream type.
   // event.userId: User ID. If it is an empty string, it indicates a local video.
})
Step 3: User Exiting the Room
1. The user exits the room.
await trtc.exitRoom(); 
// After a successful room exit, if the RTC engine instance is no longer needed, you can call the trtc.destroy method to terminate the instance and promptly release related resources.
// Once terminated, the RTC engine instance can no longer be used, and a new instance needs to be created.
trtc.destroy();
2. Dissolve the room.
Server dissolves the room.
RTC Engine provides the server-side API DismissRoom for dissolving rooms with numeric types and the API DismissRoomByStrRoomId for dissolving rooms with string types. You can use these server-side APIs to remove all users from the room and dissolve the room.
Client dissolves the room.
The client does not provide an API for directly dissolving a room. Each client should call exitRoom to exit the room. Once all anchors and audiences have exited the room, the room will be automatically dissolved according to the RTC Engine room lifecycle rules. For details, see RTC Engine Exit the Room.
Exception Handling
Autoplay Policy Restriction
In the scenario of web-based stream pulling, to enhance the experience of users entering the room, autoplay is set by default upon entering the room. However, in Android and iOS WebViews, the default autoplay policy may be different from that in browsers. You can refer to the following documentation to disable the autoplay restriction in your app.
Disable autoplay restriction in Android WebView: Call setMediaPlaybackRequiresUserGesture(false) to disable autoplay restriction.
Disable autoplay restriction in iOS WebView: Set mediaTypesRequiringUserActionForPlayback to WKAudiovisualMediaTypeNone.
Note:
For suggestions for handling complete autoplay policy restrictions, see Tutorial: Handle Autoplay Restriction.
RTC Engine on iOS may not autoplay in the WeChat Browser using the above methods. If you need to enable autoplay, contact us.