HarmonyOS 鸿蒙Next Web申请麦克风权限的问题

HarmonyOS 鸿蒙Next Web申请麦克风权限的问题

现象:H5通过js调用麦克风授权，授权成功后，web端使用麦克风录音，依然判定为‘未授权’。

 提问:H5使用麦克风录音，需要哪些流程

2 回复

目前鸿蒙申请权限只能在ets侧，onPermissionRequest申请权限，具体权限申请参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/request-user-authorization-V5
ets侧

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { abilityAccessCtrl } from '@kit.AbilityKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebPage {
  controller: webview.WebviewController = new webview.WebviewController();
  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.MICROPHONE']).then((data) => {
      console.info('data:' + JSON.stringify(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('detail.html'), controller: this.controller })
        .javaScriptAccess(true)
        .fileAccess(true)
        .domStorageAccess(true)
        .mixedMode(MixedMode.All)
        .onPermissionRequest((event) => {
          if (event) {
            AlertDialog.show({
              title: '录音',
              message: '',
              primaryButton: {
                value: '取消录音', action: () => {
                  event.request.deny();
                }
              },
              secondaryButton: {
                value: '开始录音', action: () => {
                  event.request.grant(event.request.getAccessibleResource());
                }
              },
              cancel: () => {
                event.request.deny();
              }
            })
          }
        })
    }
  }
}

html侧：

<!--index.html--> 
<!DOCTYPE html>
<html>
<head><title>测试网页</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <style>
        .container {
          display: flex; /* 使用flex布局 */
          justify-content: center; /* 水平居中 */
          align-items: center; /* 垂直居中 */
          height: 200px; /* 容器高度 */
          border: 1px solid #000; /* 边框，以便可见性 */
        }
    </style>
</head>
<body>
<div class="container">
    <button id="recordButton">录音</button>
    <button id="playButton" disabled>播放</button>
    <button id="stopButton" disabled>停止</button>
    <audio id="player" controls></audio>
</div>
</body>
<script>
     let stream; const recordButton = document.getElementById('recordButton'); const playButton = document.getElementById('playButton'); const stopButton = document.getElementById('stopButton'); const player = document.getElementById('player'); recordButton.addEventListener('click', async () => { const constraints = { audio: true }; try { stream = await navigator.mediaDevices.getUserMedia(constraints); const mediaRecorder = new MediaRecorder(stream); const chunks = []; mediaRecorder.addEventListener('dataavailable', event => { chunks.push(event.data); }); mediaRecorder.addEventListener('stop', () => { const blob = new Blob(chunks, { type: 'audio/mpeg-3' }); chunks.length = 0; playButton.disabled = false; stopButton.disabled = true; const url = URL.createObjectURL(blob); player.src = url; }); mediaRecorder.start(); stopButton.disabled = false; recordButton.disabled = true; } catch (error) { console.error('Error capturing audio:', error); } }); stopButton.addEventListener('click', () => { stream.getTracks().forEach(track => track.stop()); mediaRecorder.stop(); recordButton.disabled = false; stopButton.disabled = true; }); playButton.addEventListener('click', () => { player.play(); });
</script>
</html>

更多关于HarmonyOS 鸿蒙Next Web申请麦克风权限的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


关于HarmonyOS 鸿蒙Next Web申请麦克风权限的问题，以下是一些可能的原因和解决方案：

首先，请确保您的Web页面在请求麦克风权限时，遵循了最新的Web权限申请规范。使用正确的HTML5 API（如navigator.mediaDevices.getUserMedia）进行权限请求，并在页面加载时向用户清晰展示权限请求的用途。

其次，由于不同版本的鸿蒙系统可能对浏览器权限管理有细微差异，建议检查并确认您的鸿蒙系统版本是否支持Web页面的麦克风权限请求。在鸿蒙Next系统中，Web应用可能需要通过系统授权或用户授权来获得麦克风权限。

再者，华为自带浏览器可能内置了特定的权限管理策略，导致Web页面无法直接申请到相关权限。在这种情况下，您可以尝试将Web页面封装为原生应用，从而绕过浏览器的权限限制。

最后，如果以上方法均无法解决问题，可能是由于鸿蒙系统的安全策略或其他未知因素导致。此时，建议您联系鸿蒙系统的官方客服以获取更详细的帮助和支持。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部