Getting Started

Environment Requirements

Table 1 describes the operating environment requirements of the web SDK.

**Table 1** Environment requirements
Item	Constraint
Development tool	Microsoft Visual Studio Code, WebStorm, or other web IDE development tools
Language	JavaScript or TypeScript
Build environment	Node v17+ (recommended)
Compilation tool	Webpack 5 + Babel 7 is recommended.
Browser	Use a supported browser by referring to Table 2.

Due to the security policy of the browser, you can use only https://domain name to load and run the intelligent interaction web SDK.

**Table 2** Browser compatibility
OS	Browser	Browser Version
Windows	Google Chrome	91+
Windows	Microsoft Edge	80+
Android	Mobile Google Chrome	91+
iOS	Mobile Safari	17.3+
Mac	Safari	15.6+

**Table 3** Support for transparent background
OS	Browser	Browser Version
Windows	Google Chrome	94+
Windows	Microsoft Edge	94+
Android	Mobile Google Chrome	94+
iOS	Mobile Safari	17.3+
macOS	Safari	16.4+

Quick SDK Integration

Place the downloaded SDK package in the sdk directory of your project.
Import HwICSUiSdk to the project code.
- To import the SDK using <script>, access HwICSUiSdk to obtain the exported module:
```
<script src='./sdk/HwICSUiSdk.js'></script>
```
- To directly reference the static JS file of Huawei WebRTC SDK, use the following:
```
import { HwICSUiSdk } from './sdk/HwICSUiSdk'
```
- In addition to the preceding JS file, you also need to import the CSS file. You can import the CSS file using the link tag, or directly import it in the project.
```
<link rel="stylesheet" href="./sdk/HwICSUiSdk.css">
import './sdk/HwICSUiSdk.css'
@import './sdk/HwICSUiSdk.css'
```

Check whether the browser supports the SDK. For details about the APIs, see checkBrowserSupport.

       
            const result = await HwICSUiSdk.checkBrowserSupport();
if (result) {
  // Supported
} else {
  // Not supported
}

Add a container element to the page for intelligent interaction tasks.

The container element must contain the id attribute.

        
             <div id="ics-sdk" style="width: 100vw;height: 100vh"></div>

Create an intelligent interaction task. For details about the APIs, see create.

       
            HwICSUiSdk.create({
  serverAddress: 'metastudio-api.cn-north-4.myhuaweicloud.com',
  onceCode: 'aaa',
  robotId: 'aaa',
  containerId: 'ics-sdk',
});