Question

chrome版本：62.0.3202.94; firefox版本：57.0.1;

我写一个简单的演示使用webrtc和socket.io。它适用于页面。例如，我打开一个页面来连接套接字，并等待主页面（获取本地媒体）的PeerConnection信息。当我打开主要内容时，我会创建ice和sdp，然后通过socket.io进行交换以创建连接。这是代码。

// The server side:
const express = require('express')
const app = express()
const path = require('path')

app.use(express.static(path.join(__dirname, 'public')))

app.get('/phone', function(req, res) {
  res.sendfile(__dirname + '/phone.html')
})

app.get('/', function(req, res) {
  res.sendfile(__dirname + '/index.html')
})

const server = require('http').createServer(app)
const io = require('socket.io')(server)
let clients = []

io.on('connection', function(socket) {

  clients.push(socket)
  const referer = socket.handshake.headers.referer
  
  // socket connect from '/phone'
  if (referer.match('/phone')) {
    // send the ice from phone to others
    socket.on('phone_ice_candidate', function(res) {
      socket.broadcast.emit('pc_add_ice', {
        ice: res.ice
      })
    })

    // send the sdp from phone to others
    socket.on('send_phone_sdp', function(data) {
      socket.broadcast.emit('set_pc_remote_sdp', {
        desc: data.desc
      })
    })
  }

  // phone add ice from web
  socket.on('remote_ice_candidate', function(ice) {
    socket.to(getId(clients, '/phone')).emit('send_ice_to_pc', {
      ice: ice
    })
  })

  // phone add sdp from web
  socket.on('send_pc_sdp', function(data) {
    // send to phone
    socket.to(getId(clients, '/phone')).emit('set_phone_remote_sdp', {
      desc: data
    })
  })

  // socket disconnect and remove it from clients
  socket.on('disconnect', () => {
    let id = socket.id
    clients.forEach((client, index) => {
      if (client.id === id) {
        clients.splice(index, 1)
      }
    })
  })
})

// get the socket id to emit
function getId(sockets, exp) {
  let id
  sockets.forEach(socket => {
    if (socket.handshake.headers.referer.match(exp)) {
      id = socket.id
    }
  })
  return id
}

server.listen(3000, function() {
  console.log('port listening at 3000')
})

// --------------------------------------------- //
// web.js
var socket = io();
var server = {
    // "iceServers": [{
    //     "url": "stun:stun.l.google.com:19302"
    // }]
  },
  pc = new RTCPeerConnection(null),
  v = document.querySelector('#video2')
// web onicecandidate
pc.onicecandidate = function(event) {
  if (event.candidate) {
    socket.emit('remote_ice_candidate', {
      ice: event.candidate
    })
  }
}
// web addIceCandidate
socket.on('pc_add_ice', function(event) {
  pc.addIceCandidate(new RTCIceCandidate(event.ice))
})

// didn't trigger
pc.ontrack = function(e) {
  // v.srcObject = e.streams[0];
  console.log(e, 'pc.ontrack')
}

// web setRemoteDescription and createAnswer
socket.on('set_pc_remote_sdp', function(e) {
  pc.setRemoteDescription(e.desc).then(
    function() {
      console.log('remote setRemoteDescription success')

      pc.createAnswer().then(function(desc) {
        pc.setLocalDescription(desc).then(
          function() {
            socket.emit('send_pc_sdp', {
              desc: desc
            })
          },
          function(err) {
            console.log(err)
          }
        );
      })
    },
    function() {
      console.log('pc setLocalDescription error')
    }
  )

})

// web iceConnectionState
pc.oniceconnectionstatechange = function() {
  console.log('web oniceconnectionstatechange', pc.iceConnectionState)
  // log  checking -> connected
};

//---------------------------------------------//
// phone.js
var socket = io();
var server = {
    // "iceServers": [{
    //     "url": "stun:stun.l.google.com:19302"
    // }]
  },
  pc = new RTCPeerConnection(null),
  v = document.querySelector('#video1')


// phone onicecandidate
pc.onicecandidate = function(event) {
  if (event.candidate) {
    socket.emit('phone_ice_candidate', {
      ice: event.candidate
    })
  }
}

// phone addIceCandidate
socket.on('send_ice_to_pc', function(event) {
  pc.addIceCandidate(new RTCIceCandidate(event.ice.ice))
})

// getUserMedia
navigator.mediaDevices.getUserMedia({
    video: {
      width: 400,
      height: 300
    },
    audio: false
  })
  .then(function(stream) {
    v.src = window.URL.createObjectURL(stream);
    pc.addStream(stream);
  })
  .then(function() {
    // create offer
    pc.createOffer({
      offerToReceiveVideo: 1
    }).then(function(e) {
      // pc setLocalDescription
      pc.setLocalDescription(e).then(
        function() {
          socket.emit('send_phone_sdp', {
            desc: e
          })
        },
        function() {
          console.log('pc setLocalDescription error')
        }
      )
    });
  })
  .catch(function(err) {
    console.log(err.name + ": " + err.message);
  })

// phone setRemoteDescription
socket.on('set_phone_remote_sdp', function(e) {
  pc.setRemoteDescription(e.desc.desc).then(
    function() {
      console.log('pc setRemoteDescription success')
    },
    function(err) {
      console.log(err)
    })
})
// phone iceConnectionState
pc.oniceconnectionstatechange = function() {
  console.log('phone oniceconnectionstatechange', pc.iceConnectionState)
  // log checking -> connected -> completed
};

当我使用firefox打开它时，控制台中出现错误ICE failed, add a STUN server and see about:webrtc for more details。在chrome'手机iceConnectionState'已更改checking -> connected -> completed，'web iceConnectionState'已更改checking -> connected。

Answer 1

getUserMedia是一个异步函数。在调用pc.addStream之前调用createOffer，这意味着没有什么可以协商的。使承诺回调在pc.addStream（stream）之后返回你的pc.createOffer（）;

Answer 2

https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-signaling上的PTAL，并将您的代码与示例进行比较，看看是否可以解决这个问题。

Answer 3

您是否已在HTML中设置autoplay？我有同样的问题，事实证明我应该在html标记中设置自动播放。即：

<video autoplay></video>

希望这会有所帮助！

webrtc每一步成功但没有视频分享

3 个答案: