theleon/flussonic-webrtc-playback.html

## flussonic-webrtc-playback.html
<!doctype html>
<html>
    <head>
      <!-- https://github.com/webrtc/adapter is used for cross-browser interop -->
      <script type="text/javascript" src="https://unpkg.com/webrtc-adapter@2.0.8/out/adapter.js"></script>
    </head>
    <body>
        <video id="container" controls autoplay></video>
        <script>
            window.onload = function() {
              var websocket;
              var peerConnection;
              var video = document.getElementById("container");

              function sendWebSocketMessage(data) {
                websocket.send(JSON.stringify(data));
              }

              function onWebSocketMessage(event) {
                var message = JSON.parse(event.data);

                switch (message.type) {
                  case "offer":
                    var description = new window.RTCSessionDescription(message);
                    peerConnection.setRemoteDescription(description)
                      .then(function() {
                        return peerConnection.createAnswer();
                      })
                      .then(function (answer) {
                        return peerConnection.setLocalDescription(answer);
                      })
                      .then(function () {
                        sendWebSocketMessage(peerConnection.localDescription);
                      });
                  break;
                  case "candidate":
                    var candidate = new window.RTCIceCandidate(message.candidate);
                    peerConnection.addIceCandidate(candidate);
                  break;
                }
              }

              function openWebSocketConnection(options) {
                var url =
                  options.protocol + "://" +
                  options.server + ":" +
                  options.port + "/" +
                  options.stream + "/webrtc";

                websocket = new WebSocket(url);
                websocket.onopen = initPeerConnection;
                websocket.onmessage = onWebSocketMessage;
              }

              function initPeerConnection() {
                peerConnection = new window.RTCPeerConnection(null);
                peerConnection.stream_id = "remote1";
                peerConnection.onicecandidate = gotIceCandidate;
                peerConnection.ontrack = gotRemoteTrack;
              }

              function gotIceCandidate(event){
                var candidate = event.candidate;
                if (candidate) {
                  sendWebSocketMessage({
                    type: 'candidate',
                    stream_id : "local1",
                    label: candidate.sdpMLineIndex,
                    id: candidate.sdpMid,
                    candidate: candidate
                  });
                }
              }

              function gotRemoteTrack(event){
                if (event.track.kind === "video") {
                  video.srcObject = event.streams[0];
                }
              }

              openWebSocketConnection({
                "protocol": "ws",
                "server": "192.168.2.3",
                "port": "8080",
                "stream": "STREAMNAME"
              });
            }
        </script>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<!-- https://github.com/webrtc/adapter is used for cross-browser interop -->
	<script type="text/javascript" src="https://unpkg.com/webrtc-adapter@2.0.8/out/adapter.js"></script>
	</head>
	<body>
	<video id="container" controls autoplay></video>
	<script>
	window.onload = function() {
	var websocket;
	var peerConnection;
	var video = document.getElementById("container");

	function sendWebSocketMessage(data) {
	websocket.send(JSON.stringify(data));
	}

	function onWebSocketMessage(event) {
	var message = JSON.parse(event.data);

	switch (message.type) {
	case "offer":
	var description = new window.RTCSessionDescription(message);
	peerConnection.setRemoteDescription(description)
	.then(function() {
	return peerConnection.createAnswer();
	})
	.then(function (answer) {
	return peerConnection.setLocalDescription(answer);
	})
	.then(function () {
	sendWebSocketMessage(peerConnection.localDescription);
	});
	break;
	case "candidate":
	var candidate = new window.RTCIceCandidate(message.candidate);
	peerConnection.addIceCandidate(candidate);
	break;
	}
	}

	function openWebSocketConnection(options) {
	var url =
	options.protocol + "://" +
	options.server + ":" +
	options.port + "/" +
	options.stream + "/webrtc";

	websocket = new WebSocket(url);
	websocket.onopen = initPeerConnection;
	websocket.onmessage = onWebSocketMessage;
	}

	function initPeerConnection() {
	peerConnection = new window.RTCPeerConnection(null);
	peerConnection.stream_id = "remote1";
	peerConnection.onicecandidate = gotIceCandidate;
	peerConnection.ontrack = gotRemoteTrack;
	}

	function gotIceCandidate(event){
	var candidate = event.candidate;
	if (candidate) {
	sendWebSocketMessage({
	type: 'candidate',
	stream_id : "local1",
	label: candidate.sdpMLineIndex,
	id: candidate.sdpMid,
	candidate: candidate
	});
	}
	}

	function gotRemoteTrack(event){
	if (event.track.kind === "video") {
	video.srcObject = event.streams[0];
	}
	}

	openWebSocketConnection({
	"protocol": "ws",
	"server": "192.168.2.3",
	"port": "8080",
	"stream": "STREAMNAME"
	});
	}
	</script>
	</body>
	</html>