FAQ for Web SDK integration-Real-Time Communication(RTC)-阿里云帮助中心

This topic describes common issues and solutions for Windows SDK integration.

Browser compatibility and known issues

Support for Real-Time Communication (RTC) varies across browsers. First, check the Browser compatibility and known issues document. If your issue is listed, try the recommended solution.

Page errors during iframe integration

Problem: A permission error occurs on an RTC application page that is embedded as an iframe:
Solution: This issue is caused by the browser's Permissions Policy. For more information, see the linked document. For example, you can explicitly grant device permissions when you embed the iframe:

Web communication fails on Android devices

You can check whether an Android device supports the H264 protocol.

Note

Web communication on an Android device requires H264 protocol support.

Cannot enable the local camera and microphone

Solution:

Check whether the AppServer and the web page use the HTTPS protocol. In a development environment, if you are not using HTTPS, verify that the domain name is http://localhost.
Check whether device permissions are granted and that the device is enabled.
Check whether the hardware is available.

No local preview after switching cameras

Solution:

Check whether the play and setDevice methods are called consecutively. For example:
```
cameraTrack.play('#id');
// Switch between the front and rear cameras
cameraTrack.setDevice(deviceId);
```
In this case, the setDevice method modifies the video element, which causes the browser to cancel the play operation. Change the code as follows:
```
cameraTrack.setDevice(deviceId).then(() => {
  cameraTrack.play('#id');
});
```

CVO (camera capture angle follows phone rotation) fails to enable in WeChat integration

Solution:

First, confirm that screen rotation is enabled in your phone's Settings.
When you open an H5 link in the WeChat browser on Android, landscape mode is disabled by default. To enable it, go to Me > Settings > General in WeChat and turn on Landscape Mode.
If you open an H5 link nested in a WeChat mini program webview, enable the rotation option. For more information, see the official WeChat mini program documentation.

Some Android models have compatibility issues such as focus or zoom problems when switching to the rear camera

Solution:

Some Android models have compatibility issues when you select the rear camera. Do not set the camera directly to 'environment'. Instead, specify the camera by its deviceId. To do this, retrieve the list of cameras using the getCameras method, find the last camera with a label that contains 'back', and then use its deviceId.
Sample code:
```
 const cameraList = await DingRTC.getCameras()
 let lastBackCameraDeviceId = '';
 for (const device of cameraList) {
   if (device.label.includes('back')) {
     lastBackCameraDeviceId = device.deviceId;
   }
 }
 lastBackCameraDeviceId = lastBackCameraDeviceId || 'environment'
 await cameraTrack.setDevice(lastBackCameraDeviceId)
```

Errors during integration with SSR frameworks such as Next.js

Problem:
Solution:
This issue is caused by the pre-rendering mechanism in these frameworks. To resolve this, dynamically load the module within a component lifecycle method that executes only in the browser.
Sample code:
```
  useEffect(() => {
    const DingRTC = require('dingrtc').default;
    DingRTC.createCameraVideoTrack({ dimension: 'VD_1920x1080' }).then((track) => {
      track.play('#test');
    })
  }, [])
```