test

Using Vidyo.io to Create a WebRTC Video Chat App

Share

by | Sep 13, 2017 | Blog, How To |

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:

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