.. _getting-started:

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.

.. code-block:: html


    ...
    <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 <https://jumpch.at/sdk/>`_.

.. code-block:: html

    <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.

.. code-block:: html

    <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.

.. code-block:: html

    <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.

.. code-block:: html

    <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>


Demo Link
---------

You can view the demo `here <https://jumpch.at/sdk/0.1/example1.html>`_.