WebRTC is a great technology for building video chat directly inside a web page. It is the ideal way to get occasional users, customers, etc. to join a video chat session without the friction of downloading a full video chat client. Using the VidyoClient.js you can quickly and easily embed a video chat session in just a matter of minutes. Check out the JavaScript Quick Start guide for more details.
Recently, Sachin Hegde, vidyo.io Developer Evangelist, showed how to use Vidyo.io to create a web-based video chat client in our ongoing Getting Started with Vidyo.io webinar series. In this webinar, Sachin does a code walkthrough and takes you from blank HTML page to working video chat. Pretty Cool!
Here’s the key demo from that presentation and also the source from Sachin’s quick demo:
<head>
<title>Vidyo Sample</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
var vidyoConnector;
// Callback method when VidyoIO is done loading (pointer to this method is passed in the onload parameter while including the
// VidyoClient.js file)
function onVidyoClientLoaded(status) {
console.log("VidyoClient load state - " + status.state);
if (status.state == "READY") {
VC.CreateVidyoConnector({
viewId:"renderer", // Div ID where the composited video will be rendered, see VidyoConnector.html;
viewStyle:"VIDYO_CONNECTORVIEWSTYLE_Default", // Visual style of the composited renderer
remoteParticipants:10, // Maximum number of participants to render
logFileFilter:"error",
logFileName:"",
userData:""
}).then(function (vc) {
console.log("Create success");
vidyoConnector = vc;
}).catch(function(error){
});
}
}
function joinCall(){
// To join a video conference call Connect method
vidyoConnector.Connect({
host:"prod.vidyo.io", // Server name, for most production apps it will be prod.vidyo.io
token:"XXXX", // Add generated token (https://developer.vidyo.io/documentation/4-1-16-8/getting-started#Tokens)
displayName:"Sachin", // Display name
resourceId:"demoRoom", // Room name
onSuccess: function(){
console.log("Connected!! YAY!");
},
onFailure: function(reason){
console.error("Connection failed");
},
onDisconnected: function(reason) {
console.log(" disconnected - " + reason);
}
})
}
</script>
// Including the Vidyo.io package by adding the javascript path.
<script src="https://static.vidyo.io/latest/javascript/VidyoClient/VidyoClient.js?onload=onVidyoClientLoaded"></script>
<h3>Hello Vidyo!</h3>
<button onclick="joinCall()">Connect</button>
// Div where the video conference will be rendered
<div id="renderer"></div>
</body>
</html>