JavaScript

Creating the Project Folders and HTML Template

You will start by creating an HTML file, a JavaScript file, and a CSS file. These three files will contain our layout, application logic, and some visual elements, respectively.

  1. Before 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). Then add a /js and /css folder along with blank files for index.html, app.js, and app.css in the following structure:
/myproject /js app.js /css app.css index.html

Once you have your project set up, open the main project folder in your code editor and go to the index.html file.

  1. Copy the following code (using the copy button) and add it to your index.html file in the code editor:
<html>
<head>
    <title> Vonage Getting Started </title>
    <link href="css/app.css" rel="stylesheet" type="text/css">
    <script src="https://video.standard.vonage.com/v2/js/opentok.min.js"></script>
</head>
<body>

    <div id="videos">
        <div id="subscriber"></div>
        <div id="publisher"></div>
    </div>

    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

The above code includes references to the opentok.js library as well as the JS and CSS files you created. The code also includes publisher and subscriber divs, which will contain the video streams — we'll use these classes to customize the layout later.

Basic video chat

Learn the basic concepts of the Vonage Video API platform, including how users can communicate through video, voice, and messaging. Explore a basic Vonage Video API flow.

Steps
1
Overview
2
Before You Begin
3
Configure a Vonage Video Application
4
Creating the Project Folders and HTML Template
5
Setting Up Authentication
6
Connecting to the Session and Creating a Publisher
7
Initializing the Subscriber
8
Testing your code in a browser
9
A little bit of CSS customization
10
Conclusion