xref: /docs/en/application-dev/web/web-rtc.md (revision e41f4b71) 
1# Holding a Video Conference with WebRTC
2
3The **\<Web>** component can start a camera and microphone by calling **navigator.mediaDevices.getUserMedia()**, a standard W3C API, in JavaScript. To call this API, you need to declare the **ohos.permission.CAMERA** and **ohos.permission.MICROPHONE** permissions.
4
5 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**.
6
7In the following example, when a user clicks the button for enabling the camera on the frontend page (**index.html**), the **\<Web>** component starts the camera and microphone.
8
9- Application code:
10
11  ```ts
12  // xxx.ets
13  import { webview } from '@kit.ArkWeb';
14  import { abilityAccessCtrl } from '@kit.AbilityKit';
15
16  @Entry
17  @Component
18  struct WebComponent {
19    controller: webview.WebviewController = new webview.WebviewController()
20
21    aboutToAppear() {
22      // Enable web frontend page debugging.
23      webview.WebviewController.setWebDebuggingAccess(true);
24      let atManager = abilityAccessCtrl.createAtManager();
25      atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
26        .then(data => {
27          let result: Array<number> = data.authResults;
28          let hasPermissions1 = true;
29          result.forEach(item => {
30            if (item === -1) {
31              hasPermissions1 = false;
32            }
33          })
34          if (hasPermissions1) {
35            console.info("hasPermissions1");
36          } else {
37            console.info(" not hasPermissions1");
38          }
39        }).catch(() => {
40        return;
41      });
42    }
43
44    build() {
45      Column() {
46        Web({ src: $rawfile('index.html'), controller: this.controller })
47          .onPermissionRequest((event) => {
48            if (event) {
49              AlertDialog.show({
50                title: 'title',
51                message: 'text',
52                primaryButton: {
53                  value: 'deny',
54                  action: () => {
55                    event.request.deny();
56                  }
57                },
58                secondaryButton: {
59                  value: 'onConfirm',
60                  action: () => {
61                    event.request.grant(event.request.getAccessibleResource());
62                  }
63                },
64                cancel: () => {
65                  event.request.deny();
66                }
67              })
68            }
69          })
70      }
71    }
72  }
73  ```
74
75- Code of the **index.html** page:
76
77  ```html
78  <!-- index.html -->
79  <!DOCTYPE html>
80  <html>
81  <head>
82    <meta charset="UTF-8">
83  </head>
84  <body>
85  <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
86  <canvas id="canvas" width="500px" height="500px"></canvas>
87  <br>
88  <input type="button" title="HTML5 Camera" value="Enable Camera" onclick="getMedia()"/>
89  <script>
90    function getMedia()
91    {
92      let constraints = {
93        video: {width: 500, height: 500},
94        audio: true
95      };
96      // Obtain the video camera area.
97      let video = document.getElementById("video");
98      // Returned Promise object
99      let promise = navigator.mediaDevices.getUserMedia(constraints);
100      // then() is asynchronous. Invoke the MediaStream object as a parameter.
101      promise.then(function (MediaStream) {
102        video.srcObject = MediaStream;
103        video.play();
104      });
105    }
106  </script>
107  </body>
108  </html>
109  ```
110