Follow guide walks you through simple steps required to create a video calling application with PieSocket portals.
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.
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 PieSocket Channel,
pass video: true
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.
Add onParticipantJoined
and onParticipantLeft
methods to the subscribe option, to handle remote participants, as shown below.
piesocket.subscribe("video-chat-channel", {
video: 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.