Commit 0bf95746 authored by derchris's avatar derchris

add video only view

parent 506092e3
......@@ -14,14 +14,14 @@
</head>
<body>
<nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
<nav id="nav" class="navbar navbar-light navbar-expand bg-light navigation-clean">
<div class="container"><a class="navbar-brand" href="/">VOCcast</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"></button>
<div class="collapse navbar-collapse" id="navcol-1"></div>
</div>
</nav>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="row" id="header">
<div class="col-lg-4">
<div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
<div class="d-flex features-icons-icon" id="open-room"><i class="material-icons m-auto text-primary" data-bs-hover-animate="pulse">group_add</i></div>
......@@ -67,7 +67,7 @@
</section>
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="row" id="footer">
<div class="col-lg-6 my-auto h-100 text-center text-lg-left">
<ul class="list-inline mb-2"></ul>
<p class="text-muted small mb-4 mb-lg-0">rC3 Edition</p>
......@@ -99,7 +99,7 @@
disableInputButtons();
connection.open(document.getElementById('room-id').value, function(isRoomOpened, roomid, error) {
if(isRoomOpened === true) {
showRoomURL(connection.sessionid);
showRoomURL(connection.sessionid, 'group');
}
else {
disableInputButtons(true);
......@@ -299,12 +299,22 @@
video.srcObject = event.stream;
var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
var mediaElement = getHTMLMediaElement(video, {
title: event.userid,
buttons: ['full-screen'],
width: width,
showOnMouseEnter: false
});
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);
......@@ -396,9 +406,22 @@
// ALL below scripts are redundant!!!
// ..................................
function disableInputButtonsView() {
document.getElementById('room-id').onkeyup();
document.getElementById('header').style.display = "none";
document.getElementById('nav').style.display = "none";
document.getElementById('footer').style.display = "none";
document.getElementById('open-room').disabled = true;
document.getElementById('webcam-share').disabled = true;
document.getElementById('screen-share').disabled = true;
document.getElementById('room-id').disabled = true;
}
function disableInputButtons(enable) {
document.getElementById('room-id').onkeyup();
document.getElementById('header').style.display = "none";
document.getElementById('open-room').disabled = !enable;
document.getElementById('webcam-share').disabled = !enable;
document.getElementById('screen-share').disabled = !enable;
......@@ -409,18 +432,23 @@
// ......................Handling Room-ID................
// ......................................................
function showRoomURL(roomid) {
function showRoomURL(roomid, source) {
var roomHashURL = '#' + roomid;
var roomQueryStringURL = '?roomid=' + roomid;
var roomViewQueryStringURL = '?action=view&roomid=' + roomid;
var html = '<h2>Unique URL for your room:</h2><br>';
var html = '<h3>Share URLs:</h3><br>';
html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
html += '<br>';
html += 'Join URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';
html += '<br>';
//html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
//html += '<br>';
if (source == 'group') {
html += 'Join URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';
html += '<br>';
}
html += 'View URL: <a href="' + roomViewQueryStringURL + '" target="_blank">' + roomViewQueryStringURL + '</a>';
html += '<br>';
html += 'View URL (OBS): <a href="view.html' + roomViewQueryStringURL + '" target="_blank">' + roomViewQueryStringURL + '</a>';
var roomURLsDiv = document.getElementById('room-urls');
......@@ -487,6 +515,7 @@
oneway: true
};
connection.join(roomid);
disableInputButtonsView();
return;
} else {
connection.join(roomid);
......@@ -496,7 +525,6 @@
setTimeout(reCheckRoomPresence, 5000);
});
})();
disableInputButtons();
}
......
<!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 - VOCcast</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/getHTMLMediaElement.css">
<script src="/assets/js/getHTMLMediaElement.js"></script>
<script src="/assets/js/RecordRTC.js"></script>
<script>
// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................
var connection = new RTCMultiConnection();
connection.socketURL = '/';
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 = [{
'urls': [
'stun:ninja.c3voc.de:3479',
]
}];
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 = parseInt(connection.videosContainer.clientWidth / 3) - 20;
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);
})();
var roomid = '';
if (localStorage.getItem(connection.socketMessageEvent)) {
roomid = localStorage.getItem(connection.socketMessageEvent);
} else {
roomid = connection.token();
}
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>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment