Блог

Я пытаюсь создать приложение для видеочата с WebRTC на основе учебника. Это мой второй раз, когда я работаю с socket.io. Предполагается, что в комнате видеочата будет отображаться видео любого пользователя, который заходит в эту комнату. Когда я захожу в комнату видеочата, мое видео отображается нормально, но когда я захожу в ту же комнату из другого браузера, видео новых пользователей не отображается в другом браузере. Первый браузер показывает идентификатор нового пользователя в консоли, но не отображает видео нового пользователя, который только что присоединился.

 
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
  host: '/',
  port: '3001'
})

const myVideo = document.createElement('video')
myVideo.muted = true


navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(stream => {
   addVideoStream(myVideo, stream)
    
    myPeer.on('call', call =>   {
        call.answer(stream)
        const video = document.createElement('video')
        call.on('stream', userVideoStream => {
            addVideoStream(video, userVideoStream)
    })     
})
    
    socket.on('user-connected', userId => {
        connectToNewUser(userId, stream) 
    })
})


myPeer.on('open', id => {
    socket.emit('join-room', ROOM_ID, id)
})

socket.on('user-connected', userId => {
    console.log('User connected:'   userId)

})


function connectToNewUser(userId, stream) {
    const call = myPeer.call(userId, stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
    })
    call.on('close', () => {
        video.remove()
    })
}

function addVideoStream(video, stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
  videoGrid.append(video)
}

 

Код, который должен заставить это работать, таков:

     myPeer.on('call', call =>   {
        call.answer(stream)
        const video = document.createElement('video')
        call.on('stream', userVideoStream => {
            addVideoStream(video, userVideoStream)
    })     
})

 

Любая помощь была бы очень признательна, так как я работал над этим вопросом весь день безрезультатно.

Так получается, что когда срабатывает событие «пользователь подключен», вызов connectToNewUser немедленно завершается ошибкой. Время ожидания за секунду до вызова connectToNewUser устранило мою проблему.

 
socket.on('user-connected', userId => {
  // user is joining
  setTimeout(() => {
    // user joined
    connectToNewUser(userId, stream)
  }, 1000)
})