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.

Following examples are available on the repository:

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

Add the following HTML into 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 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.