Shatatel/webrtc-publish

## webrtc-publish
<!DOCTYPE html>
<html>
    <head>
      <!-- https://github.com/webrtc/adapter is used for cross-browser interop -->
      <script type="text/javascript" src="/flu/js1/webrtc_adapter.js"></script>
      <!-- -->
      <style>
        .container{
          text-align: center;
        }
        .preview {
          background: black;
        }
        .errorMessageContainer {
          color: red;
        }
      </style>

    </head>
    <body>
        <div class="container">
          <video class="preview" id="preview" autoplay></video>
          <div class="controls">
            <select id="quality">
              <option value="4:3:240p">4:3 320x240</option>
              <option value="4:3:360p">4:3 480x360</option>
              <option value="4:3:480p">4:3 640x480</option>
              <option value="16:9:360p" selected>16:9 640x360</option>
              <option value="16:9:540p">16:9 960x540</option>
              <option value="16:9:720p">16:9 1280x720 HD</option>
            </select>
            <input name="name" id="streamName" value="ololo" />
            <button id="startStream">Start Streaming</button>
            <button id="stopStream">Stop Streaming</button>
          </div>
          <div class="errorMessageContainer" id="errorMessageContainer"></div>
        </div>

        <script>
          (function() {
            window.onload = function() {
              var status;
              var stream;
              var websocket;
              var peerConnection;

              var serverCredentials = {
                "protocol": "ws",
                "server": "Имя сервера",
                "port": "80",
                "stream": "ololo"
              }

              var videoContainer = document.getElementById("preview");
              var startStreamButton = document.getElementById("startStream");
              var stopStreamButton = document.getElementById("stopStream");
              var qualitySelector = document.getElementById("quality");
              var streamNameInput = document.getElementById("streamName");
              var errorMessageContainer = document.getElementById("errorMessageContainer");

              var mediaConstraints = [{
                video: {
                  width: {
                    exact: 320
                  },
                  height: {
                    exact: 240
                  }
                },
                audio: true
              }, {
                video: {
                  width: {
                    exact: 480
                  },
                  height: {
                    exact: 360
                  }
                },
                audio: true
              }, {
                video: {
                  width: {
                    exact: 640
                  },
                  height: {
                    exact: 480
                  }
                },
                audio: true
              }, {
                video: {
                  width: {
                    exact: 640
                  },
                  height: {
                    exact: 360
                  }
                },
                audio: true
              }, {
                video: {
                  width: {
                    exact: 960
                  },
                  height: {
                    exact: 540
                  }
                },
                audio: true
              }, {
                video: {
                  width: {
                    exact: 1280
                  },
                  height: {
                    exact: 720
                  }
                },
                audio: true
              }];

              function getParameterByName(name) {
                  var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
                  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
              }

              function setStreamNameValue() {
                streamNameInput.value = getParameterByName("stream") || "ololo";
              }

              function getMediaConstraints() {
                return mediaConstraints[qualitySelector.selectedIndex];
              }

              setStreamNameValue();

              qualitySelector.onchange = function(){
                if (status === "streaming") {
                  stopStreaming();
                  startStreamingTo(serverCredentials);
                }
              }

              stopStreamButton.onclick = function() {
                stopStreaming();
              }

              startStreamButton.onclick = function() {
                if (status !== "streaming") {
                  serverCredentials.stream = streamNameInput.value;
                  startStreamingTo(serverCredentials);
                }
              };

              function log() {
                console && console.log(arguments);
              }

              function showMessage(message) {
                  errorMessageContainer.innerHTML = message;
                  errorMessageContainer.style.display = "block";
              }

              function hideMessage(message) {
                  errorMessageContainer.style.display = "none";
              }

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

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

                switch (message.type) {
                  case "answer":
                    var description = new window.RTCSessionDescription(message);
                    peerConnection.setRemoteDescription(description);
                  break;
                  case "candidate":
                    var candidate = new window.RTCIceCandidate(message.candidate);
                    peerConnection.addIceCandidate(candidate).then(function() {
                      status = "streaming";
                      videoContainer.srcObject = window.stream;
                      hideMessage();
                    });
                  break;
                }
              }

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

                websocket = new WebSocket(url);
                websocket.onopen = function(event) {
                  log("WebSocket 'onOpen' fired.", event);
                  options.onopen();
                };
                websocket.onmessage = function(event) {
                  log("WebSocket 'onMessage' fired.", event);
                  options.onmessage(event);
                }
                websocket.onerror = function(event) {
                  showMessage("WebSocket connection error.");
                  log("WebSocket 'onError' fired.", event);
                };

                websocket.onclose = function(event) {
                  log("WebSocket 'onClose' fired.", event);
                };
              }

              function closeWebSocketConnection() {
                websocket.close();
              }

              function stopStreaming() {
                clearLocalStreamSource();
                peerConnection && peerConnection.close();
                peerConnection = null;
                websocket && websocket.close();
                status = "stopped";
              }

              function clearLocalStreamSource() {
                var stream = window.stream;
                if (stream) {
                  stream.getTracks().forEach(function(track) {
                    track.stop();
                  });
                }
              }

              function getMedia(constraints) {
                clearLocalStreamSource();
                navigator.mediaDevices.getUserMedia(constraints)
                  .then(gotMedia)
                  .catch(function(error) {
                    showMessage("Error capturing media.");
                    log("mediaDevices.getUserMedia exception occured.", error);
                  });
              }

              function gotMedia(stream) {
                peerConnection.addStream(stream);
                window.stream = stream;

                peerConnection.createOffer({
                  "offerToReceiveAudio": true,
                  "offerToReceiveVideo":true
                }).then(function(description) {
                  return peerConnection.setLocalDescription(description);
                }).then(function() {
                  sendWebSocketMessage(peerConnection.localDescription)
                }).catch(function(error){
                  var errorMessage = "Error establishing P2P connection.";
                  showMessage(errorMessage);
                  log(errorMessage, error);
                })
              }

              function openPeerConnection() {
                peerConnection = new window.RTCPeerConnection(null);
                peerConnection.stream_id = "local1";
                peerConnection.onicecandidate = gotIceCandidate;

                getMedia(getMediaConstraints());
              }

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

              function startStreamingTo(options) {
                options.onopen = openPeerConnection;
                options.onmessage = onWebSocketMessage;
                openWebSocketConnection(options);
              }

            }
          })();
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- https://github.com/webrtc/adapter is used for cross-browser interop -->
	<script type="text/javascript" src="/flu/js1/webrtc_adapter.js"></script>
	<!-- -->
	<style>
	.container{
	text-align: center;
	}
	.preview {
	background: black;
	}
	.errorMessageContainer {
	color: red;
	}
	</style>

	</head>
	<body>
	<div class="container">
	<video class="preview" id="preview" autoplay></video>
	<div class="controls">
	<select id="quality">
	<option value="4:3:240p">4:3 320x240</option>
	<option value="4:3:360p">4:3 480x360</option>
	<option value="4:3:480p">4:3 640x480</option>
	<option value="16:9:360p" selected>16:9 640x360</option>
	<option value="16:9:540p">16:9 960x540</option>
	<option value="16:9:720p">16:9 1280x720 HD</option>
	</select>
	<input name="name" id="streamName" value="ololo" />
	<button id="startStream">Start Streaming</button>
	<button id="stopStream">Stop Streaming</button>
	</div>
	<div class="errorMessageContainer" id="errorMessageContainer"></div>
	</div>

	<script>
	(function() {
	window.onload = function() {
	var status;
	var stream;
	var websocket;
	var peerConnection;

	var serverCredentials = {
	"protocol": "ws",
	"server": "Имя сервера",
	"port": "80",
	"stream": "ololo"
	}

	var videoContainer = document.getElementById("preview");
	var startStreamButton = document.getElementById("startStream");
	var stopStreamButton = document.getElementById("stopStream");
	var qualitySelector = document.getElementById("quality");
	var streamNameInput = document.getElementById("streamName");
	var errorMessageContainer = document.getElementById("errorMessageContainer");

	var mediaConstraints = [{
	video: {
	width: {
	exact: 320
	},
	height: {
	exact: 240
	}
	},
	audio: true
	}, {
	video: {
	width: {
	exact: 480
	},
	height: {
	exact: 360
	}
	},
	audio: true
	}, {
	video: {
	width: {
	exact: 640
	},
	height: {
	exact: 480
	}
	},
	audio: true
	}, {
	video: {
	width: {
	exact: 640
	},
	height: {
	exact: 360
	}
	},
	audio: true
	}, {
	video: {
	width: {
	exact: 960
	},
	height: {
	exact: 540
	}
	},
	audio: true
	}, {
	video: {
	width: {
	exact: 1280
	},
	height: {
	exact: 720
	}
	},
	audio: true
	}];

	function getParameterByName(name) {
	var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
	return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
	}

	function setStreamNameValue() {
	streamNameInput.value = getParameterByName("stream") \|\| "ololo";
	}

	function getMediaConstraints() {
	return mediaConstraints[qualitySelector.selectedIndex];
	}

	setStreamNameValue();

	qualitySelector.onchange = function(){
	if (status === "streaming") {
	stopStreaming();
	startStreamingTo(serverCredentials);
	}
	}

	stopStreamButton.onclick = function() {
	stopStreaming();
	}

	startStreamButton.onclick = function() {
	if (status !== "streaming") {
	serverCredentials.stream = streamNameInput.value;
	startStreamingTo(serverCredentials);
	}
	};

	function log() {
	console && console.log(arguments);
	}

	function showMessage(message) {
	errorMessageContainer.innerHTML = message;
	errorMessageContainer.style.display = "block";
	}

	function hideMessage(message) {
	errorMessageContainer.style.display = "none";
	}

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

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

	switch (message.type) {
	case "answer":
	var description = new window.RTCSessionDescription(message);
	peerConnection.setRemoteDescription(description);
	break;
	case "candidate":
	var candidate = new window.RTCIceCandidate(message.candidate);
	peerConnection.addIceCandidate(candidate).then(function() {
	status = "streaming";
	videoContainer.srcObject = window.stream;
	hideMessage();
	});
	break;
	}
	}

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

	websocket = new WebSocket(url);
	websocket.onopen = function(event) {
	log("WebSocket 'onOpen' fired.", event);
	options.onopen();
	};
	websocket.onmessage = function(event) {
	log("WebSocket 'onMessage' fired.", event);
	options.onmessage(event);
	}
	websocket.onerror = function(event) {
	showMessage("WebSocket connection error.");
	log("WebSocket 'onError' fired.", event);
	};

	websocket.onclose = function(event) {
	log("WebSocket 'onClose' fired.", event);
	};
	}

	function closeWebSocketConnection() {
	websocket.close();
	}

	function stopStreaming() {
	clearLocalStreamSource();
	peerConnection && peerConnection.close();
	peerConnection = null;
	websocket && websocket.close();
	status = "stopped";
	}

	function clearLocalStreamSource() {
	var stream = window.stream;
	if (stream) {
	stream.getTracks().forEach(function(track) {
	track.stop();
	});
	}
	}

	function getMedia(constraints) {
	clearLocalStreamSource();
	navigator.mediaDevices.getUserMedia(constraints)
	.then(gotMedia)
	.catch(function(error) {
	showMessage("Error capturing media.");
	log("mediaDevices.getUserMedia exception occured.", error);
	});
	}

	function gotMedia(stream) {
	peerConnection.addStream(stream);
	window.stream = stream;

	peerConnection.createOffer({
	"offerToReceiveAudio": true,
	"offerToReceiveVideo":true
	}).then(function(description) {
	return peerConnection.setLocalDescription(description);
	}).then(function() {
	sendWebSocketMessage(peerConnection.localDescription)
	}).catch(function(error){
	var errorMessage = "Error establishing P2P connection.";
	showMessage(errorMessage);
	log(errorMessage, error);
	})
	}

	function openPeerConnection() {
	peerConnection = new window.RTCPeerConnection(null);
	peerConnection.stream_id = "local1";
	peerConnection.onicecandidate = gotIceCandidate;

	getMedia(getMediaConstraints());
	}

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

	function startStreamingTo(options) {
	options.onopen = openPeerConnection;
	options.onmessage = onWebSocketMessage;
	openWebSocketConnection(options);
	}

	}
	})();
	</script>
	</body>
	</html>