1# Holding a Video Conference with WebRTC
2
3The **Web** component can start a camera and microphone by calling the W3C Standards-compliant API **navigator.mediaDevices.getUserMedia()** in JavaScript, and receive the permission request notification through [onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9). To call these APIs, you need to declare the audio permissions in the **module.json5** file.
4
5- For details about how to add audio permissions, see [Declaring Permissions](../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 The **constraints** parameter in the API is a **MediaStreamConstraints** object that specifies the types of media to request. It contains two members: **video** and **audio**.
19
20In the following example, when a user clicks the button for enabling the camera on the frontend page and the **onConfirm** button, the **Web** component starts the camera and microphone.
21
22- Application code:
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      // Enable web frontend page debugging.
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      // Obtain the permission request notification. After the onConfirm button is clicked, the camera and microphone are started.
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- Code of the **index.html** page:
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 Camera" value="Enable Camera" onclick="getMedia()"/>
117  <script>
118    function getMedia()
119    {
120      let constraints = {
121        video: {width: 500, height: 500},
122        audio: true
123      };
124      // Obtain the video camera area.
125      let video = document.getElementById("video");
126      // Returned Promise object
127      let promise = navigator.mediaDevices.getUserMedia(constraints);
128      // then() is asynchronous. Invoke the MediaStream object as a parameter.
129      promise.then(function (MediaStream) {
130        video.srcObject = MediaStream;
131        video.play();
132      });
133    }
134  </script>
135  </body>
136  </html>
137  ```
138