Share Screens Together With Your Friends and Co-workers

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.

This blog post will show how to build a simple Javascript application that utilizes Vonage Video API that allows having multiple screen share streams at the same time. This can be useful for collaboration efforts or for simple fun, such as playing a game of tic-tac-toe together with friends or family.


To develop this project, you are going to need the following:

  • Vonage Video API account
  • Basic knowledge of JavaScript
  • 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 — 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 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 screenShare() function:

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!

In conclusion, this article showed you a simple way to enhance the Basic Video Chat app with screen-sharing capabilities that allow users to share their screens simultaneously. This was done through enhancements to the HTML and JavaScript files of the existing OpenTok GitHub repository.




Developer content from the team at Vonage, including posts on our Java, Node.js, Python, DotNet, Ruby and Go SDKs

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tutorial: build a i18n app with Vue3, Vuex4 and the composition API

Lateral Movement Using Outlook’s CreateObject Method and DotNetToJScript

Intro to Node JS

Is Breakfast The Most Important Meal of The Day? ( I call bull shit!)

Hello No WordPress Gutenberg! Hello ClassicPress

Real-Time Tracking using — Node.js, WebSockets, Redis and Open Layers

Real- time tracking

How to Setup Server Blocks (Virtual Hosts) with Nginx on Digital Ocean

Building an interactive Kiosk using Vue.js & Electron

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vonage Dev

Vonage Dev

Developer content from the team at Vonage, including posts on our Java, Node.js, Python, DotNet, Ruby and Go SDKs

More from Medium

Setting a Dynamic Date filter in QuickSight (AWS)

Integrating payments in web dev, tips

How I programmed an Australian Digital ID allowing minors to enter pubs.

SMEs and Web Developers: who do you need to hire for your project?