HarmonyOS鸿蒙Next中app有摄像头和麦克风权限，但内嵌的H5没法调取

HarmonyOS鸿蒙Next中app有摄像头和麦克风权限，但内嵌的H5没法调取 机型1：华为 P20
系统：鸿蒙3.0.0
型号：EML-AL00

机型2：nova 9 Pro
系统：鸿蒙4.0.0
型号：RTE-AL00

问题：在权限管理中，两个手机都给APP设置了摄像头、麦克风权限（允许应用拍摄照片和视频、允许应用录制音频、仅使用期间允许）。我的APP内嵌一个H5网页，网页使用的是https域名，使用navigator.mediaDevices.getUserMedia({audio:true, video:true})，提示权限被阻止。请教一下这个问题该如何处理。感谢！


更多关于HarmonyOS鸿蒙Next中app有摄像头和麦克风权限，但内嵌的H5没法调取的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

参考下这个

// xxx.ets
import web_webview from '@ohos.web.webview'
import abilityAccessCtrl, { PermissionRequestResult, Permissions } from '@ohos.abilityAccessCtrl';

@Entry
@Component
struct WebComponent {
 controller: web_webview.WebviewController = new web_webview.WebviewController()

 aboutToAppear() {
 // 配置Web开启调试模式
 web_webview.WebviewController.setWebDebuggingAccess(true);
 let atManager = abilityAccessCtrl.createAtManager();
 atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
 .then(data => {
 let result: Array<number> = data.authResults;
 let hasPermissions1 = true;
 result.forEach(item => {
 if(item === -1) {
 hasPermissions1 = false;
 }
 })
 if (hasPermissions1) {
 console.info(" hasPermissions1")
 } else {
 console.info(" not hasPermissions1")
 }
 }).catch(() => {
 return;
 });
 }
 build() {
 Column() {
 Web({ src: 'https://www.bchrt.com/tools/webcam-test/', controller: this.controller })
 .onPermissionRequest((event) => {
 if (event) {
 AlertDialog.show({
 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()
 }
 })
 }
 })
 }
 }
}

还需在module.json5添加权限：

{
 "requestPermissions":[
 {
 "name": "ohos.permission.INTERNET"
 },
 {
 "name": "ohos.permission.CAMERA"
 },
 {
 "name": "ohos.permission.MICROPHONE"
 }
 ],
}

更多关于HarmonyOS鸿蒙Next中app有摄像头和麦克风权限，但内嵌的H5没法调取的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个也不行啊，怎么办呢，

  1. 两个机型OS版本不同，API版本应该也不同，权限处理方式也不同；先确认API级别；
  2. 是哪个机型上出现，还是两个都有问题？

对于API 9，即楼主 Nova 9 pro，module.json5 中申请的权限:

ohos.permission.CAMERA, ohos.permission.MICROPHONE 属于 user_grant 权限，所以光配置申请不够，需要有用户授权操作，需要参考【指南】文档中有关访问控制授权申请部分：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/accesstoken-guidelines-0000001493744016-V2

按照文档指导的步骤：1. 检查权限；2. 申请用户交互授权；3. 用户未授权情况处理；确认有了授权后才可继续进行访问操作；否则直接访问就会因权限不足被拒；

同时尽量遵循不在应用初次启用时申请过多权限，只在使用过程中相关访问需要时提示用户授权。

蹲，楼主找到解决办法了吗

在HarmonyOS鸿蒙Next中，即使应用拥有摄像头和麦克风权限，内嵌的H5页面可能无法直接调取这些硬件设备。这是因为鸿蒙系统的权限管理机制与WebView的权限管理是分开的。WebView作为应用内的浏览器组件，默认情况下并不继承宿主应用的硬件权限。

要解决这个问题，开发者需要在应用层面对WebView进行配置，以允许其访问摄像头和麦克风。具体来说，可以通过以下步骤实现：

  1. 配置WebView权限：在应用的config.json文件中，确保WebView组件具有访问摄像头和麦克风的权限。例如：

    {
  "module": {
    "abilities": [
      {
        "name": ".MainAbility",
        "permissions": [
          "ohos.permission.CAMERA",
          "ohos.permission.MICROPHONE"
        ]
      }
    ]
  }
}

  2. 启用WebView的硬件访问：在代码中，通过设置WebView的属性来启用摄像头和麦克风的访问。例如：

    const webView = this.$element('webView');
webView.setWebContentsDebuggingEnabled(true);
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);

  3. 处理H5页面的请求：在H5页面中，确保使用标准的Web API（如getUserMedia）来请求摄像头和麦克风访问。例如：

    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 处理媒体流
  })
  .catch(error => {
    console.error('Error accessing media devices.', error);
  });

通过以上步骤，可以确保在鸿蒙Next中，内嵌的H5页面能够正常调取摄像头和麦克风。

在HarmonyOS鸿蒙Next中，如果App已获得摄像头和麦克风权限，但内嵌的H5无法调取，可能是以下原因：

  1. H5未申请权限：H5页面需要通过JavaScript API（如getUserMedia）明确申请权限。
  2. WebView配置问题：确保WebView已启用相关权限，如setMediaPlaybackRequiresUserGesture(false)。
  3. 系统限制：某些系统版本或设备可能对H5调用硬件设备有额外限制。
  4. 安全策略：浏览器或WebView可能因安全策略阻止H5访问设备。

建议检查H5代码和WebView配置，确保权限申请和硬件访问逻辑正确。

回到顶部