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   ```
8   "requestPermissions":[
9      {
10        "name" : "ohos.permission.CAMERA"
11      },
12      {
13        "name" : "ohos.permission.MICROPHONE"
14      }
15    ]
16   ```
17
18通过在JavaScript中调用W3C标准协议接口navigator.mediaDevices.getUserMedia()，该接口用于拉起摄像头和麦克风。constraints参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。
19
20在下面的示例中，点击前端页面中的开起摄像头按钮再点击onConfirm，打开摄像头和麦克风。
21
22- 应用侧代码。
23
24  ```ts
25  // xxx.ets
26  import { webview } from '@kit.ArkWeb';
27  import { BusinessError } from '@kit.BasicServicesKit';
28  import { abilityAccessCtrl } from '@kit.AbilityKit';
29
30  @Entry
31  @Component
32  struct WebComponent {
33    controller: webview.WebviewController = new webview.WebviewController()
34
35    aboutToAppear() {
36      // 配置Web开启调试模式
37      webview.WebviewController.setWebDebuggingAccess(true);
38      let atManager = abilityAccessCtrl.createAtManager();
39      atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
40        .then((data) => {
41          console.info('data:' + JSON.stringify(data));
42          console.info('data permissions:' + data.permissions);
43          console.info('data authResults:' + data.authResults);
44        }).catch((error: BusinessError) => {
45        console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
46      })
47    }
48
49    aboutToAppear() {
50      // 获取权限请求通知，点击onConfirm按钮后，拉起摄像头和麦克风。
51      webview.WebviewController.setWebDebuggingAccess(true);
52      let atManager = abilityAccessCtrl.createAtManager();
53      atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
54        .then(data => {
55          let result: Array<number> = data.authResults;
56          let hasPermissions1 = true;
57          result.forEach(item => {
58            if (item === -1) {
59              hasPermissions1 = false;
60            }
61          })
62          if (hasPermissions1) {
63            console.info("hasPermissions1");
64          } else {
65            console.info(" not hasPermissions1");
66          }
67        }).catch(() => {
68        return;
69      });
70    }
71
72    build() {
73      Column() {
74        Web({ src: $rawfile('index.html'), controller: this.controller })
75          .onPermissionRequest((event) => {
76            if (event) {
77              AlertDialog.show({
78                title: 'title',
79                message: 'text',
80                primaryButton: {
81                  value: 'deny',
82                  action: () => {
83                    event.request.deny();
84                  }
85                },
86                secondaryButton: {
87                  value: 'onConfirm',
88                  action: () => {
89                    event.request.grant(event.request.getAccessibleResource());
90                  }
91                },
92                cancel: () => {
93                  event.request.deny();
94                }
95              })
96            }
97          })
98      }
99    }
100  }
101  ```
102
103- 前端页面index.html代码。
104
105  ```html
106  <!-- index.html -->
107  <!DOCTYPE html>
108  <html>
109  <head>
110    <meta charset="UTF-8">
111  </head>
112  <body>
113  <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
114  <canvas id="canvas" width="500px" height="500px"></canvas>
115  <br>
116  <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/>
117  <script>
118    function getMedia()
119    {
120      let constraints = {
121        video: {width: 500, height: 500},
122        audio: true
123      };
124      // 获取video摄像头区域
125      let video = document.getElementById("video");
126      // 返回的Promise对象
127      let promise = navigator.mediaDevices.getUserMedia(constraints);
128      // then()异步，调用MediaStream对象作为参数
129      promise.then(function (MediaStream) {
130        video.srcObject = MediaStream;
131        video.play();
132      });
133    }
134  </script>
135  </body>
136  </html>
137  ```