uni-app项目H5发行后,调用uni.chooseVideo无法唤起摄像头进行拍摄

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

uni-app项目H5发行后,调用uni.chooseVideo无法唤起摄像头进行拍摄

13 回复

这取决于宿主浏览器是否支持。
阅读 uni.chooseVideo 文档,在注意部分的第一条提到了 “sourceType 值在 H5 平台根据浏览器的不同而表现不同,一般不可限制仅使用相册,部分浏览器也无法限制是否使用相机。”
我创建新的项目,打包 h5 之后,在安卓微信中可以正常唤起摄像头录制功能,测试其他浏览器不支持,只允许使用相册选择视频。
你可能需要选择合适的使用环境。


在安卓企业微信里面就没有录像这个选项,苹果的可以

回复 y***@kekeinfo.com: 我也是, 你解决了吗? 调用客户端jssdk做吗?

刚试了,可以的,你试试这段代码 <template>
<view>
<text>hello</text>
<button @tap=“test”>click me</button>

</view>
</template>

<script> export default { data() { return { src: '' } }, methods: { test: function() { var self = this; uni.chooseVideo({ sourceType: ['camera', 'album'], success: function(res) { self.src = res.tempFilePath; } }); } } } </script> <style> </style>

实际运行效果取决于使用什么浏览器运行,我测试安卓微信可以调用,你测试的哪些平台可以使用,可以做个补充吗?

uni-app中的uni.chooseImage分发为h5后。实际上是使用<input type="file" accept="image/*" capture="environment" />方式来模拟打开相册的。这种方式依赖运行的宿主环境。不同浏览器的支持情况也是不一样的。
const fileDom = document.createElement(‘input’);
fileDom.type = ‘file’;
fileDom.accept = ‘image/*’;
fileDom.capture = ‘environment’;

    fileDom.value = '';    
    fileDom.style.height = '0';    
    fileDom.style.width = '0';    
    fileDom.style.position = 'absolute';    
    fileDom.style.opacity = 0;    
    (document.querySelector('uni-app') || document.body).appendChild(fileDom);    
    fileDom.click();<br>

目前我也遇到这种情况,有解决方案吗

看我评论。约束用户的使用环境,微信打开功能更完整,其他浏览器打开要考虑不能使用摄像头的情况。无论是做文案提示,还是做入口根据浏览器展示不同形式。

回复 DCloud_UNI_OttoJi: 我这边做的测试是安卓的企业微信内打开的宿主环境,安卓基本都不支持,如果我想要做兼容,有相关解决方案吗

回复 d***@qq.com: 这块不属于 uni-app 的范围了。如果是企业微信,我记得企业微信是可以使用 js-sdk 的,可以参考 https://developer.work.weixin.qq.com/document/path/90495 ,后续复制粘贴也需要 js-sdk 的能力才能用

回复 DCloud_UNI_OttoJi: 这样的吗?确定吗?因为我再企业微信相当于只是套用了我使用uniapp编写的一个h5应用而已,需要嵌套进入jssdk?

回复 d***@qq.com: 这是系统限制问题,你我只是给出其中一个解决方案,是否满足你的场景,你需要自己来判断

uni-app 项目中,如果你在 H5 发行后调用 uni.chooseVideo 无法唤起摄像头进行拍摄,可能是由于以下原因导致的:

1. 浏览器兼容性问题

  • uni.chooseVideo 在 H5 端依赖于浏览器的 input 标签的 capture 属性来调用摄像头。不同浏览器对 capture 属性的支持程度不同,可能会导致无法唤起摄像头。
  • 确保你使用的浏览器支持 capture 属性,并且浏览器版本较新。

2. H5 环境限制

  • 在 H5 环境中,uni.chooseVideo 的实现依赖于浏览器的 input 标签的 capture 属性,但某些浏览器可能不支持直接调用摄像头进行视频拍摄。
  • 你可以尝试在移动端浏览器(如 Chrome、Safari)中测试,因为这些浏览器通常对 capture 属性的支持更好。

3. 权限问题

  • 确保浏览器有权限访问摄像头。如果浏览器没有获取到摄像头权限,uni.chooseVideo 将无法正常工作。
  • 你可以在浏览器的设置中检查摄像头权限,并确保已经授予了访问权限。

4. 代码实现问题

  • 确保你在调用 uni.chooseVideo 时传递了正确的参数。例如,你可以设置 sourceType['camera'],以确保直接从摄像头拍摄视频。
uni.chooseVideo({
    sourceType: ['camera'],
    success: function (res) {
        console.log('视频路径:', res.tempFilePath);
    },
    fail: function (err) {
        console.log('选择视频失败:', err);
    }
});

5. H5 端不支持直接调用摄像头

  • 在某些情况下,H5 端可能无法直接调用摄像头进行视频拍摄。你可以考虑使用 uni.chooseImage 来调用摄像头拍摄照片,或者使用第三方库(如 WebRTC)来实现视频拍摄功能。

6. 调试和日志

  • uni.chooseVideofail 回调中打印错误信息,以便更好地了解问题的原因。
uni.chooseVideo({
    sourceType: ['camera'],
    success: function (res) {
        console.log('视频路径:', res.tempFilePath);
    },
    fail: function (err) {
        console.log('选择视频失败:', err);
    }
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!