HarmonyOS 鸿蒙Next浏览器获取摄像头权限

HarmonyOS 鸿蒙Next浏览器获取摄像头权限

我现在web应用在鸿蒙手机浏览器上面调用摄像头权限，

const constraints = {
    video: {
        deviceId: currentDeviceId.value ? { ideal: currentDeviceId.value } : undefined,
        facingMode: !currentDeviceId.value ? { ideal: 'environment' } : undefined,
        width: { ideal: 1280 },
        height: { ideal: 720 },
        focusMode: 'continuous',
        whiteBalanceMode: 'continuous',
        exposureMode: 'continuous'
    }
}

navigator.mediaDevices.getUserMedia(constraints)

如果指定了deviceId或者facingMode中任意一个值就会报错，DOMException{code:(PARSE_ERROR)}。不指定的话，打开默认就是前置摄像头，请问有解决办法吗？


更多关于HarmonyOS 鸿蒙Next浏览器获取摄像头权限的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

HarmonyOS 调用后置摄像头

HarmonyOS 后置摄像头示例

<video id="video" autoplay playsinline></video>
<button id="switchCamera">切换摄像头</button>

let currentFacingMode = 'environment'; // 默认使用后置摄像头（'environment'）
const videoElement = document.getElementById('video');
const switchButton = document.getElementById('switchCamera');

// 初始化摄像头
async function initCamera() {
    try {
        // 请求摄像头权限并获取视频流
        const stream = await navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: currentFacingMode // 'environment' 表示后置摄像头
            }
        });
        videoElement.srcObject = stream;
        console.log('摄像头已启动');
    } catch (error) {
        console.error('摄像头访问失败:', error);
        alert('无法访问摄像头，请检查权限设置！');
    }
}

// 切换摄像头（前置/后置）
async function switchCamera() {
    // 切换 facingMode
    currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
    await initCamera(); // 重新初始化摄像头
}

// 页面加载后启动摄像头
window.onload = initCamera;

// 绑定切换摄像头按钮事件
switchButton.addEventListener('click', switchCamera);

更多关于HarmonyOS 鸿蒙Next浏览器获取摄像头权限的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


刚看到回复，这个方法不行await navigator.mediaDevices.getUserMedia()方法内，只要配置了{deviceId:'currentDeviceId.value'}或者{facingMode:'environment'}这两个属性任意一个就加载不到摄像头，如果配置为{video:true}或者{deviceId:undefined}就能立马获取到前置摄像头，但是没办法切换到后置，因为后置还是获取不到，

在HarmonyOS应用开发中，获取摄像头权限需在config.json的"module"下添加权限声明：

"reqPermissions": [
    {
        "name": "ohos.permission.CAMERA"
    }
]

运行时通过abilityContext.requestPermissionsFromUser()动态申请权限：

let context =... //获取abilityContext
let permissions: Array<string> = ['ohos.permission.CAMERA']
context.requestPermissionsFromUser(permissions).then((data) => {
    console.log('权限申请结果:' + JSON.stringify(data))
})

注意：需在FA模型中使用abilityContext或stage模型使用UIAbilityContext。

在HarmonyOS Next浏览器中调用摄像头权限时遇到的问题，主要是由于浏览器对MediaDevices API的实现限制。针对DOMException(PARSE_ERROR)错误，建议：

  1. 简化constraints配置，避免同时指定deviceId和facingMode参数，这两个参数在某些浏览器实现中可能存在冲突。

  2. 可以尝试先通过enumerateDevices()获取可用设备列表，然后根据设备label或kind筛选后置摄像头：

const devices = await navigator.mediaDevices.enumerateDevices();
const backCamera = devices.find(device => 
    device.kind === 'videoinput' && 
    device.label.toLowerCase().includes('back')
);

if(backCamera) {
    constraints.video.deviceId = { exact: backCamera.deviceId };
}
  1. 对于focusMode等高级参数，部分移动浏览器可能不支持，建议先使用基础配置测试：
const basicConstraints = {
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        facingMode: { ideal: 'environment' }
    }
};

  1. 确保网页使用HTTPS协议，这是大多数现代浏览器访问媒体设备的强制要求。

  2. 检查HarmonyOS系统设置中是否已授予浏览器摄像头权限。

回到顶部