ReactJS+PeerJS视频通话报错：Cannot set properties of null (setting 'srcObject')

核心问题定位 #

这个报错的本质是你尝试给一个不存在的DOM元素设置srcObject——也就是通过getElementById或querySelector获取视频元素时返回了null，常见原因及修复方案如下：

具体排查与修复方案 #

1. 确保DOM加载完成后再执行代码 #

如果你的JavaScript代码在DOM元素渲染前就运行，必然会获取到null：

• 若用原生JS，把脚本放在HTML的</body>标签末尾，或用DOMContentLoaded包裹逻辑：

  document.addEventListener('DOMContentLoaded', async () => {
    const localVideo = document.getElementById('local-video');
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    localVideo.srcObject = stream;
  });
  

• 若用React/Vue等框架，必须在组件挂载生命周期（如React的useEffect、Vue的onMounted）中执行获取元素和设置流的操作，确保组件已渲染到DOM中。

2. 核对DOM元素的选择器/ID #

检查代码中使用的元素ID、类名或选择器，和HTML中的完全一致——比如代码里写document.getElementById('localVideo')，但HTML里是<video id="local-video"></video>，大小写、字符差异都会导致获取失败。

3. 验证媒体流有效性与正确赋值 #

虽然你尝试了currentStream.streams[0]，但仍需确认流本身是否正常：

• 在设置前添加日志排查：

  console.log('当前媒体流:', currentStream);
  const videoEl = document.getElementById('your-video-id');
  
  if (!videoEl) {
    console.error('未找到目标视频元素');
    return;
  }
  if (!currentStream) {
    console.error('媒体流获取失败');
    return;
  }
  
  // 若为RTCPeerConnection的远端流，直接用event.streams[0]；本地流直接赋值即可
  videoEl.srcObject = currentStream;
  

• 若处理远端流，确保正确监听ontrack事件：

  peerConnection.ontrack = (event) => {
    const remoteVideo = document.getElementById('remote-video');
    if (remoteVideo && !remoteVideo.srcObject) {
      remoteVideo.srcObject = event.streams[0];
    }
  };
  

4. 框架中优先使用元素引用而非原生DOM查询 #

如果用React，避免直接用document.getElementById，推荐用useRef获取元素：

import { useRef, useEffect } from 'react';

function VideoCall() {
  const localVideoRef = useRef(null);

  useEffect(() => {
    const initMedia = async () => {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      if (localVideoRef.current) {
        localVideoRef.current.srcObject = stream;
      }
    };
    initMedia();
  }, []);

  return <video ref={localVideoRef} autoPlay playsInline />;
}

额外检查项 #

• 确认浏览器已授予摄像头/麦克风权限，可在浏览器设置中查看权限状态
• 检查WebRTC相关依赖版本兼容性，尝试重新安装依赖：npm install或yarn install

内容的提问来源于stack exchange，提问作者Phoenix Paulina Schmid