鸿蒙NEXT版实战开发：使用WebRTC进行Web视频会议

往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

使用WebRTC进行Web视频会议

Web组件可以通过W3C标准协议接口拉起摄像头和麦克风。开发者在使用该功能时，需配置ohos.permission.CAMERA、ohos.permission.MICROPHONE权限。

通过在JavaScript中调用W3C标准协议接口navigator.mediaDevices.getUserMedia()，该接口用于拉起摄像头和麦克风。constraints参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。

在下面的示例中，点击index.html前端页面中的开起摄像头按钮，打开摄像头和麦克风。

• 应用侧代码。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';
  import { abilityAccessCtrl } from '@kit.AbilityKit';
  
  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController()
  
    aboutToAppear() {
      // 配置Web开启调试模式
      webview.WebviewController.setWebDebuggingAccess(true);
      let atManager = abilityAccessCtrl.createAtManager();
      atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
        .then(data => {
          let result: Array = data.authResults;
          let hasPermissions1 = true;
          result.forEach(item => {
            if (item === -1) {
              hasPermissions1 = false;
            }
          })
          if (hasPermissions1) {
            console.info("hasPermissions1");
          } else {
            console.info(" not hasPermissions1");
          }
        }).catch(() => {
        return;
      });
    }
  
    build() {
      Column() {
        Web({ src: $rawfile('index.html'), controller: this.controller })
          .onPermissionRequest((event) => {
            if (event) {
              AlertDialog.show({
                title: 'title',
                message: 'text',
                primaryButton: {
                  value: 'deny',
                  action: () => {
                    event.request.deny();
                  }
                },
                secondaryButton: {
                  value: 'onConfirm',
                  action: () => {
                    event.request.grant(event.request.getAccessibleResource());
                  }
                },
                cancel: () => {
                  event.request.deny();
                }
              })
            }
          })
      }
    }
  }

• 前端页面index.html代码。

  ​