• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
50    build() {
51      Column() {
52        Web({ src: $rawfile('index.html'), controller: this.controller })
53          // Obtain the permission request notification. After the onConfirm button is clicked, the camera and microphone are started.
54          .onPermissionRequest((event) => {
55            if (event) {
56              AlertDialog.show({
57                title: 'title',
58                message: 'text',
59                primaryButton: {
60                  value: 'deny',
61                  action: () => {
62                    event.request.deny();
63                  }
64                },
65                secondaryButton: {
66                  value: 'onConfirm',
67                  action: () => {
68                    event.request.grant(event.request.getAccessibleResource());
69                  }
70                },
71                cancel: () => {
72                  event.request.deny();
73                }
74              })
75            }
76          })
77      }
78    }
79  }
80  ```
81
82- Code of the **index.html** page:
83
84  ```html
85  <!-- index.html -->
86  <!DOCTYPE html>
87  <html>
88  <head>
89    <meta charset="UTF-8">
90  </head>
91  <body>
92  <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
93  <canvas id="canvas" width="500px" height="500px"></canvas>
94  <br>
95  <input type="button" title="HTML5 Camera" value="Enable Camera" onclick="getMedia()"/>
96  <script>
97    function getMedia()
98    {
99      let constraints = {
100        video: {width: 500, height: 500},
101        audio: true
102      };
103      // Obtain the video camera area.
104      let video = document.getElementById("video");
105      // Returned Promise object
106      let promise = navigator.mediaDevices.getUserMedia(constraints);
107      // then() is asynchronous. Invoke the MediaStream object as a parameter.
108      promise.then(function (MediaStream) {
109        video.srcObject = MediaStream;
110        video.play();
111      });
112    }
113  </script>
114  </body>
115  </html>
116  ```
117