327 lines
12 KiB
HTML
327 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||
|
|
<title>OBS view - KEVIN</title>
|
||
|
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=5d0606363cf6affbcda5495e4fefc96c">
|
||
|
|
<link rel="stylesheet" href="assets/fonts/Lato.css">
|
||
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css?h=9db842b3dc3336737559eb4abc0f1b3d">
|
||
|
|
<link rel="stylesheet" href="assets/fonts/material-icons.min.css?h=9db842b3dc3336737559eb4abc0f1b3d">
|
||
|
|
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css?h=9db842b3dc3336737559eb4abc0f1b3d">
|
||
|
|
<link rel="stylesheet" href="assets/css/animate.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="videos-container"></div>
|
||
|
|
<input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20 style="display: none;">
|
||
|
|
<script src="assets/js/jquery.min.js?h=89312d34339dcd686309fe284b3f226f"></script>
|
||
|
|
<script src="assets/bootstrap/js/bootstrap.min.js?h=03ab36d1dde930b7d44a712f19075641"></script>
|
||
|
|
<script src="assets/js/script.min.js?h=84a111365b31658389bfd638cc1392eb"></script>
|
||
|
|
<script src="assets/js/RTCMultiConnection.js"></script>
|
||
|
|
<script src="assets/js/adapter.js"></script>
|
||
|
|
<script src="/socket.io/socket.io.js"></script>
|
||
|
|
<link rel="stylesheet" href="assets/css/getHTMLMediaElementFull.css">
|
||
|
|
<script src="assets/js/getHTMLMediaElement.js"></script>
|
||
|
|
<script src="assets/js/RecordRTC.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// ......................................................
|
||
|
|
// ..................RTCMultiConnection Code.............
|
||
|
|
// ......................................................
|
||
|
|
|
||
|
|
var connection = new RTCMultiConnection();
|
||
|
|
|
||
|
|
connection.socketURL = 'https://kevin.c3voc.de/';
|
||
|
|
|
||
|
|
connection.socketMessageEvent = 'rC3-VOCcast';
|
||
|
|
|
||
|
|
connection.session = {
|
||
|
|
audio: true,
|
||
|
|
video: true,
|
||
|
|
//oneway: true
|
||
|
|
};
|
||
|
|
|
||
|
|
connection.sdpConstraints.mandatory = {
|
||
|
|
OfferToReceiveAudio: true,
|
||
|
|
OfferToReceiveVideo: true
|
||
|
|
};
|
||
|
|
|
||
|
|
// STAR_FIX_VIDEO_AUTO_PAUSE_ISSUES
|
||
|
|
// via: https://github.com/muaz-khan/RTCMultiConnection/issues/778#issuecomment-524853468
|
||
|
|
var bitrates = 512;
|
||
|
|
var resolutions = 'Ultra-HD';
|
||
|
|
var videoConstraints = {};
|
||
|
|
|
||
|
|
if (resolutions == 'HD') {
|
||
|
|
videoConstraints = {
|
||
|
|
width: {
|
||
|
|
ideal: 1280
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
ideal: 720
|
||
|
|
},
|
||
|
|
frameRate: 30
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
if (resolutions == 'Ultra-HD') {
|
||
|
|
videoConstraints = {
|
||
|
|
width: {
|
||
|
|
ideal: 1920
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
ideal: 1080
|
||
|
|
},
|
||
|
|
frameRate: 30
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
connection.mediaConstraints = {
|
||
|
|
video: videoConstraints,
|
||
|
|
audio: true
|
||
|
|
};
|
||
|
|
|
||
|
|
var CodecsHandler = connection.CodecsHandler;
|
||
|
|
|
||
|
|
connection.processSdp = function(sdp) {
|
||
|
|
var codecs = 'vp8';
|
||
|
|
|
||
|
|
if (codecs.length) {
|
||
|
|
sdp = CodecsHandler.preferCodec(sdp, codecs.toLowerCase());
|
||
|
|
}
|
||
|
|
|
||
|
|
if (resolutions == 'HD') {
|
||
|
|
sdp = CodecsHandler.setApplicationSpecificBandwidth(sdp, {
|
||
|
|
audio: 128,
|
||
|
|
video: bitrates,
|
||
|
|
screen: bitrates
|
||
|
|
});
|
||
|
|
|
||
|
|
sdp = CodecsHandler.setVideoBitrates(sdp, {
|
||
|
|
min: bitrates * 8 * 1024,
|
||
|
|
max: bitrates * 8 * 1024,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (resolutions == 'Ultra-HD') {
|
||
|
|
sdp = CodecsHandler.setApplicationSpecificBandwidth(sdp, {
|
||
|
|
audio: 128,
|
||
|
|
video: bitrates,
|
||
|
|
screen: bitrates
|
||
|
|
});
|
||
|
|
|
||
|
|
sdp = CodecsHandler.setVideoBitrates(sdp, {
|
||
|
|
min: bitrates * 8 * 1024,
|
||
|
|
max: bitrates * 8 * 1024,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return sdp;
|
||
|
|
};
|
||
|
|
// END_FIX_VIDEO_AUTO_PAUSE_ISSUES
|
||
|
|
|
||
|
|
connection.iceServers = [];
|
||
|
|
connection.iceServers.push({
|
||
|
|
'urls': 'stun:stun.franconian.net:3478',
|
||
|
|
});
|
||
|
|
connection.iceServers.push({
|
||
|
|
'urls': 'turn:stun.franconian.net:3478',
|
||
|
|
'credential': 'ec0WlmT6lj0p4ou8XFAV66nTDopm9JPra3TnIIkxUM1VaqwAzTtoFqbXVeOoFsdU',
|
||
|
|
'username': 'turnuser',
|
||
|
|
});
|
||
|
|
|
||
|
|
connection.videosContainer = document.getElementById('videos-container');
|
||
|
|
connection.onstream = function(event) {
|
||
|
|
var existing = document.getElementById(event.streamid);
|
||
|
|
if(existing && existing.parentNode) {
|
||
|
|
existing.parentNode.removeChild(existing);
|
||
|
|
}
|
||
|
|
|
||
|
|
event.mediaElement.removeAttribute('src');
|
||
|
|
event.mediaElement.removeAttribute('srcObject');
|
||
|
|
event.mediaElement.muted = true;
|
||
|
|
event.mediaElement.volume = 0;
|
||
|
|
|
||
|
|
var video = document.createElement('video');
|
||
|
|
|
||
|
|
try {
|
||
|
|
video.setAttributeNode(document.createAttribute('autoplay'));
|
||
|
|
video.setAttributeNode(document.createAttribute('playsinline'));
|
||
|
|
} catch (e) {
|
||
|
|
video.setAttribute('autoplay', true);
|
||
|
|
video.setAttribute('playsinline', true);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(event.type === 'local') {
|
||
|
|
video.volume = 0;
|
||
|
|
try {
|
||
|
|
video.setAttributeNode(document.createAttribute('muted'));
|
||
|
|
} catch (e) {
|
||
|
|
video.setAttribute('muted', true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
video.srcObject = event.stream;
|
||
|
|
|
||
|
|
var width = params.width;
|
||
|
|
if (params.action && params.action == 'view') {
|
||
|
|
var mediaElement = getHTMLMediaElement(video, {
|
||
|
|
buttons: [''],
|
||
|
|
width: width,
|
||
|
|
showOnMouseEnter: false
|
||
|
|
});
|
||
|
|
//document.querySelector("video").requestFullscreen();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var mediaElement = getHTMLMediaElement(video, {
|
||
|
|
title: event.userid,
|
||
|
|
buttons: ['full-screen'],
|
||
|
|
width: width,
|
||
|
|
showOnMouseEnter: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
connection.videosContainer.appendChild(mediaElement);
|
||
|
|
|
||
|
|
setTimeout(function() {
|
||
|
|
mediaElement.media.play();
|
||
|
|
}, 5000);
|
||
|
|
|
||
|
|
mediaElement.id = event.streamid;
|
||
|
|
|
||
|
|
// to keep room-id in cache
|
||
|
|
//localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
|
||
|
|
|
||
|
|
|
||
|
|
if(event.type === 'local') {
|
||
|
|
connection.socket.on('disconnect', function() {
|
||
|
|
if(!connection.getAllParticipants().length) {
|
||
|
|
location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
connection.onstreamended = function(event) {
|
||
|
|
var mediaElement = document.getElementById(event.streamid);
|
||
|
|
if (mediaElement) {
|
||
|
|
mediaElement.parentNode.removeChild(mediaElement);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
connection.onMediaError = function(e) {
|
||
|
|
if (e.message === 'Concurrent mic process limit.') {
|
||
|
|
if (DetectRTC.audioInputDevices.length <= 1) {
|
||
|
|
alert('Please select external microphone. Check github issue number 483.');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
|
||
|
|
connection.mediaConstraints.audio = {
|
||
|
|
deviceId: secondaryMic
|
||
|
|
};
|
||
|
|
|
||
|
|
connection.join(connection.sessionid);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// ......................................................
|
||
|
|
// ......................Handling Room-ID................
|
||
|
|
// ......................................................
|
||
|
|
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
var params = {},
|
||
|
|
r = /([^&=]+)=?([^&]*)/g;
|
||
|
|
|
||
|
|
function d(s) {
|
||
|
|
return decodeURIComponent(s.replace(/\+/g, ' '));
|
||
|
|
}
|
||
|
|
var match, search = window.location.search;
|
||
|
|
while (match = r.exec(search.substring(1)))
|
||
|
|
params[d(match[1])] = d(match[2]);
|
||
|
|
window.params = params;
|
||
|
|
console.log(params);
|
||
|
|
})();
|
||
|
|
|
||
|
|
function genID() {
|
||
|
|
var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||
|
|
var idsize = 8;
|
||
|
|
var streamid = '';
|
||
|
|
for (var i = 0; i < idsize; i++) {
|
||
|
|
streamid += chars.charAt(Math.floor(Math.random() * chars.length));
|
||
|
|
}
|
||
|
|
return streamid;
|
||
|
|
}
|
||
|
|
|
||
|
|
var roomid = '';
|
||
|
|
//if (localStorage.getItem(connection.socketMessageEvent)) {
|
||
|
|
// roomid = localStorage.getItem(connection.socketMessageEvent);
|
||
|
|
//} else {
|
||
|
|
// roomid = genID();
|
||
|
|
//}
|
||
|
|
roomid = genID();
|
||
|
|
console.log('roomid gen: ' + roomid);
|
||
|
|
|
||
|
|
var txtRoomId = document.getElementById('room-id');
|
||
|
|
txtRoomId.value = roomid;
|
||
|
|
//txtRoomId.onkeyup = txtRoomId.oninput = txtRoomId.onpaste = function() {
|
||
|
|
// localStorage.setItem(connection.socketMessageEvent, document.getElementById('room-id').value);
|
||
|
|
//};
|
||
|
|
|
||
|
|
var hashString = location.hash.replace('#', '');
|
||
|
|
if (hashString.length && hashString.indexOf('comment-') == 0) {
|
||
|
|
hashString = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
var roomid = params.roomid;
|
||
|
|
if (!roomid && hashString.length) {
|
||
|
|
roomid = hashString;
|
||
|
|
}
|
||
|
|
|
||
|
|
var action = params.action
|
||
|
|
|
||
|
|
if (roomid && roomid.length) {
|
||
|
|
document.getElementById('room-id').value = roomid;
|
||
|
|
//localStorage.setItem(connection.socketMessageEvent, roomid);
|
||
|
|
|
||
|
|
// auto-join-room
|
||
|
|
(function reCheckRoomPresence() {
|
||
|
|
connection.checkPresence(roomid, function(isRoomExist) {
|
||
|
|
if (isRoomExist) {
|
||
|
|
if (action && action == 'view') {
|
||
|
|
connection.sdpConstraints.mandatory = {
|
||
|
|
OfferToReceiveAudio: true,
|
||
|
|
OfferToReceiveVideo: true
|
||
|
|
};
|
||
|
|
connection.session = {
|
||
|
|
audio: true,
|
||
|
|
video: true,
|
||
|
|
oneway: true
|
||
|
|
};
|
||
|
|
connection.join(roomid);
|
||
|
|
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
connection.join(roomid);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setTimeout(reCheckRoomPresence, 5000);
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
|
||
|
|
// detect 2G
|
||
|
|
if(navigator.connection &&
|
||
|
|
navigator.connection.type === 'cellular' &&
|
||
|
|
navigator.connection.downlinkMax <= 0.115) {
|
||
|
|
alert('2G is not supported. Please use a better internet service.');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|