openvidu-getaroom demo first version
This commit is contained in:
pabloFuente
parent
653e7a9ff8
commit
433a5a2de5
17814
openvidu-getaroom/web/OpenVidu.js
Normal file
17814
openvidu-getaroom/web/OpenVidu.js
Normal file
File diff suppressed because one or more lines are too long
233
openvidu-getaroom/web/app.js
Normal file
233
openvidu-getaroom/web/app.js
Normal file
@ -0,0 +1,233 @@
|
||||
var OV;
|
||||
var session;
|
||||
var publisher;
|
||||
var sessionId;
|
||||
var audioEnabled = true;
|
||||
var videoEnabled = true;
|
||||
var numOfVideos = 0;
|
||||
|
||||
|
||||
// Check if the URL already has a room
|
||||
window.addEventListener('load', function () {
|
||||
sessionId = window.location.hash;
|
||||
if (sessionId) {
|
||||
// The URL has a session id
|
||||
console.log("Joining to room " + sessionId);
|
||||
showSessionHideJoin();
|
||||
joinRoom(sessionId);
|
||||
} else {
|
||||
showJoinHideSession();
|
||||
}
|
||||
});
|
||||
|
||||
// Disconnect participant on browser's window closed
|
||||
window.onbeforeunload = function () {
|
||||
session.disconnect()
|
||||
};
|
||||
|
||||
|
||||
function joinRoom(sessionId) {
|
||||
// If the user is joining to a new room
|
||||
if (!sessionId) {
|
||||
var sessionId = '#' + randomString();
|
||||
}
|
||||
|
||||
// As insecure OpenVidu, the user's token will be a random id
|
||||
var userId = randomString();
|
||||
|
||||
// --- 1) Get an OpenVidu object and init a session with a sessionId ---
|
||||
|
||||
// OpenVidu listening on "localhost:8443"
|
||||
OV = new OpenVidu();
|
||||
|
||||
// We will join the room "sessionId"
|
||||
session = OV.initSession("wss://225428f6.ngrok.io/" + sessionId);
|
||||
|
||||
|
||||
// --- 2) Specify the actions when events take place ---
|
||||
|
||||
// On every new Stream received...
|
||||
session.on('streamCreated', function (event) {
|
||||
// Subscribe to the Stream to receive it. HTML video will be appended to element with 'subscriber' id
|
||||
var subscriber = session.subscribe(event.stream, 'videos');
|
||||
subscriber.on('videoElementCreated', function (event) {
|
||||
numOfVideos++;
|
||||
updateLayout();
|
||||
});
|
||||
});
|
||||
|
||||
// On every new Stream destroyed...
|
||||
session.on('streamDestroyed', function (event) {
|
||||
numOfVideos--;
|
||||
updateLayout();
|
||||
});
|
||||
|
||||
|
||||
// --- 3) Connect to the session ---
|
||||
|
||||
// 'token' param irrelevant when using insecure version of OpenVidu. Second param will be received by every user
|
||||
// in Stream.connection.data property, which will be appended to DOM as the user's nickname
|
||||
session.connect(userId, function (error) {
|
||||
|
||||
// If the connection is successful, initialize a publisher and publish to the session
|
||||
if (!error) {
|
||||
|
||||
// --- 4) Get your own camera stream with the desired resolution ---
|
||||
|
||||
publisher = OV.initPublisher('publisher', {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
numOfVideos++;
|
||||
updateLayout();
|
||||
});
|
||||
|
||||
// --- 5) Publish your stream ---
|
||||
|
||||
session.publish(publisher);
|
||||
|
||||
} else {
|
||||
console.log('There was an error connecting to the session:', error.code, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
window.history.pushState("", "", '/' + sessionId);
|
||||
|
||||
showSessionHideJoin();
|
||||
initializeSessionView();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function leaveRoom() {
|
||||
|
||||
// 6) Leave the session by calling 'disconnect' method over the Session object
|
||||
session.disconnect();
|
||||
showJoinHideSession();
|
||||
|
||||
window.location.href = window.location.origin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* AUXILIARY MEHTODS */
|
||||
|
||||
function muteAudio() {
|
||||
audioEnabled = !audioEnabled;
|
||||
publisher.publishAudio(audioEnabled);
|
||||
if (!audioEnabled) {
|
||||
$('#mute-audio').removeClass('btn-primary');
|
||||
$('#mute-audio').addClass('btn-default');
|
||||
} else {
|
||||
$('#mute-audio').addClass('btn-primary');
|
||||
$('#mute-audio').removeClass('btn-default');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function muteVideo() {
|
||||
videoEnabled = !videoEnabled;
|
||||
publisher.publishVideo(videoEnabled);
|
||||
|
||||
if (!videoEnabled) {
|
||||
$('#mute-video').removeClass('btn-primary');
|
||||
$('#mute-video').addClass('btn-default');
|
||||
} else {
|
||||
$('#mute-video').addClass('btn-primary');
|
||||
$('#mute-video').removeClass('btn-default');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate a random string for sessionId and userId
|
||||
function randomString() {
|
||||
return Math.random().toString(36).slice(2);
|
||||
}
|
||||
|
||||
// 'Session' page
|
||||
function showSessionHideJoin() {
|
||||
$('#join').hide();
|
||||
$('#session').show();
|
||||
}
|
||||
|
||||
// 'Join' page
|
||||
function showJoinHideSession() {
|
||||
$('#join').show();
|
||||
$('#session').hide();
|
||||
}
|
||||
|
||||
// Prepare HTML dynamic elements (URL clipboard input)
|
||||
function initializeSessionView() {
|
||||
// Tooltips
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
// Input clipboard
|
||||
$('#copy-input').val(window.location.href);
|
||||
$('#copy-button').bind('click', function () {
|
||||
var input = document.getElementById('copy-input');
|
||||
input.focus();
|
||||
input.setSelectionRange(0, input.value.length);
|
||||
try {
|
||||
var success = document.execCommand('copy');
|
||||
if (success) {
|
||||
$('#copy-button').trigger('copied', ['Copied!']);
|
||||
} else {
|
||||
$('#copy-button').trigger('copied', ['Copy with Ctrl-c']);
|
||||
}
|
||||
} catch (err) {
|
||||
$('#copy-button').trigger('copied', ['Copy with Ctrl-c']);
|
||||
}
|
||||
});
|
||||
|
||||
// Handler for updating the tooltip message.
|
||||
$('#copy-button').bind('copied', function (event, message) {
|
||||
$(this).attr('title', message)
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', "Copy to Clipboard")
|
||||
.tooltip('fixTitle');
|
||||
});
|
||||
}
|
||||
|
||||
// Dynamic layout adjustemnt depending on number of videos
|
||||
function updateLayout() {
|
||||
console.warn('There are now ' + numOfVideos + ' videos');
|
||||
|
||||
var publisherDiv = $('#publisher');
|
||||
var publisherVideo = $("#publisher video");
|
||||
var subscriberVideos = $('#videos > video');
|
||||
|
||||
publisherDiv.removeClass();
|
||||
publisherVideo.removeClass();
|
||||
subscriberVideos.removeClass();
|
||||
|
||||
switch (numOfVideos) {
|
||||
case 1:
|
||||
publisherVideo.addClass('video1');
|
||||
break;
|
||||
case 2:
|
||||
publisherDiv.addClass('video2');
|
||||
subscriberVideos.addClass('video2');
|
||||
break;
|
||||
case 3:
|
||||
publisherDiv.addClass('video3');
|
||||
subscriberVideos.addClass('video3');
|
||||
break;
|
||||
case 4:
|
||||
publisherDiv.addClass('video4');
|
||||
publisherVideo.addClass('video4');
|
||||
subscriberVideos.addClass('video4');
|
||||
break;
|
||||
default:
|
||||
publisherDiv.addClass('videoMore');
|
||||
publisherVideo.addClass('videoMore');
|
||||
subscriberVideos.addClass('videoMore');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* AUXILIARY METHODS */
|
||||
64
openvidu-getaroom/web/index.html
Normal file
64
openvidu-getaroom/web/index.html
Normal file
@ -0,0 +1,64 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>OpenVidu getaroom</title>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="OpenVidu.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!--Bootstrap -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossorigin="anonymous">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!--Custom styles -->
|
||||
<link rel="styleSheet" href="style.css" type="text/css" media="screen">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Join page template -->
|
||||
<div id="join" class="row no-margin" style="display: none;">
|
||||
<div class="jumbotron col-lg-4 col-md-6 col-centered">
|
||||
<h1>Join a room!</h1>
|
||||
<button type="button" class="btn btn-success" onclick="joinRoom()">Join Room</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session page template -->
|
||||
<div id="session" style="display: none;">
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-danger" onclick="leaveRoom()">Leave Room</button>
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Some path" id="copy-input">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard">Share the URL</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<button id="mute-video" type="button" class="btn btn-primary float-right mute-button" onclick="muteVideo()">
|
||||
<span class="glyphicon glyphicon-facetime-video"></span> <span class="hidden-xs">Video</span>
|
||||
</button>
|
||||
<button id="mute-audio" type="button" class="btn btn-primary float-right mute-button" onclick="muteAudio()">
|
||||
<span class="glyphicon glyphicon-volume-up"></span> <span class="hidden-xs">Audio</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="videos" class="row no-margin">
|
||||
<div id="publisher"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
146
openvidu-getaroom/web/style.css
Normal file
146
openvidu-getaroom/web/style.css
Normal file
@ -0,0 +1,146 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#join {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
div#session {
|
||||
height: 100%;
|
||||
background-color: #000000;
|
||||
position: relative;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.col-centered {
|
||||
float: none !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#publisher {
|
||||
min-width: 33%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#subscriber video {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#videos {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 200px;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
video {
|
||||
min-width: 33%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
span.glyphicon {
|
||||
min-height: 20px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
#publisher video {
|
||||
height: 100%;
|
||||
}
|
||||
#publisher video.video4 {
|
||||
width: 50%;
|
||||
}
|
||||
#publisher .video1 {
|
||||
width: 100%;
|
||||
}
|
||||
#publisher.video2 {
|
||||
height: 50%;
|
||||
}
|
||||
#publisher.video3 {
|
||||
height: 33%;
|
||||
}
|
||||
#publisher.video4 {
|
||||
height: 50%;
|
||||
width: 33%;
|
||||
}
|
||||
#publisher.videoMore {
|
||||
height: 33%;
|
||||
width: 50%;
|
||||
}
|
||||
.video2 {
|
||||
height: 50%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.video3 {
|
||||
height: 33%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.video4 {
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
.videoMore {
|
||||
height: 33%;
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.noheight {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav div.container {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 30%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mute-button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user