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.

  1. Loading the javascript file
  2. Creating the JumpChat client object
  3. Handling basic events
  4. 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>