• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用WebRTC进行Web视频会议
2
3Web组件可以通过W3C标准协议接口拉起摄像头和麦克风，通过[onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9)接口接收权限请求通知，需在配置文件中声明相应的音频权限。
4
5- 使用摄像头和麦克风功能前请在module.json5中添加音频相关权限，权限的添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。
6
7   ```json
8    // src/main/resources/base/element/string.json
9    {
10      "name": "reason_for_camera",
11      "value": "reason_for_camera"
12    },
13    {
14      "name": "reason_for_microphone",
15      "value": "reason_for_microphone"
16    }
17  ```
18
19  ```json
20    // src/main/module.json5
21    "requestPermissions":[
22      {
23        "name" : "ohos.permission.CAMERA",
24        "reason": "$string:reason_for_camera",
25        "usedScene": {
26          "abilities": [
27            "EntryAbility"
28          ],
29          "when":"inuse"
30        }
31      },
32      {
33        "name" : "ohos.permission.MICROPHONE",
34        "reason": "$string:reason_for_microphone",
35        "usedScene": {
36          "abilities": [
37            "EntryAbility"
38          ],
39          "when":"inuse"
40        }
41      }
42    ],
43   ```
44
45通过在JavaScript中调用W3C标准协议接口navigator.mediaDevices.getUserMedia()，该接口用于拉起摄像头和麦克风。constraints参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。
46
47在下面的示例中，点击前端页面中的开启摄像头按钮再点击onConfirm，打开摄像头和麦克风。
48
49- 应用侧代码。
50
51  ```ts
52  // xxx.ets
53  import { webview } from '@kit.ArkWeb';
54  import { BusinessError } from '@kit.BasicServicesKit';
55  import { abilityAccessCtrl } from '@kit.AbilityKit';
56
57  @Entry
58  @Component
59  struct WebComponent {
60    controller: webview.WebviewController = new webview.WebviewController();
61    uiContext: UIContext = this.getUIContext();
62
63    aboutToAppear() {
64      // 配置Web开启调试模式
65      webview.WebviewController.setWebDebuggingAccess(true);
66      // 获取权限请求通知，点击onConfirm按钮后，拉起摄像头和麦克风。
67      let atManager = abilityAccessCtrl.createAtManager();
68      atManager.requestPermissionsFromUser(this.uiContext.getHostContext(), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
69        .then((data) => {
70          console.info('data:' + JSON.stringify(data));
71          console.info('data permissions:' + data.permissions);
72          console.info('data authResults:' + data.authResults);
73        }).catch((error: BusinessError) => {
74        console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
75      })
76    }
77
78    build() {
79      Column() {
80        Web({ src: $rawfile('index.html'), controller: this.controller })
81          .onPermissionRequest((event) => {
82            if (event) {
83              this.uiContext.showAlertDialog({
84                title: 'title',
85                message: 'text',
86                primaryButton: {
87                  value: 'deny',
88                  action: () => {
89                    event.request.deny();
90                  }
91                },
92                secondaryButton: {
93                  value: 'onConfirm',
94                  action: () => {
95                    event.request.grant(event.request.getAccessibleResource());
96                  }
97                },
98                cancel: () => {
99                  event.request.deny();
100                }
101              })
102            }
103          })
104      }
105    }
106  }
107  ```
108
109- 前端页面index.html代码。
110
111  ```html
112  <!-- index.html -->
113  <!DOCTYPE html>
114  <html>
115  <head>
116    <meta charset="UTF-8">
117  </head>
118  <body>
119  <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
120  <canvas id="canvas" width="500px" height="500px"></canvas>
121  <br>
122  <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/>
123  <script>
124    function getMedia()
125    {
126      let constraints = {
127        video: {width: 500, height: 500},
128        audio: true
129      };
130      // 获取video摄像头区域
131      let video = document.getElementById("video");
132      // 返回的Promise对象
133      let promise = navigator.mediaDevices.getUserMedia(constraints);
134      // then()异步，调用MediaStream对象作为参数
135      promise.then(function (MediaStream) {
136        video.srcObject = MediaStream;
137        video.play();
138      });
139    }
140  </script>
141  </body>
142  </html>
143  ```