Portals

WebRTC with PieSocket

Programmable Video SDK

This guide walks you through simple steps required to create a video calling application with PieSocketJS.

If you want to skip the tutorial and get right to working code examples, please see this github repository for PieSocket WebRTC examples.

The following examples are available on the repository:

• One-to-many broadcasting
• One-to-one calls
• Many-to-many conferencing
• Screen-sharing

Install PieSocketJS

Include PieSocketJS into your application using NPM

npm install piesocket-js

or, using CDN

<script src="https://unpkg.com/piesocket-js"></script>

Initialize PieSocket

Now, use the following code to initialise PieSocket:

var piesocket = new PieSocket({
    clusterId: 'YOUR_CLUSTER_ID',
    apiKey: 'YOUR_API_KEY',
    consoleLogs: true,
    notifySelf: true,
    presence: true,
    userId: "John"
});

Subscribe to a Room

Add the following HTML to your page.

<video id="self-video"></video>

Then, subscribe to a Channel room, pass video: true or audio: true or both as configuration to enable Portals.

What is a Channel room

piesocket.subscribe("video-chat-room", {
    video: true,
    onLocalVideo: (stream, video) => {
        var localVideo = document.getElementById("self-video");
        localVideo.muted = true;
        localVideo.autoplay = true;
        localVideo.srcObject = stream;
    }
});

Your browser should show your device camera's stream when you open this HTML page.

Handle Participants

Add onParticipantJoined and onParticipantLeft methods to the subscribe option, to handle remote participants, as shown below.

piesocket.subscribe("video-chat-room", {
    video: true,
    audio: true,
    onLocalVideo: (stream, video) => {
        //Creates local video 
        var localVideo = document.getElementById("self-video");
        localVideo.muted = true;
        localVideo.autoplay = true;
        localVideo.srcObject = stream;
    },
    onParticipantJoined: (uuid, stream) => {
        //Creates remote video 
        var videoHolder = document.createElement("video");
        videoHolder.setAttribute("autoplay", true);
        videoHolder.srcObject = stream;
        videoHolder.id = uuid;

        document.getElementById("video-room").append(videoHolder);
    },
    onParticipantLeft: (uuid) => {
        //Removes video element
        document.getElementById(uuid).remove();
    }
})

And that is it!

It is the most basic setup of PieSocket Portals; you can customise it to build powerful video applications.

Live demo

A live demo of the code given above is available at: https://www.piesocket.com/demos/video-calling-application/

Source code for the demo is available here: https://github.com/piesocket/piesocket-js/blob/master/examples/videoroom.html