HarmonyOS鸿蒙Next中用uniapp的RenderJS来实现webrtc音视频通信，navigator.getUserMedia提示Permission denied
HarmonyOS鸿蒙Next中用uniapp的RenderJS来实现webrtc音视频通信，navigator.getUserMedia提示Permission denied
大致demo
实际申请权限是在这个界面之前就申请了，但是为了理解，我把申请代码贴一起了。
尝试用了以下三个都是提示权限问题，但是app已经申请权限了
- navigator.mediaDevices.getUserMedia
- navigator.getUserMedia
- navigator.webkitGetUserMedia
<template>
<view class="container" >
<view id="audio-container">
</view>
</view>
</template>
<script lang="renderjs" module="WebRtc">
export default {
data() {
return {
}
},
mounted() {
this.checkSupportWebrtc()
},
methods: {
// 检查webrtc支持
checkSupportWebrtc() {
navigator.getUserMedia({
audio: {
echoCancellation: true,
noiseSuppression: true
},
video: false,
},
(stream) => {
console.log("okok")
},
(error) => {
console.log("fail", error.message)
}
)
}
}
}
</script>
<script>
import {
checkPermission,
requestPermissions
} from '@/uni_modules/permission-handler-plus';
export default {
onLoad: function(option) {
// 检查并申请的UTS插件用法
checkPermission('Microphone', (result) => {
console.log(result)
if (result == "denied") {
requestPermissions({
names: ['Microphone'],
success: (result) => {
console.log(result)
},
fail: (error) => {
console.log(error)
}
})
}
})
checkPermission('Camera', (result) => {
console.log(result)
if (result == "denied") {
requestPermissions({
names: ['Camera'],
success: (result) => {
console.log(result)
},
fail: (error) => {
console.log(error)
}
})
}
})
},
methods: {
}
}
</script>
使用环境
mac air M3 系统是15.3.1 编辑器环境是
- HBuilder X - Release4.76.2025082103
- DevEco Studio 5.0.5 Release Build #DS-233.14475.28.36.5013230 Build Version: 5.0.13.230, built on August 18, 2025 Runtime version: 17.0.12+1-b1087.25 aarch64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. macOS 15.3.1 GC: G1 Young Generation, G1 Old Generation Memory: 2048M Cores: 8 Metal Rendering is ON Registry: idea.plugins.compatible.build=IC-233.14475.28 Non-Bundled Plugins: com.huawei.cangjie-support-plugin (5.0.3.906)
- 模拟器5.0.0.102,arm架构，api是12
预期与实际结果
1.app权限申请
- 预期：权限申请提示
- 实际：成功
2.checkSupportWebrtc可用并且打印“okok”
- 预期：checkSupportWebrtc打印“okok”
- 实际：打印“fail Permission denied ”
更多关于HarmonyOS鸿蒙Next中用uniapp的RenderJS来实现webrtc音视频通信，navigator.getUserMedia提示Permission denied的实战教程也可以访问 https://www.itying.com/category-93-b0.html
鸿蒙要求使用特定的权限标识符如ohos.permission.MICROPHONE和ohos.permission.CAMERA，而你的代码中使用的’Microphone’和’Camera’可能未正确映射到系统权限标识。另外鸿蒙Web组件内部需要单独处理onPermissionRequest事件，即使应用已获得系统权限，仍需通过该事件触发用户授权弹窗。
解决方案
步骤1/在manifest.json中声明系统级权限：
{
"appPermissions": [
"ohos.permission.MICROPHONE",
"ohos.permission.CAMERA"
]
}
步骤2/调整权限申请逻辑
// 主逻辑中申请系统权限
requestPermissions({
names: ['ohos.permission.MICROPHONE', 'ohos.permission.CAMERA'],
success: (result) => {
result.authResults.forEach((status, index) => {
if (status === 0) {
console.log(`${result.permissions[index]} granted`);
}
});
},
fail: (error) => {
console.error('Permission request failed:', error);
}
});
步骤3/在Web容器中添加事件监听：
<web-view src="..."
@permissionrequest="handlePermissionRequest">
</web-view>
<script>
export default {
methods: {
handlePermissionRequest(event) {
this.$refs.webview.showDialog({
title: '权限申请',
message: '是否允许访问麦克风？',
buttons: [{
text: '拒绝',
action: () => event.request.deny()
},{
text: '允许',
action: () => event.request.grant(['audio-capture'])
}]
});
}
}
}
</script>
步骤4/优化媒体设备检测逻辑
checkSupportWebrtc() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.error('WebRTC not supported');
return;
}
navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: true,
noiseSuppression: true
},
video: false
}).then(stream => {
console.log("Stream acquired:", stream.id);
// 处理媒体流
}).catch(error => {
console.error('getUserMedia error:', error.name);
});
}
更多关于HarmonyOS鸿蒙Next中用uniapp的RenderJS来实现webrtc音视频通信，navigator.getUserMedia提示Permission denied的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
没有报错，就是在uniapp的RenderJS（官方地址介绍https://uniapp.dcloud.net.cn/tutorial/renderjs.html）里面执行navigator.getUserMedia，（在安卓或者ios都可以正常使用）但是harmonyNext就走到了error里面去了，里面的message是提示Permission denied。
在HarmonyOS Next中使用UniApp的RenderJS实现WebRTC时，navigator.getUserMedia返回"Permission denied"通常是由于系统权限未授权。鸿蒙Next对敏感权限（如摄像头和麦克风）需要显式动态申请。请检查是否已在module.json5中声明ohos.permission.CAMERA和ohos.permission.MICROPHONE权限，并在调用前通过requestPermissionsFromUser完成授权。WebRTC API需在鸿蒙Next的Web环境中兼容支持。
