Hexa · August 10, 2016 12:58
diff --git a/relay.html b/relay.html
 <html>
  <head>
    <title>relay</title>
  </head>
  <body>
    <div id="remote">
    </div>
    <hr />
    <input type="Button" id="add" value="add"></input>
    <div id="children">
    </div>

    <script>
      var offerSdp;
      var answerSdp;
      var config = {"iceServers": []};
      var localPc = new RTCPeerConnection(config);
      var remotePc = new RTCPeerConnection(config);
      var constraints = {audio: false, video:  {width: {min: 640}, height: {min: 480}}, fake: true};
      //var constraints = {audio: true, video:  {width: {min: 640}, height: {min: 480}}};

      var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection;
      var RTCSessionDescription = window.RTCSessionDescription;
      var RTCIceCandidate = window.RTCIceCandidate;

      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          localPc.addTrack(stream.getVideoTracks()[0], stream);

          return localPc.createOffer({offerToReceiveVideo: true,
                                      offerToReceiveAudio: true});
        })
        .then(localSdp => {
          offerSdp = localSdp;
          return localPc.setLocalDescription(localSdp);
        })
        .then(() => {
          remotePc.ontrack = track => {
            if (track.track.kind === "video") {
              var div = document.getElementById("remote");
              var video = document.createElement("video");
              video.id = track.streams[0].id;
              video.srcObject = track.streams[0];
              div.appendChild(video);
              video.play();
            }
          };
          remotePc.onicecandidate = event => {
            var candidate = event.candidate;
            if (candidate) {
              localPc.addIceCandidate(candidate);
            }
          };
          return remotePc.setRemoteDescription(localPc.localDescription);
        })
        .then(() => {
          return remotePc.createAnswer({offerToReceiveVideo: true, offerToReceiveAudio: true});
        })
        .then(remoteSdp => {
          answerSdp = remoteSdp;
          return remotePc.setLocalDescription(remoteSdp);
        })
        .then(() => {
          localPc.onicecandidate = event => {
            var candidate = event.candidate;
            if (candidate) {
              remotePc.addIceCandidate(candidate);
            }
          };
          return localPc.setRemoteDescription(remotePc.localDescription);
        })
        .then(() => {
          oldReceiverPc = remotePc;
        })
        .catch(reason => {
          console.error(reason);
        });

        var oldReceiverPc;
        var senders = [];
        var receivers = [];

        function addChild() {
          var senderPc = new RTCPeerConnection(config);
          senders.push(senderPc);
          var receiverPc = new RTCPeerConnection(config);
          receivers.push(receiverPc);
          var oldReceiver = oldReceiverPc.getReceivers()[0];
          var stream = new MediaStream();
          var track = oldReceiver.track;
          stream.addTrack(track);
          senderPc.addTrack(track, stream);

          receiverPc.ontrack = track => {
            if (track.track.kind === "video") {
              var div = document.getElementById("children");
              var video = document.createElement("video");
              video.id = track.streams[0].id;
              video.srcObject = track.streams[0];
              div.appendChild(video);
              video.play();

              oldReceiverPc = receiverPc;
            }
          };
          receiverPc.onicecandidate = event => {
            var candidate = event.candidate;
            if (candidate) {
              senderPc.addIceCandidate(candidate);
            }
          };

          senderPc.onicecandidate = event => {
            var candidate = event.candidate;
            if (candidate) {
              receiverPc.addIceCandidate(candidate);
            }
          };

          senderPc.createOffer({})
            .then(sdp => {
              return senderPc.setLocalDescription(sdp);
            })
            .then(() => {
              return receiverPc.setRemoteDescription(senderPc.localDescription);
            })
            .then(() => {
              return receiverPc.createAnswer({});
            })
            .then(sdp => {
              return receiverPc.setLocalDescription(sdp);
            })
            .then(() => {
              return senderPc.setRemoteDescription(receiverPc.localDescription);
            })
            .catch(reason => {
              console.error(reason);
            })
        }

        var input = document.getElementById("add");
        input.addEventListener("click", addChild, false);
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>relay</title>
	</head>
	<body>
	<div id="remote">
	</div>
	<hr />
	<input type="Button" id="add" value="add"></input>
	<div id="children">
	</div>

	<script>
	var offerSdp;
	var answerSdp;
	var config = {"iceServers": []};
	var localPc = new RTCPeerConnection(config);
	var remotePc = new RTCPeerConnection(config);
	var constraints = {audio: false, video: {width: {min: 640}, height: {min: 480}}, fake: true};
	//var constraints = {audio: true, video: {width: {min: 640}, height: {min: 480}}};

	var RTCPeerConnection = window.RTCPeerConnection \|\| window.webkitRTCPeerConnection;
	var RTCSessionDescription = window.RTCSessionDescription;
	var RTCIceCandidate = window.RTCIceCandidate;

	navigator.mediaDevices.getUserMedia(constraints)
	.then(stream => {
	localPc.addTrack(stream.getVideoTracks()[0], stream);

	return localPc.createOffer({offerToReceiveVideo: true,
	offerToReceiveAudio: true});
	})
	.then(localSdp => {
	offerSdp = localSdp;
	return localPc.setLocalDescription(localSdp);
	})
	.then(() => {
	remotePc.ontrack = track => {
	if (track.track.kind === "video") {
	var div = document.getElementById("remote");
	var video = document.createElement("video");
	video.id = track.streams[0].id;
	video.srcObject = track.streams[0];
	div.appendChild(video);
	video.play();
	}
	};
	remotePc.onicecandidate = event => {
	var candidate = event.candidate;
	if (candidate) {
	localPc.addIceCandidate(candidate);
	}
	};
	return remotePc.setRemoteDescription(localPc.localDescription);
	})
	.then(() => {
	return remotePc.createAnswer({offerToReceiveVideo: true, offerToReceiveAudio: true});
	})
	.then(remoteSdp => {
	answerSdp = remoteSdp;
	return remotePc.setLocalDescription(remoteSdp);
	})
	.then(() => {
	localPc.onicecandidate = event => {
	var candidate = event.candidate;
	if (candidate) {
	remotePc.addIceCandidate(candidate);
	}
	};
	return localPc.setRemoteDescription(remotePc.localDescription);
	})
	.then(() => {
	oldReceiverPc = remotePc;
	})
	.catch(reason => {
	console.error(reason);
	});

	var oldReceiverPc;
	var senders = [];
	var receivers = [];

	function addChild() {
	var senderPc = new RTCPeerConnection(config);
	senders.push(senderPc);
	var receiverPc = new RTCPeerConnection(config);
	receivers.push(receiverPc);
	var oldReceiver = oldReceiverPc.getReceivers()[0];
	var stream = new MediaStream();
	var track = oldReceiver.track;
	stream.addTrack(track);
	senderPc.addTrack(track, stream);

	receiverPc.ontrack = track => {
	if (track.track.kind === "video") {
	var div = document.getElementById("children");
	var video = document.createElement("video");
	video.id = track.streams[0].id;
	video.srcObject = track.streams[0];
	div.appendChild(video);
	video.play();

	oldReceiverPc = receiverPc;
	}
	};
	receiverPc.onicecandidate = event => {
	var candidate = event.candidate;
	if (candidate) {
	senderPc.addIceCandidate(candidate);
	}
	};

	senderPc.onicecandidate = event => {
	var candidate = event.candidate;
	if (candidate) {
	receiverPc.addIceCandidate(candidate);
	}
	};

	senderPc.createOffer({})
	.then(sdp => {
	return senderPc.setLocalDescription(sdp);
	})
	.then(() => {
	return receiverPc.setRemoteDescription(senderPc.localDescription);
	})
	.then(() => {
	return receiverPc.createAnswer({});
	})
	.then(sdp => {
	return receiverPc.setLocalDescription(sdp);
	})
	.then(() => {
	return senderPc.setRemoteDescription(receiverPc.localDescription);
	})
	.catch(reason => {
	console.error(reason);
	})
	}

	var input = document.getElementById("add");
	input.addEventListener("click", addChild, false);
	</script>
	</body>
	</html>