Проблема с webRT C один-к-одному видео-чат не работает, когда вне сети - PullRequest
Новая
       7

Проблема с webRT C один-к-одному видео-чат не работает, когда вне сети

0 голосов
/ 30 апреля 2020

Я работаю в небольшой системе, которая будет включать в себя видеочат. Я использую Scaledrone, поскольку они предлагают учебники, чтобы начать и имеют хорошую ценность. Я использовал почти все, что у них есть в их блоге по адресу https://www.scaledrone.com/blog/webrtc-tutorial-simple-video-chat/, который, кажется, работает нормально, но теперь, когда я тестирую вне сети, кажется, что удаленное видео не работает ни для одной из сторон, я также, кажется, возникли проблемы с ipad на windows 10 ноутбуков на Chrome или firefox. В основном это кажется тихим пятнистым. Временами я получаю сообщение об ошибке DOMexception не может добавить лед-кандидат, когда нет удаленного sdp, но иногда нет ошибки в консоли, но видео не встречается. Это моя первая попытка webRT C. Вот что у меня есть: 

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    body {
      display: flex;
      height: 100vh;
      margin: 0;
      align-items: center;
      justify-content: center;
      padding: 0 50px;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    video {
      max-width: calc(50% - 100px);
      margin: 0 50px;
      box-sizing: border-box;
      border-radius: 2px;
      padding: 0;
      box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
    }
    .copy {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div class="copy">Send your URL to a friend to start a video call</div>
  <video id="localVideo" autoplay muted></video>
  <video id="remoteVideo" autoplay ></video>
  <script src="scripts/video.js"></script>

</body>
</html>

Видео. js: 

 // Generate random room name if needed
if (!location.hash) {
  location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
const roomHash = location.hash.substring(1);

// TODO: Replace with your own channel ID
const drone = new ScaleDrone('xxxx');
// Room name needs to be prefixed with 'observable-'
const roomName = 'observable-' + roomHash;
const configuration = {
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
};
let room;
let pc;


function onSuccess() {};
function onError(error) {
  console.error(error);
};

drone.on('open', error => {
  if (error) {
    return console.error(error);
  }
  room = drone.subscribe(roomName);
  room.on('open', error => {
    if (error) {
      onError(error);
    }
  });
  // We're connected to the room and received an array of 'members'
  // connected to the room (including us). Signaling server is ready.
  room.on('members', members => {
    console.log('MEMBERS', members);
    // If we are the second user to connect to the room we will be creating the offer
    const isOfferer = members.length === 2;
    startWebRTC(isOfferer);
  });
});

// Send signaling data via Scaledrone
function sendMessage(message) {
  drone.publish({
    room: roomName,
    message
  });
}

function startWebRTC(isOfferer) {
  pc = new RTCPeerConnection(configuration);

  // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
  // message to the other peer through the signaling server
  pc.onicecandidate = event => {
    if (event.candidate) {
      sendMessage({'candidate': event.candidate});
    }
  };

  // If user is offerer let the 'negotiationneeded' event create the offer
  if (isOfferer) {
    pc.onnegotiationneeded = () => {
      pc.createOffer().then(localDescCreated).catch(onError);
    }
  }

  // When a remote stream arrives display it in the #remoteVideo element
  pc.ontrack = event => {
    const stream = event.streams[0];
    if (!remoteVideo.srcObject || remoteVideo.srcObject.id !== stream.id) {
      remoteVideo.srcObject = stream;
    }
  };

  navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
  }).then(stream => {
    // Display your local video in #localVideo element
    localVideo.srcObject = stream;
    // Add your stream to be sent to the conneting peer
    stream.getTracks().forEach(track => pc.addTrack(track, stream));
  }, onError);

  // Listen to signaling data from Scaledrone
  room.on('data', (message, client) => {
    // Message was sent by us
    console.log(message, client);
    if (client.id === drone.clientId) {
      return;
    }

    if (message.sdp) {
      // This is called after receiving an offer or answer from another peer
                      pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
                                            // When receiving an offer lets answer it
                                            if (pc.remoteDescription.type === 'offer') {
                                              pc.createAnswer().then(localDescCreated).catch(onError);
                                            }
                      }, onError);
    } else if (message.candidate) {
      // Add the new ICE candidate to our connections remote description
          pc.addIceCandidate(
            new RTCIceCandidate(message.candidate), onSuccess, onError
          );
    }
  });
}

function localDescCreated(desc) {
  pc.setLocalDescription(
    desc,
    () => sendMessage({'sdp': pc.localDescription}),
    onError
  );
}

Есть идеи?

1 Ответ

0 голосов
/ 03 мая 2020

Для некоторых типов соединений потребуется добавление TURN server к серверам ICE. Чек Котурн .
Вы также можете создать бесплатный ход для проверки через онемение .

...