Question

很长一段时间我都试图连接两个浏览器。我只收到我的声音，我自己的相机图像。如何获得其他浏览器的图像和声音？浏览器连接在同一网络上。

<body>  


<video id="localVideo" autoplay="true" muted="true" width="400px" height="400px" ></video>
<video id="remoteVideo"  autoplay="true" muted="true" width="400px" height="400px" ></video>

<div>
    <button id="callButton" onclick="call();" >Call</button>
    <button id="hangupButton" onclick="hangup();" disabled>Hang Up</button>
</div>

<script>
    // Definitions
    var localStream;
    var callButton = document.getElementById("callButton");
    var hangupButton = document.getElementById("hangupButton");

    var localVideo = document.getElementById("localVideo");
    var remoteVideo = document.getElementById("remoteVideo");
    var audioVideoConstraints = {audio: true, video: true};

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    window.RTCIceCandidate = window.mozRTCIceCandidate;


</script>


<script>
 // Functions


function getUserMediaSuccessCallback(stream) {
  window.stream = stream; // stream available to console
  localStream = stream;
  if (window.URL) {
    localVideo.src = window.URL.createObjectURL(stream);
  } else {
    localVideo.src = stream;
  }
  callButton.disabled = false;



  if (window.stream.getVideoTracks().length > 0) {
    trace('Using video device: ' + window.stream.getVideoTracks()[0].label);
  }
  if (window.stream.getAudioTracks().length > 0) {
    trace('Using audio device: ' + window.stream.getAudioTracks()[0].label);
  }

}

function getUserMediaErrorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
  alert("navigator.getUserMedia error: " + error);
}

function trace(text) {
  console.log(text);
}

function call() {

  hangupButton.disabled = false;
  trace("Starting call");

  var servers = null;

  localPeerConnection = new RTCPeerConnection(servers);
  trace("Created local peer connection object localPeerConnection");
  localPeerConnection.onicecandidate = gotLocalIceCandidate;

  remotePeerConnection = new RTCPeerConnection(servers);
  trace("Created remote peer connection object remotePeerConnection");
  remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
  remotePeerConnection.onaddstream = gotRemoteStream;

  localPeerConnection.addStream(localStream);
  trace("Added localStream to localPeerConnection");
  localPeerConnection.createOffer(gotLocalDescription);
}




</script>


<script>

    navigator.getUserMedia(audioVideoConstraints, getUserMediaSuccessCallback, getUserMediaErrorCallback);

非常感谢你们的出色工作：）

webRTC连接两个浏览器

0 个答案: