uni-app video 不显示摄像头预览

uni-app video 不显示摄像头预览

开发环境 版本号 项目创建方式
Mac 15.3.2 (24D81) HBuilderX 
产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：134.0.6998.166

App下载地址或H5网址：
[static-mp-eeaaf131-f61b-4010-ad07-f75cd812a4f1.next.bspapp.com](//ask.dcloud.net.cn/static-mp-eeaaf131-f61b-4010-ad07-f75cd812a4f1.next.bspapp.com)

示例代码：

``` html
<template>
<view class="rootView">  
<video ref="video" autoplay playsinline muted id="video" style="width: 100px; height: 100px;"></video>  
<button v-on:click="startRecording">开启摄像头</button>  
<button v-on:click="stopRecording">关闭摄像头</button>  
</view>
</template>

<script>
export default {
name: 'indexPage',
data: function() {
return {
mediaRecorder: null,
videoStream: '',
videoElement: null,
chunks: [],
}
},
onLoad() {
},
mounted() {  
},
methods: {  
async startRecording() {  
try {  
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });  
if(this.$refs.video) {  
this.$refs.video.srcObject = stream;  
}  
} catch (error) {  
console.error('Error accessing media devices.', error);  
}  
},  
stopRecording() {  
},  
stopCamera() {  
},  
test() {  
uni.chooseVideo({  
sourceType: ['camera', 'album'],  
success: function (res) {  
self.src = res.tempFilePath;  
}  
});  
}  
}
}
</script>

<style>

</style>

操作步骤： 直接点击打开摄像头按钮

预期结果： 显示预览画面

实际结果： 未显示画面

bug描述： web 端使用 video 显示摄像头预览时，未出现预览画面


更多关于uni-app video 不显示摄像头预览的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

权限申请了吗，普通的 h5 页面展示是否正常？是在浏览器打开还是微信打开？

更多关于uni-app video 不显示摄像头预览的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题的原因可能是H5环境下获取摄像头权限后没有正确绑定到video元素上。以下是解决方案：

  1. 确保在H5环境下使用正确的video元素引用方式。uni-app在H5平台会编译成普通HTML5，可以直接使用DOM API操作。

  2. 修改startRecording方法如下：

async startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ 
      audio: true, 
      video: true 
    });
    const video = document.getElementById('video');
    if(video) {
      video.srcObject = stream;
      video.onloadedmetadata = () => {
        video.play();
      };
    }
  } catch (error) {
    console.error('Error accessing media devices.', error);
  }
}

  1. 确保浏览器已授予摄像头权限。Chrome会在地址栏显示权限请求图标，点击允许访问摄像头和麦克风。

  2. 检查控制台是否有错误输出，特别是权限相关的错误。

  3. 如果仍不显示，尝试给video元素添加明确的宽度高度样式，如：

<video style="width:300px;height:300px;background:#000"></video>
  1. 在H5环境下，playsinline属性可能需要改为webkit-playsinline来兼容某些浏览器：
<video webkit-playsinline playsinline></video>
回到顶部