PieSocket Portals

Programmable Video SDK

Follow guide walks you through simple steps required to create a video calling application with PieSocket portals.

Install PieSocketJS

Include PieSocketJS into your application using NPM

npm install piesocket-js

or, using CDN

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

PieSocket portals is available from v2 onwards of PieSocketJS.

Initialize PieSocket

Now, use the following code to initialize PieSocket:

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

Subscribe to a Channel

Add the following HTML into your page

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

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

piesocket.subscribe("video-chat-channel", {
    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-channel", {
    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 customize 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 avaialble here: https://github.com/piesocket/piesocket-js/blob/master/examples/videoroom.html

Help

Facing difficulties? Use the chat box on the bottom-right corner of this page to reach us.