不同网络中客户端之间的WebRTC

问题描述 投票:1回答:1

我使用了带有两个Chrome标签的WebRTC视频会议(这意味着我称呼自己)。一切正常。

我也使用了WebRTC视频会议和两台不同的笔记本电脑,如果这些笔记本电脑在同一网络上。我在代理后面使用了我办公室的网络。

但是,如果我将WebRTC视频会议与Office Network上的一台笔记本电脑一起使用,而在Personal Home网络上与另一台笔记本电脑一起使用,则无法使用。

这是scaledrone中此代码的实时示例,带有通道代码sX5nWDp8dfyEysqhLive example从这里回购repo 这是代码

// 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('sX5nWDp8dfyEysqh');
// 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.onaddstream = event => {
    remoteVideo.srcObject = event.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
    pc.addStream(stream);
  }, onError);

  // Listen to signaling data from Scaledrone
  room.on('data', (message, client) => {
    // Message was sent by us
    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
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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 {
      background: #0098ff;
      display: flex;
      height: 100vh;
      margin: 0;
      align-items: center;
      justify-content: center;
      padding: 0 50px;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    video {
      background: white;
      background-image: url(https://www.kirupa.com/images/orange_logo_svg.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      max-width: calc(50% - 5%);
      margin: 0 5%;
      box-sizing: border-box;
      border-radius: 2px;
      padding: 0;
    }
    .copy {
      position: fixed;
      top: 25px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: white;
    }
  </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="script.js"></script>
</body>
</html>
javascript webrtc
1个回答
3
投票

是,但是您需要一个STUN服务器(在iceServers配置中使用该服务器),并且两个网络都需要允许UDP流量。以我的经验,办公室网络偶尔会在某些端口范围(例如,除DNS之外的所有端口)上阻止UDP流量。

要使用已知工作的客户端测试WebRTC,请尝试使用AppRTC video chat client 中的WebRTC Samples。如果这不起作用,则应检查办公室防火墙上的UDP规则。否则,您将需要TURN服务器。

© www.soinside.com 2019 - 2024. All rights reserved.