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:
Include PieSocketJS into your application using NPM
npm install piesocket-js
or, using CDN
<script src="https://unpkg.com/piesocket-js"></script>
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"
});
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.
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.
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.
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
Facing difficulties? Use the chat box on the bottom-right corner of this page to reach us.