Vue.js结合Element-UI开发摄像头弹窗组件时出现TypeError: Cannot set property 'srcObject' of undefined错误的技术求助

看起来你遇到的问题核心是无法获取到video元素的引用，再加上异步初始化的时序问题，导致赋值失败。我来一步步帮你排查和修复：

核心问题分析 #

1. video元素未被渲染：你的<video>标签被包裹在v-show="turnonVideoCamera"的容器里，但在showDialog方法中并没有将turnonVideoCamera设为true，这就导致弹窗显示时，video元素根本没有被挂载到DOM上，this.$refs.videoBackup自然是undefined。
2. 异步初始化的时序风险：_initMethod是异步函数，获取媒体流需要时间，如果用户在初始化完成前点击按钮，localStream还没赋值，后续操作也会出问题。
3. videoConf的潜在错误：你的computed属性videoConf依赖this.videoDevice，但this.videoDevice是异步获取的，在它赋值前访问videoConf会得到deviceId: undefined，可能导致getUserMedia调用失败。

分步修复方案 #

1. 确保video元素被正确渲染 #

首先在data中添加turnonVideoCamera的初始化：

data() {
  return {
    // ... 其他属性
    turnonVideoCamera: false,
  }
}

然后修改showDialog方法，先打开video容器的显示，再通过$nextTick获取DOM：

showDialog(){
  this.turnonVideoCamera = true; // 先让video容器渲染
  this.dialogVisible = true;
  this.$nextTick(() => {
    // 增加判断，避免引用或流为空的情况
    if (this.$refs.videoBackup && this.localStream) {
      this.$refs.videoBackup.srcObject = this.localStream;
    }
  })
}

2. 处理异步初始化的错误与时序 #

给_initMethod添加错误捕获，同时优化媒体流请求的逻辑：

async _initMethod(){
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === 'videoinput');
    this.videoDevice = videoDevices.length > 0 ? videoDevices[0] : null;
    
    // 容错处理：没有摄像头时只请求音频
    const mediaConstraints = {
      audio: true,
      video: this.videoDevice ? this.videoConf : false
    };
    
    this.localStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
  } catch (err) {
    console.error('获取音视频流失败:', err);
    this.$message.error('无法访问摄像头/麦克风，请检查浏览器权限设置');
  }
}

还可以给按钮添加禁用状态，防止用户在初始化完成前点击：

<el-button v-show="false" @click="quickMeeting" :style="shadow" type="primary" :disabled="!localStream">
  <i class="el-icon-video-camera"></i> Reunión rápida
</el-button>

3. 优化videoConf的容错逻辑 #

修改computed属性，避免videoDevice未赋值时出现错误：

computed:{
  videoConf: function(){
    return this.videoDevice ? {
      deviceId: this.videoDevice.deviceId,
      width: 1920,
      height: 603
    } : false;
  }
}

4. 弹窗关闭时清理资源 #

为了避免内存泄漏，在弹窗关闭时释放媒体流：

watch: {
  dialogVisible(newVal) {
    if (!newVal && this.localStream) {
      // 停止所有媒体轨道
      this.localStream.getTracks().forEach(track => track.stop());
      this.localStream = null;
      this.turnonVideoCamera = false;
    }
  }
}

最后测试 #

做完这些修改后，重新运行项目：

• 页面加载时会自动请求音视频权限
• 点击按钮后弹窗会显示，video元素能正确获取到媒体流
• 关闭弹窗时会自动释放资源，避免占用设备

内容的提问来源于stack exchange，提问作者David Asturizaga Orias