Question

我正在使用WebRTC Socket.io库，ReactJS和NodeJS开发视频聊天应用程序，但是我是WebRTC的新手。在一个浏览器窗口中，视频聊天可以在2个对等方上进行，也可以在多个对等方上进行，但是，如果您使用其他浏览器，或转到其他PC（并访问托管的应用程序，并附带演示，可以{ {3}}），远程视频为空白，但是聊天功能有效，表明socket.io连接成功。该代码完全没有显示任何错误。我访问了许多关于SO的问题（例如，此here），但找不到有效的解决方案。如果它可以在一个浏览器中运行，并且socket.io连接成功，为什么不能在不同的浏览器中遍历？这是资源问题吗？ STUN或TURN服务器有问题吗？我已经测试了多个STUN / TURN服务器，包括stun.l.google.com:19302、stun1.l.google.com:19302、numb.viagenie.ca、stun:stun.services.mozilla.com等。确保通过one测试这些STUN服务器，并且我确信它可以工作，至少是第一个，因为它收集了一个“ srflx”候选对象。

Tricke ICE

这是我的socket.io连接和视频通话结构，完整代码可以在此公共GitHub 上找到，而视频通话的特定页面是此repo。

    socket = io.connect(server_url, { secure: true })

    socket.on('signal', this.gotMessageFromServer)

    socket.on('connect', () => {
      socket.emit('join-call', window.location.href)
      socketId = socket.id

      socket.on('chat-message', this.addMessage)

      socket.on('user-left', (id) => {
        let video = document.querySelector(`[data-socket="${id}"]`)
        if (video !== null) {
          elms--
          video.parentNode.removeChild(video)

          let main = document.getElementById('main')
          this.changeCssVideos(main)
        }
      })

      socket.on('user-joined', (id, clients) => {
        clients.forEach((socketListId) => {
          connections[socketListId] = new RTCPeerConnection(peerConnectionConfig)
          // Wait for their ice candidate       
          connections[socketListId].onicecandidate = function (event) {
            if (event.candidate != null) {
              socket.emit('signal', socketListId, JSON.stringify({ 'ice': event.candidate }))
            }
          }

          // Wait for their video stream
          connections[socketListId].onaddstream = (event) => {
            // TODO mute button, full screen button
            var searchVidep = document.querySelector(`[data-socket="${socketListId}"]`)
            if (searchVidep !== null) { // if i don't do this check it make an empyt square
              searchVidep.srcObject = event.stream
            } else {
              elms = clients.length
              let main = document.getElementById('main')
              let cssMesure = this.changeCssVideos(main)

              let video = document.createElement('video')

              let css = {
                minWidth: cssMesure.minWidth, minHeight: cssMesure.minHeight, maxHeight: "100%", margin: "10px",
                borderStyle: "solid", borderColor: "#bdbdbd", objectFit: "fill"
              }
              for (let i in css) video.style[i] = css[i]

              video.style.setProperty("width", cssMesure.width)
              video.style.setProperty("height", cssMesure.height)
              video.setAttribute('data-socket', socketListId)
              video.srcObject = event.stream
              video.autoplay = true
              video.playsinline = true

              main.appendChild(video)
            }
          }

此外，当ICE连接出现问题时，这部分代码预计会显示一些错误日志：

      if (signal.ice) {
        connections[fromId].addIceCandidate(new RTCIceCandidate(signal.ice)).catch(e => console.log(e))
      }

在托管服务器上模拟视频通话时，这些是收到的错误：

one

任何帮助将不胜感激。

Socket.io视频聊天-远程视频为空

0 个答案: