Getting Started¶
Embedding JumpChat into your website is easy. Follow the steps and you should be able to add video chat into your website.
Here’s an overview of the things you’ll accomplish in this tutorial.
- Loading the javascript file
- Creating the JumpChat client object
- Handling basic events
- Joining a room
Step 1: Include the javascript files¶
Include the Javascript client and the prerequisites.
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://jumpch.at/sdk/0.1/jcclient.js"></script>
...
Step 2: Initialize JumpChat client¶
Create the JumpChat client object with default settings. You can create your API key here.
<script>
// Step 2: Create client object
var jc = new JCClient({'userid': 'YOUR-USER-ID', 'apiKey': 'YOUR-API-KEY' });
</script>
Step 3: Create local video¶
Create the local video.
<script>
// Step 2: Create client object
var jc = new JCClient({'userid': 'YOUR-USER-ID', 'apiKey': 'YOUR-API-KEY' });
// Step 3: Create local video
jc.localVideo(function(video) {
video.id = 'me';
$(document.body).append(video);
});
</script>
Step 4: Handle basic events¶
Create the JumpChat client object with default settings.
<script>
// Step 2. Initialize Object
var jc = new JCClient({'userid': 'YOUR-USER-ID', 'apiKey': 'YOUR-API-KEY' });
// Step 3: Create local video
jc.localVideo(function(video) {
video.id = 'me';
$(document.body).append(video);
});
// Step 4: Handle basic events
jc.on('joined', function(e, userid) {
console.log('user ' + userid + ' joined');
});
jc.on('remoteVideoAdded', function(e, userid, videoid, video) {
video.id = userid;
$(document.body).append(video);
});
jc.on('remoteVideoRemoved', function(e, userid, videoid) {
$('#' + userid).remove();
});
</script>
Step 5: Join a room¶
Join a room on JumpChat.
<script>
// Step 2. Initialize Object
var jc = new JCClient({'userid': 'YOUR-USER-ID', 'apiKey': 'YOUR-API-KEY' });
// Step 3: Create local video
jc.localVideo(function(video) {
video.id = 'me';
$(document.body).append(video);
});
// Step 4: Handle basic events
jc.on('joined', function(e, userid) {
console.log('user ' + userid + ' joined');
});
jc.on('remoteVideoAdded', function(e, userid, videoid, video) {
video.id = userid;
$(document.body).append(video);
});
jc.on('remoteVideoRemoved', function(e, userid, videoid) {
$('#' + userid).remove();
});
// Step 5: Join room
var room = "aaaaaaaaaa";
var type = "random";
var password = "";
jc.join(room, type, password, function() {
console.log('joined');
});
</script>