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