楼主可以参考下面步骤

在module.json5文件配置’ohos.permission.MICROPHONE’话筒权限。

{
  "module" : {
    // ...
    "requestPermissions":[
      {
        "name" : "ohos.permission.MICROPHONE",
        "reason": "$string:reason",
        "usedScene": {
          "abilities": [
            "FormAbility"
          ],
          "when":"inuse"
        }
      },
    ]
  }
}

Web组件通过onPermissionRequest方法获取话筒权限请求。代码示例如下：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { abilityAccessCtrl } from '@kit.AbilityKit';

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

  aboutToAppear() {
    let atManager = abilityAccessCtrl.createAtManager();
    // 通过onPermissionRequest获取权限请求
    atManager.requestPermissionsFromUser(this.getUIContext().getHostContext(), ['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('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .fileAccess(true)
        .domStorageAccess(true)
        .onPermissionRequest((event) => {
          if (event) {
            this.getUIContext().showAlertDialog({
              title: '麦克风权限请求',
              message: '是否允许获取麦克风权限',
              primaryButton: {
                value: 'deny',
                action: () => {
                  event.request.deny();
                }
              },
              secondaryButton: {
                value: 'onConfirm',
                action: () => {
                  event.request.grant(event.request.getAccessibleResource());
                }
              },
              cancel: () => {
                event.request.deny();
              }
            })
          }
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Navigator.mediaDevices.getUserMedia请求摄像头及录音权限无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼

看看这个：在Web中打开摄像头和麦克风

应用侧代码：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { abilityAccessCtrl } from '@kit.AbilityKit';

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

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
    // 获取权限请求通知，点击onConfirm按钮后，拉起摄像头和麦克风。
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(this.uiContext.getHostContext(), ['ohos.permission.CAMERA', '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('index.html'), controller: this.controller })
        .onPermissionRequest((event) => {
          if (event) {
            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();
              }
            })
          }
        })
    }
  }
}

前端页面index.html代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<video id="video" width="500px" height="500px" autoplay></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<br>
<input type="button" title="HTML5摄像头" 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();
    }).catch(function(err) {
        console.info(err.name + ": " + err.message);
    });
  }
</script>
</body>
</html>

h691938207 3楼作者

1、如果是在浏览器里面使用 navigator.mediaDevices.getUserMedia，没有出现权限弹窗。那么请确保使用的是https域名。本地调试，可使用mkcert，解决本地https问题。

示例代码：

<!-- index.html -->

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>

    <body>
        <div>
            <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()" />
        </div>

        <div>
            <video id="video" width="400px" height="400px" autoplay="autoplay"></video>
        </div>

        <script>
            async function getMedia() {
                const video = document.getElementById('video')

                const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })

                video.srcObject = stream

                await video.play()
            }
        </script>
    </body>
</html>

2、如果是App内web的h5使用navigator.mediaDevices.getUserMedia，是需要在web和应用内申请权限的。参考配置

module.json5 -> requestPermissions

   "requestPermissions": [
      {
        "name": "ohos.permission.MICROPHONE",
        "reason": "$string:microphone_permission",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      },
      {
        "name": "ohos.permission.CAMERA",
        "reason": "$string:camera_permission",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      }
   ]

web 收到获取权限请求：

Web()
.onPermissionRequest((event) => {
        if (event) {
          const list = event.request.getAccessibleResource()
          const permissions = list.map(e => {
            if (e === ProtectedResourceType.AUDIO_CAPTURE) {
              return 'ohos.permission.MICROPHONE'
            }
            return 'ohos.permission.CAMERA'
          })

          this.requestPermission(permissions, (granted: boolean) => {
            if (granted) {
              event.request.grant(list);
            } else {
              event.request.deny()
              let text = '无法使用麦克风，请前往设置打开权限'
              if (list.includes(ProtectedResourceType.VIDEO_CAPTURE)) {
                text = '无法使用相机拍摄，请前往设置打开权限'
              }
              this.denyAlert(text)
            }
          })
        }
      })

bupafengyu 4楼

楼主参考下这篇帖子webview嵌入的页面需要页面的麦克风权限试试呢，主要思路是先在ArkTS中通过requestPermissionsFromUser获取用户授权后，再通过ArkWeb的onPermissionRequest接口进行处理

phonegap100 5楼

好的，感谢，我看下，

yuanlaile 6楼

您好，请问下，我这边使用的是原生的 H5 应用，无法引入’@kit.ArkWeb’、’@kit.BasicServicesKit’、’@kit.AbilityKit’，这几个依赖包，还有其它的方法吗？

nodeper 7楼

@kit.ArkWeb、@kit.BasicServicesKit、@kit.AbilityKit这几个依赖包是在ArkTS文件中引入的，比如@kit.ArkWeb是用来引入Web组件作为加载H5页面的容器的，你正常新建一个ets工程，引入这些包后，再用Web容器加载你开发的H5应用，

wuwangju 8楼

在HarmonyOS Next中，Navigator.mediaDevices.getUserMedia 接口请求摄像头和录音权限时，若权限申请无效，通常与权限配置或API调用方式有关。

首先，确保在module.json5配置文件中正确声明了ohos.permission.CAMERA和ohos.permission.MICROPHONE权限，并配置了对应的权限使用场景（abilities或stage）。

其次，在调用getUserMedia前，必须使用系统提供的权限申请API（如requestPermissionsFromUser）动态申请权限。仅配置静态权限声明不足以触发系统弹窗。

此外，需确认调用时机符合系统要求，例如在应用启动或页面可见时申请。权限申请结果需在对应的回调函数中处理。

sinazl 9楼

在HarmonyOS Next中，Navigator.mediaDevices.getUserMedia 属于Web API，其权限调用依赖于系统WebView的底层实现。如果此方法无效，通常是因为系统对Web端的媒体设备访问权限管理更为严格，或者该API在当前的HarmonyOS Next版本中尚未得到完整支持。

建议直接使用HarmonyOS Next的原生权限申请与媒体采集能力，这是最稳定可靠的方式：

申请权限：在module.json5文件中声明所需权限，例如：
```
"requestPermissions": [
  {
    "name": "ohos.permission.CAMERA"
  },
  {
    "name": "ohos.permission.MICROPHONE"
  }
]
```
运行时通过abilityAccessCtrl相关API动态申请权限。
使用媒体采集API：通过@ohos.multimedia.camera、@ohos.multimedia.audio等系统原生接口直接调用摄像头和麦克风，例如使用cameraManager类进行拍照、录像，或使用audioCapturer进行录音。

这种方式能确保与HarmonyOS Next的权限管理系统完全兼容，避免Web API的兼容性问题。如果应用本身是Web应用，需考虑通过ArkWeb等桥接机制与原生层交互，或推动HarmonyOS Next后续版本对Web API的进一步支持。