Var session = OT.initSession(apiKey, sessionId) Handling all of our errors here by alerting them This method initializes a session object and then connects to the session, but we haven't defined it in our code yet.Ĭopy the following code and paste it below the existing code in your app.js file: You may have noticed the initializeSession() method being called in the last step after getting the session ID and token. Step 3: Connecting to the session and creating a publisher See the optional guide for setting up a server at the end of this tutorial.įor more information on sessions, tokens, and servers, check out Video API Basics. Important: You can continue to get the session ID and token values from your Account during testing and development, but before you go into production you must set up a server. Use the project's API Key along with the Session ID and Token you generated to replace YOUR_API_KEY, YOUR_SESSION_ID and YOUR_TOKEN in the code above (be sure to leave the quotation marks.) To do this, log into your Video API account, either create a new OpenTok API project or use an existing OpenTok API project, then go to your project page and scroll down to the Project Tools section - from there, you can generate a Session ID and Token manually. You'll need to adjust the code above by hard coding the values for the apiKey, sessionId and token. replace these values with those generated in your Video API account Start by copying the following code block and adding it to your app.js file: In a production application, these credentials should be generated by a server, but to speed things up we will just hard code the values for now. In order to connect to an OpenTok session, the client will need access to some authentication credentials - an API Key, Session ID, and Token. Pull up your blank app.js file in your code editor - most of the remaining steps will involve adding code to this file. For instructions on using the NPM package, 2: Setting up authentication This sample loads OpenTok.js directly from. The code also includes publisher and subscriber divs, which will contain the video streams - we'll use these classes to customize the layout later. The above code includes references to the OpenTok.js library as well as the JS and CSS files you just created. Once you have your project set up, open the main project folder in your code editor and go to the index.html file.Ĭopy the following code (using the copy button) and add it to your index.html file in the code editor: Then add a /js and /css folder along with blank files for index.html, app.js, and app.css in the following structure: /myproject Step 1: Creating the project folders and HTML templateįor this project, you will be creating an HTML file, a JavaScript file, and a CSS file.īefore you get started with code, go ahead and create a new project folder on your computer to house these files (the example below is called myproject but you can name it whatever you like). Google Chrome, Firefox or another supported browser.A valid Vonage Video API account - if you don't have one, you can sign up for a free trial.The repo includes a README with documentation for running and exploring the code. Want to skip this tutorial? You can jump to the completed web client code in the Basic Video Chat folder of our Web sample app repo on GitHub. Step 6: A little bit of CSS customization.Step 3: Connecting to the session and creating a publisher.Step 1: Creating the project folders and HTML template.Here are the items that will be covered in this tutorial: In this tutorial, you will be utilizing OpenTok.js, OpenTok's client-side library for the web, to quickly and easily build a real-time interactive video application. For more information on clients, servers, and sessions, see Video API Basics. The client-side code is what loads in an end-user's browser and handles the majority of OpenTok functionality, including connecting to the session, publishing audio-video streams to the session, and subscribing to other clients’ streams. All applications that use the Vonage Video API require both a client and a server component.
0 Comments
Leave a Reply. |