onPermissionRequest：通知收到获取权限请求，需配置"ohos.permission.CAMERA"、"ohos.permission.MICROPHONE"权限。具体权限配置可参考声明权限。
getAccessibleResource：获取网页所请求的权限资源列表。
requestPermissionsFromUser：用于UIAbility/UIExtensionAbility拉起弹框请求用户授权。

解决方案

通过Web组件的onPermissionRequest回调方法返回值event.request.getAccessibleResource()获取网页所请求的权限资源列表，随后遍历判断具体的资源类型，添加对应的权限，生成权限列表传给atManager.requestPermissionsFromUser统一申请权限。

具体步骤如下：

允许应用使用相机时需添加相机权限：ohos.permission.CAMERA，允许应用使用麦克风时需添加麦克风权限：ohos.permission.MICROPHONE，具体申请方式请参考声明权限。

根据Web中的权限请求向用户手动授权，示例代码如下：

收起
自动换行
深色代码主题
复制
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { abilityAccessCtrl, Permissions } from '@kit.AbilityKit';

@Entry
@Component
struct WebPermissionsPage {
  controller: webview.WebviewController = new webview.WebviewController();
  uiContext: UIContext = this.getUIContext();

  requestPermissions(arr: Array<string>) {
    let permissionList: Array<Permissions> = [];
    arr.forEach((it) => {
      if (it.toString() === 'TYPE_VIDEO_CAPTURE') {
        permissionList.push('ohos.permission.CAMERA');
        permissionList.push('ohos.permission.MICROPHONE');
      } else if (it.toString() === 'TYPE_AUDIO_CAPTURE') {
        permissionList.push('ohos.permission.MICROPHONE');
      }
    });
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(this.getUIContext().getHostContext() as Context, permissionList)
      .then((data) => {
        console.info('data permissions:' + data.permissions);
        console.info('data authResults:' + data.authResults);
      }).catch((error: BusinessError) => {
      console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
    });
  }

  build() {
    Column() {
      Web({ src: $rawfile('webPermissions.html'), controller: this.controller })
        .fileAccess(false)
        .geolocationAccess(false)
        .metaViewport(true)
        .onPermissionRequest((event) => {
          if (event) {
            this.requestPermissions(event.request.getAccessibleResource());
            this.uiContext.showAlertDialog({
              title: 'title',
              message: 'text',
              primaryButton: {
                value: 'deny',
                action: () => {
                  event.request.deny();
                }
              },
              secondaryButton: {
                value: 'onConfirm',
                action: () => {
                  event.request.grant(event.request.getAccessibleResource());
                }
              },
              cancel: () => {
                event.request.deny();
              }
            });
          }
        });
    };
  }
}

webPermissions.html示例代码如下：

收起
自动换行
深色代码主题
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<video id="video" autoplay="autoplay"></video>
<canvas id="canvas"></canvas>
<br>
<input type="button" title="HTML5摄像头" style="width: 200px; height: 40px;" value="开启摄像头" onclick="getMedia()"/>
<script>
    function getMedia() {
       let constraints = {
          video: {width: 500, height: 500},
          audio: true
       };
       // 获取video摄像头区域
       let video = document.getElementById("video");
       // 返回的Promise对象
       let promise = navigator.mediaDevices.getUserMedia(constraints);
       // then()异步，调用MediaStream对象作为参数
       promise.then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
       });
    }
   function test(text) {
      let output = document.getElementById("container");
      output.innerText = text;
      return 'html_' + text;
    }
</script>
<div>
    <span>message: </span> <span id="container"></span>
</div>
</body>
</html>

常见FAQ

Q：通过event.request.getAccessibleResource获取网页所请求的权限类型有（TYPE_MIDI_SYSEX、TYPE_VIDEO_CAPTURE 、TYPE_AUDIO_CAPTURE、TYPE_SENSOR）四种，如何通过这四种枚举判断是请求了什么权限？

A：ProtectedResourceType枚举有4种类型：

TYPE_MIDI_SYSEX目前还不支持申请使用midi设备相关的权限；
TYPE_VIDEO_CAPTURE是视频捕获资源，可申请ohos.permission.CAMERA相机权限；
TYPE_AUDIO_CAPTURE是音频捕获资源，可申请ohos.permission.MICROPHONE麦克风权限；
TYPE_SENSOR是传感器资源，可申请ohos.permission.ACCELEROMETER加速度传感器和ohos.permission.GYROSCOPE陀螺仪传感器。

具体使用详情可以参考文档：onPermissionRequest和使用运动和方向传感器监测设备状态。

Scroll内Web嵌套其他组件时滑动优先级设置

如何处理H5页面的定时器退到后台不执行问题

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问智能客服提问