- Release Notes
- Product Introduction
- User Tutorial
- Purchase Guide
- SDK Download Guide
- Product Feature Demo
- Console Guide
- Getting Started
- Basic Feature Development Guide
- Advanced Feature Development Guide
- Client API
- Server APIs
- FAQ
- Service Agreement
- Contact Us
- Glossary
- GME Policy
- Release Notes
- Product Introduction
- User Tutorial
- Purchase Guide
- SDK Download Guide
- Product Feature Demo
- Console Guide
- Getting Started
- Basic Feature Development Guide
- Advanced Feature Development Guide
- Client API
- Server APIs
- FAQ
- Service Agreement
- Contact Us
- Glossary
- GME Policy
This document describes how to get started with the GME APIs for HTML5.
Features Supported by the SDK for HTML5
| Feature | Supported by HTML5 |
|---|---|
| Basic voice chat features | Yes |
| Sound effect and accompaniment | Partially supported |
| 3D voice | No |
| Range voice | No |
| Room management | No |
| Audio forwarding routing | No |
| Custom message channel | No |
| Voice messaging | No |
| Speech-to-text | No |
Platforms Supported by the SDK for HTML5
| OS/Platform | Browser/WebView | Version Requirement | Remarks |
| iOS | Safari | 11.1.2 | Safari on a later version |
| Chrome | - | iOS currently doesn't support Chrome. | |
| Weixin browser | - | iOS currently doesn't support the Weixin browser. | |
| Android | TBS (the default WebView of Weixin and Mobile QQ) | 43600 | The default built-in browser kernel of Weixin and Mobile QQ is TBS |
| Chrome | 60+ | H.264 support is required | |
| macOS | Chrome | 47+ | - |
| Safari | 11+ | - | |
| Windows (PC) | Chrome | 52+ | - |
| QQ Browser | 10.2 | - |
Preparations
The SDK can be obtained in the following steps:
- Go to the SDK Download Guide page.
- Locate the SDK resources for HTML5 on the page.
- Click Download.
Frontend Project Configuration Steps
1. Open ports
If you have configured a firewall across your network, be sure to open the following ports:
| Protocol | Port |
|---|---|
| TCP | 8687 |
| UDP | 8000, 8800, 443 |
Import the SDK by using CDN.
2. Import frontend library files
Import WebRTCService.min.js into the project as demonstrated in the following code:
<head>
<script src="../dist/WebRTCService.min.js"></script>
</head>
3. Add the audio tag
<div id="gme-audio-wrap"></div>
Server-Side Deployment Steps
The use of the GME SDK requires authentication which involves keys and is not suitable for implementation on the client. You are recommended to deploy it separately.
If only client implementation is needed for the time being, please refer to the provided demo project.
1. Download the program
Download the sample authBuffer program, which can sign the authentication information for a specified SDKAppID.
2. Configure the server-side authentication project
Go to the signdemo directory and modify the config.js file: open the config.js file, delete the default configuration, and call the appidMap function in the place where the code is deleted (the parameters are the SDKAppid applied for on the Tencent Cloud backend and the corresponding authentication key).
const AuthBufferConfig = function () {
this.appidMap = {};
this.appidMap["1400089356"] = "1cfbfd2a1a03a53e";
};
// Replace `1400089356` with the `sdkAppid` applied for on the Tencent Cloud backend and replace `1cfbfd2a1a03a53e` with the authentication key corresponding to the `sdkAppid`
NoteThe
AuthKeymust correspond to yourSDKAppid.
3. Deploy the server-side authentication project
Go to the directory where the sample authBuffer program resides and run the following statement to install the dependencies:
npm i
Then, execute the node index.js script to run the signature service.
NoteAs the async syntax is used, make sure that your node is v8 or later. Run
node -von the command line to view the version.
4. Test the deployment result
You can run the following command on the command line for test (make sure that your system has a curl command):
// Generate a `userSig`:
curl "http://127.0.0.1:10005/" --data "sdkappid=1400089356&roomid=1234123&openid=1234567"
After the signing program is executed, the authentication information will be returned as shown below:
{"userSig":"AqhHE7QHLFYPfV/zfyrdRYHfuUn6eOA8g/J6GMjVy//Shr5ByJPTi8hzR2KyXMvn","errorCode":0}
Yes
No
Was this page helpful?