uni-app小程序sdk renderjs 无法调用 window.navigator.mediaDevices.getUserMedia

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app小程序sdk renderjs 无法调用 window.navigator.mediaDevices.getUserMedia

使用renderjs 调用 window.navigator.mediaDevices.getUserMedia 报错阻塞页面

同样的代码在同手机的safari浏览器中可正常执行

2 回复

在uni-app中,特别是在使用renderjs进行开发时,由于renderjs运行环境与标准的浏览器环境有所不同,一些浏览器特有的全局对象和方法可能无法直接使用,比如window.navigator.mediaDevices.getUserMedia。这是因为renderjs主要是为了提高页面的渲染性能和交互能力而设计的,它运行在一个受限的上下文中,通常不包括完整的浏览器API。

然而,uni-app提供了其他方式来调用原生功能,包括调用设备的摄像头和麦克风。这通常通过uni-app的原生插件或者API来实现。以下是一个如何在uni-app中调用摄像头的基本示例,使用uni-app提供的chooseImage API,虽然这不是直接调用getUserMedia,但可以实现类似的功能:

// 在页面的methods中定义一个方法来调用摄像头
methods: {
    chooseCamera() {
        uni.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['camera'], // 从相机选择
            success: (res) => {
                const tempFilePaths = res.tempFilePaths;
                console.log(tempFilePaths);
                // 可以在这里处理选中的图片,比如预览或者上传
            }
        });
    }
}

// 在页面的模板中,添加一个按钮来触发调用摄像头的方法
<template>
    <view>
        <button @click="chooseCamera">打开摄像头拍照</button>
    </view>
</template>

如果你确实需要使用getUserMedia来实现更复杂的功能,比如实时视频流处理,你可能需要考虑以下方案:

  1. 使用云函数:你可以将需要调用getUserMedia的逻辑放在云函数中,然后通过uni-app的云开发接口来调用这个云函数。云函数运行在服务器端,拥有完整的浏览器环境支持。

  2. 自定义原生插件:如果你有能力开发原生插件,你可以编写一个原生插件来封装getUserMedia的调用,然后在uni-app中通过插件接口来调用这个原生功能。

  3. 使用H5页面:如果上述方案都不可行,你可以考虑将需要使用getUserMedia的部分功能做成一个单独的H5页面,然后在uni-app中通过web-view组件来嵌入这个H5页面。

请注意,这些方案都有各自的限制和复杂性,选择哪种方案取决于你的具体需求和开发能力。

回到顶部