In certain scenarios, there might be a need for having multiple screens to be shared at the same time. With Vonage Video API, you have an opportunity to do exactly that.
To develop this project, you are going to need the following:
- Vonage Video API account
- Video API documentation
- Clone certain GitHub repositories
We will use a Basic Video Chat sample from the Opentok Github directory as a starting point for this tutorial. Please download the following repository — https://github.com/opentok/opentok-web-samples and we will be working with the Basic Video Chat part of this repository.
We will be using a session ID and token generated through your Vonage Video API account. Please visit tokbox.com/account to do so and copy-paste information to the
config.js file of the repository. For a deployed application, it is recommended that you generate session IDs and tokens via the backend server.
In the Basic Video Chat sample app, navigate to the index.html, and let’s add a button for the screen share.
Add the following code in the
<body> of the HTML page:
Now navigate to the
js/app.js part of the codebase and add the following
After this, go back to the
index.html file and add the
<div> for the screensharing stream:
We would like to keep publisher, subscriber, and screen-share streams separate to make sure that users can also see each other during the screen sharing activity. You can update the
css/app.css file to add additional layout styling; however, without any changes, the screen-sharing streams will appear in the upper left corner.
To test this, open the
index.html file in your browser (such as Google Chrome), publish your video and click the "Share your screen" button underneath your video stream. Afterwards, join from a different device or browser to test this out!