Skip to content

Instantly share code, notes, and snippets.

@chintamanand

chintamanand/index.html

Created July 10, 2017 07:02
Show Gist options
  • Save chintamanand/c48d257a437f557fe7ff5ce5225805ab to your computer and use it in GitHub Desktop.
Save chintamanand/c48d257a437f557fe7ff5ce5225805ab to your computer and use it in GitHub Desktop.
Download ZIP
VIDEO_CONFERENCE // source https://jsbin.com/kaqamof
Raw
index.html
<!DOCTYPE html>
<head>
<title> VIDEO_CONFERENCE </title>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<style id="jsbin-css">
body, html {
background-color: gray;
height: 100%;
}
#videos {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#subscriber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 360px;
height: 240px;
bottom: 10px;
left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="videos">
<div id="subscriber"></div>
<div id="publisher"></div>
</div>
<script type="text/javascript" src="js/app.js"></script>
<script id="jsbin-javascript">
var apiKey = "45910582"; //it is the unique API Key
var sessionId = "1_MX40NTkxMDU4Mn5-MTQ5OTQ5MjM4NDgzM35SRmRCREQ2T2pZcUQxVlVsdXBuWnJLRDd-fg"; //it is open talk session
var token = "T1==cGFydG5lcl9pZD00NTkxMDU4MiZzaWc9YjIwNTVlZjBjYWJmOTZlOTJlMmUyY2YyZTAzODJkNmU3ZmNlNmRmZTpzZXNzaW9uX2lkPTFfTVg0ME5Ua3hNRFU0TW41LU1UUTVPVFE1TWpNNE5EZ3pNMzVTUm1SQ1JFUTJUMnBaY1VReFZsVnNkWEJ1V25KTFJEZC1mZyZjcmVhdGVfdGltZT0xNDk5NDkyNDQzJm5vbmNlPTAuNTU5Mjk2NzY5NTkwMDAwOSZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTAyMDg0NDQwJmluaXRpYWxfbGF5b3V0X2NsYXNzX2xpc3Q9"; //generate the token from developer page
//(optinal) to add the server code
function handleError(error) {
if (error) {
alert(error.message);
}
}
initializeSession();
function initializeSession() {
var session = OT.initSession(apiKey, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
});
// Create a publisher
var publisher = OT.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, publish to the session
if (error) {
handleError(error);
} else {
session.publish(publisher, handleError);
}
});
}
</script>
<script id="jsbin-source-css" type="text/css">body, html {
background-color: gray;
height: 100%;
}
#videos {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#subscriber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 360px;
height: 240px;
bottom: 10px;
left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var apiKey = "45910582"; //it is the unique API Key
var sessionId = "1_MX40NTkxMDU4Mn5-MTQ5OTQ5MjM4NDgzM35SRmRCREQ2T2pZcUQxVlVsdXBuWnJLRDd-fg"; //it is open talk session
var token = "T1==cGFydG5lcl9pZD00NTkxMDU4MiZzaWc9YjIwNTVlZjBjYWJmOTZlOTJlMmUyY2YyZTAzODJkNmU3ZmNlNmRmZTpzZXNzaW9uX2lkPTFfTVg0ME5Ua3hNRFU0TW41LU1UUTVPVFE1TWpNNE5EZ3pNMzVTUm1SQ1JFUTJUMnBaY1VReFZsVnNkWEJ1V25KTFJEZC1mZyZjcmVhdGVfdGltZT0xNDk5NDkyNDQzJm5vbmNlPTAuNTU5Mjk2NzY5NTkwMDAwOSZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTAyMDg0NDQwJmluaXRpYWxfbGF5b3V0X2NsYXNzX2xpc3Q9"; //generate the token from developer page
//(optinal) to add the server code
function handleError(error) {
if (error) {
alert(error.message);
}
}
initializeSession();
function initializeSession() {
var session = OT.initSession(apiKey, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
});
// Create a publisher
var publisher = OT.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, publish to the session
if (error) {
handleError(error);
} else {
session.publish(publisher, handleError);
}
});
}
</script></body>
</html>
Raw
jsbin.kaqamof.css
body, html {
background-color: gray;
height: 100%;
}
#videos {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#subscriber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 360px;
height: 240px;
bottom: 10px;
left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}
Raw
jsbin.kaqamof.js
var apiKey = "45910582"; //it is the unique API Key
var sessionId = "1_MX40NTkxMDU4Mn5-MTQ5OTQ5MjM4NDgzM35SRmRCREQ2T2pZcUQxVlVsdXBuWnJLRDd-fg"; //it is open talk session
var token = "T1==cGFydG5lcl9pZD00NTkxMDU4MiZzaWc9YjIwNTVlZjBjYWJmOTZlOTJlMmUyY2YyZTAzODJkNmU3ZmNlNmRmZTpzZXNzaW9uX2lkPTFfTVg0ME5Ua3hNRFU0TW41LU1UUTVPVFE1TWpNNE5EZ3pNMzVTUm1SQ1JFUTJUMnBaY1VReFZsVnNkWEJ1V25KTFJEZC1mZyZjcmVhdGVfdGltZT0xNDk5NDkyNDQzJm5vbmNlPTAuNTU5Mjk2NzY5NTkwMDAwOSZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTAyMDg0NDQwJmluaXRpYWxfbGF5b3V0X2NsYXNzX2xpc3Q9"; //generate the token from developer page
//(optinal) to add the server code
function handleError(error) {
if (error) {
alert(error.message);
}
}
initializeSession();
function initializeSession() {
var session = OT.initSession(apiKey, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
});
// Create a publisher
var publisher = OT.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, publish to the session
if (error) {
handleError(error);
} else {
session.publish(publisher, handleError);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment