openvidu-insecure-js new style
This commit is contained in:
pabloFuente
parent
6bbd406902
commit
fdae18eb4b
File diff suppressed because one or more lines are too long
@ -18,12 +18,21 @@ function generateParticipantInfo() {
|
||||
}
|
||||
|
||||
function appendUserData(videoElement, connection) {
|
||||
var clientDataJSON = JSON.parse(connection.data);
|
||||
var dataNode = document.createElement('p');
|
||||
var userData;
|
||||
var nodeId;
|
||||
if (typeof connection === "string") {
|
||||
userData = connection;
|
||||
nodeId = connection;
|
||||
} else {
|
||||
userData = JSON.parse(connection.data).clientData;
|
||||
nodeId = connection.connectionId;
|
||||
}
|
||||
var dataNode = document.createElement('div');
|
||||
dataNode.className = "data-node";
|
||||
dataNode.id = "data-" + connection.connectionId;
|
||||
dataNode.innerHTML = "Nickname: " + clientDataJSON.clientData;
|
||||
dataNode.id = "data-" + nodeId;
|
||||
dataNode.innerHTML = "<p>" + userData + "</p>";
|
||||
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
|
||||
addClickListener(videoElement, userData);
|
||||
}
|
||||
|
||||
function removeUserData(connection) {
|
||||
@ -38,6 +47,22 @@ function removeAllUserData() {
|
||||
}
|
||||
}
|
||||
|
||||
function addClickListener(videoElement, userData) {
|
||||
videoElement.addEventListener('click', function () {
|
||||
var mainVideo = document.querySelector('#main-video video');
|
||||
var mainUserData = document.querySelector('#main-video p');
|
||||
if (mainVideo.src !== videoElement.src) {
|
||||
mainUserData.innerHTML = userData;
|
||||
mainVideo.src = videoElement.src;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initMainVideo(videoElement, userData) {
|
||||
document.querySelector('#main-video video').src = videoElement.src;
|
||||
document.querySelector('#main-video p').innerHTML = userData;
|
||||
}
|
||||
|
||||
/* APPLICATION SPECIFIC METHODS */
|
||||
|
||||
|
||||
@ -64,7 +89,7 @@ function joinSession() {
|
||||
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, 'subscriber');
|
||||
var subscriber = session.subscribe(event.stream, 'video-container');
|
||||
|
||||
// When the HTML video has been appended to DOM...
|
||||
subscriber.on('videoElementCreated', function (event) {
|
||||
@ -93,12 +118,17 @@ function joinSession() {
|
||||
|
||||
// --- 4) Get your own camera stream with the desired resolution ---
|
||||
|
||||
var publisher = OV.initPublisher('publisher', {
|
||||
var publisher = OV.initPublisher('video-container', {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
initMainVideo(event.element, token);
|
||||
appendUserData(event.element, token);
|
||||
});
|
||||
|
||||
// --- 5) Publish your stream ---
|
||||
|
||||
session.publish(publisher);
|
||||
@ -108,7 +138,7 @@ function joinSession() {
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('session-header').innerText = sessionId;
|
||||
document.getElementById('session-title').innerText = sessionId;
|
||||
document.getElementById('join').style.display = 'none';
|
||||
document.getElementById('session').style.display = 'block';
|
||||
|
||||
@ -128,4 +158,4 @@ function leaveSession() {
|
||||
document.getElementById('session').style.display = 'none';
|
||||
}
|
||||
|
||||
/* OPENVIDU METHODS */
|
||||
/* OPENVIDU METHODS */
|
||||
@ -1,39 +1,71 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>OpenVidu Sample</title>
|
||||
<title>openvidu-insecure-js</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<link rel="styleSheet" href="style.css" type="text/css" media="screen">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
<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>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap -->
|
||||
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
|
||||
<script src="OpenVidu.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="join">
|
||||
<h1>Join a video session</h1>
|
||||
<form onsubmit="return joinSession()" accept-charset="UTF-8">
|
||||
<p>
|
||||
<label>Participant:</label>
|
||||
<input type="text" id="participantId" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session:</label>
|
||||
<input type="text" id="sessionId" required>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" name="commit" value="Join!">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">OpenVidu Tutorial</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-js" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container vertical-center">
|
||||
<div id="join" class="jumbotron horizontal-center">
|
||||
<h1>Join a video session</h1>
|
||||
<form class="form-group" onsubmit="return joinSession()">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantId" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionId" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="session" style="display: none;">
|
||||
<div id="session-header">
|
||||
<h1 id="session-title"></h1>
|
||||
<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" onmouseup="leaveSession()" value="Leave session">
|
||||
</div>
|
||||
<div id="main-video" class="col-md-6"><p></p><video id="main-video-element" autoplay src=""></video></div>
|
||||
<div id="video-container" class="col-md-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="session" style="display: none;">
|
||||
<h2 id="session-header"></h2>
|
||||
<input type="button" id="buttonLeaveSession" onmouseup="leaveSession()" value="Leave session">
|
||||
<div id="publisher"></div>
|
||||
<div id="subscriber"></div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">OpenVidu © 2017</div>
|
||||
<a href="http://www.codeurjc.es/" target="_blank"><img src="https://codeurjc.files.wordpress.com/2016/01/logo_cetrado_negro.png?w=275&h=165"/></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@ -1,16 +1,114 @@
|
||||
#publisher {
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin: 10px;
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#subscriber {
|
||||
nav {
|
||||
height: 50px;
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
padding: 5px 15px 5px 15px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav i.fa {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
min-height: 80%;
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.footer .text-muted {
|
||||
margin: 20px 0;
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
height: 50px;
|
||||
float: right;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#session {
|
||||
padding-top: 70px;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#buttonLeaveSession {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#video-container video {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-container div {
|
||||
float: left;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
margin-left: -50%;
|
||||
}
|
||||
|
||||
#video-container p {
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#main-video p {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-size: 22px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user