1# 使用WebRTC进行Web视频会议 2 3Web组件可以通过W3C标准协议接口拉起摄像头和麦克风,通过[onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9)接口接收权限请求通知,需在配置文件中声明相应的音频权限。 4 5- 使用摄像头和麦克风功能前请在module.json5中添加音频相关权限,权限的添加方法请参考[在配置文件中声明权限](../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通过在JavaScript中调用W3C标准协议接口navigator.mediaDevices.getUserMedia(),该接口用于拉起摄像头和麦克风。constraints参数是一个包含了video和audio两个成员的MediaStreamConstraints对象,用于说明请求的媒体类型。 19 20在下面的示例中,点击前端页面中的开起摄像头按钮再点击onConfirm,打开摄像头和麦克风。 21 22- 应用侧代码。 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 // 配置Web开启调试模式 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 // 获取权限请求通知,点击onConfirm按钮后,拉起摄像头和麦克风。 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- 前端页面index.html代码。 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摄像头" value="开启摄像头" onclick="getMedia()"/> 117 <script> 118 function getMedia() 119 { 120 let constraints = { 121 video: {width: 500, height: 500}, 122 audio: true 123 }; 124 // 获取video摄像头区域 125 let video = document.getElementById("video"); 126 // 返回的Promise对象 127 let promise = navigator.mediaDevices.getUserMedia(constraints); 128 // then()异步,调用MediaStream对象作为参数 129 promise.then(function (MediaStream) { 130 video.srcObject = MediaStream; 131 video.play(); 132 }); 133 } 134 </script> 135 </body> 136 </html> 137 ```