Skip to content

Instantly share code, notes, and snippets.

@Shatatel

Shatatel/webrtc-publish

Last active December 1, 2019 10:25
Show Gist options
  • Save Shatatel/0a0df435f196823d61e650383cdd808c to your computer and use it in GitHub Desktop.
Save Shatatel/0a0df435f196823d61e650383cdd808c to your computer and use it in GitHub Desktop.
Download ZIP
WebRTC publish page with sizes selection
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment