• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# webRTC拉起摄像头和麦克风
2
3Web组件可以通过W3C标准协议接口拉起摄像头和麦克风。开发者在使用该功能时，需配置"ohos.permission.CAMERA"、"ohos.permission.MICROPHONE"权限。
4
5通过在JavaScript中调用W3C标准协议接口navigator.mediaDevices.getUserMedia()，该接口用于拉起摄像头和麦克风。constraints参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。
6
7在下面的示例中，点击index.html前端页面中的开起摄像头按钮，打开摄像头和麦克风。
8
9- 应用侧代码。
10
11  ```ts
12  // xxx.ets
13  import web_webview from '@ohos.web.webview';
14  import abilityAccessCtrl, { PermissionRequestResult, Permissions } from '@ohos.abilityAccessCtrl';
15
16  @Entry
17  @Component
18  struct WebComponent {
19    controller: web_webview.WebviewController = new web_webview.WebviewController()
20
21    aboutToAppear() {
22      // 配置Web开启调试模式
23      web_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        reture;
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- 前端页面index.html代码。
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摄像头" value="开启摄像头" onclick="getMedia()"/>
89  <script>
90    function getMedia()
91    {
92      let constraints = {
93        video: {width: 500, height: 500},
94        audio: true
95      };
96      // 获取video摄像头区域
97      let video = document.getElementById("video");
98      // 返回的Promise对象
99      let promise = navigator.mediaDevices.getUserMedia(constraints);
100      // then()异步，调用MediaStream对象作为参数
101      promise.then(function (MediaStream) {
102        video.srcObject = MediaStream;
103        video.play();
104      });
105    }
106  </script>
107  </body>
108  </html>
109  ```