使用Peer.js开发视频聊天平台时遇srcObject未定义错误求助

1. 修复 TypeError: Cannot set properties of undefined (setting 'srcObject') #

这个错误的核心是代码执行时window.localAudio对象不存在，可从以下两方面解决：

• 检查DOM元素：确认video.php页面中存在<audio id="localAudio"></audio>元素，没有的话立即添加。
• 确保DOM加载完成后执行代码：
  • 把createRoom相关逻辑放在DOMContentLoaded事件中，或者将JS代码移至页面底部；
  • 也可以在设置srcObject前增加存在性判断：

    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then( stream => {
        window.localStream = stream; 
        if(window.localAudio) {
            window.localAudio.srcObject = stream; 
            window.localAudio.autoplay = true; 
        }
    }).catch( err => {
        console.log("u got an error:" + err)
    });
    

2. 修复加入房间后无法共享音视频的问题 #

2.1 统一媒体流管理，避免重复获取 #

createRoom中重复调用getUserMedia会导致流变量混乱，修改为只获取一次流并统一使用：

function createRoom(room) {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then( stream => {
        window.localStream = stream; 
        if(window.localAudio) {
            window.localAudio.srcObject = stream; 
            window.localAudio.autoplay = true; 
        }
        window.local_stream = stream;
        setLocalStream(stream);

        console.log("Creating Room")
        room_id = PRE + room + SUF;
        peer = new Peer(room_id)
        peer.on('open', (id) => {
            console.log("Peer Connected with ID: ", id)
            notify("Waiting for peer to join.")
        })
        peer.on('call', (call) => {
            call.answer(window.local_stream);
            call.on('stream', (stream) => {
                setRemoteStream(stream)
            })
            currentPeer = call;
        })
    }).catch( err => {
        console.log("u got an error:" + err)
    });
}

2.2 验证setRemoteStream函数逻辑 #

确保该函数能正确找到远程媒体元素并设置流：

function setRemoteStream(stream) {
    const remoteVideo = document.getElementById('remoteVideo');
    if(remoteVideo) {
        remoteVideo.srcObject = stream;
        remoteVideo.autoplay = true;
        remoteVideo.muted = false;
    }
}

2.3 确认房间ID一致性 #

检查PRE和SUF常量的定义，确保createRoom生成的房间ID与joinRoom使用的完全一致，避免前缀/后缀拼写错误。

2.4 确保HTTPS运行环境 #

getUserMedia API要求必须在HTTPS环境下运行（localhost除外），确认你的部署服务器已配置HTTPS。

2.5 检查Peer.js服务器配置 #

如果使用自定义Peer服务器，初始化Peer时需明确指定服务器信息：

peer = new Peer(room_id, {
    host: '你的Peer服务器地址',
    port: 对应端口,
    path: '/peerjs'
});

内容的提问来源于stack exchange，提问作者Conta