Screen Sharing in Voximplant
Screen Sharing allows you to share information on your screen during a call. You can share the entire screen or one of the active windows.
The best way to understand any functionality is to build a simple demo application. Let’s create a demo app that allows username1 to make a video call to username2 and, during the call, users can share their screen with one another. The demo app has three video blocks: the first one is for your own video stream, the second one is for the incoming video stream and the third one is for viewing locally what is being shared.
To simplify the process, we will use our video chat demo as a boilerplate. You can follow the link and copy whatever piece of code you want. So let’s do it!
SCREEN SHARING REQUIREMENTS:
- Screen Sharing is available via VoxImplant WEB SDK only [at the moment].
- The participant who starts sharing the screen (the initiator) should use Chrome or Firefox. We recommend using the latest browser versions.
- IMPORTANT: if the initiator uses Chrome, a special screen-sharing extension must be installed.
- IMPORTANT: You should load your application over HTTPS (it also applies to localhost and dev environment). You won’t be able to share your screen in the apps loaded over HTTP, you will only be able to view the other participant.
1. CHROME EXTENSION
To use Screen Sharing in Chrome, you need to add a special extension.
Get the extension template from the repository: https://github.com/voximplant/voximplant-chrome-extension
Go to the folder with the Chrome extension. Open the manifest.json file and add your website to the matches section.
Then, in the address bar on a new tab, type chrome://extensions to open the Extensions page. Select the Developer mode check box to enable loading extensions from a folder. Finally, click Load unpacked extension or drag the folder with extension onto the page to load the extension. The new extension will be displayed on the page.
IMPORTANT: If you want to change manifest.json again (for example, add another test server), you should also change the version parameter, namely increase its value. Then remove the extension from Chrome and add it again.
Great! Now you have a developer version of the extension for debugging and experimenting. However, your future users won’t be happy to install the extension in such a way. That’s why you should publish your extension in Google Web Store. For details, see the official documentation.
2. JS SCENARIO
You have to create a backend JS scenario in your VoxImplant account. Go to the Scenarios section of the Control panel and create a new scenario. It could look like this:
That’s it, really! It’s just one smart helper function that will handle all the operations to connect two users. Now you need to create a new VoxImplant application called videochat at https://manage.voximplant.com/#applications, its full name will look like videochat.youraccountname.voximplant.com
Now you should create a new rule in your VoxImplant application using the new scenario. Name the rule as Intercom and leave the call pattern as default ( .* ).
Note that the application should have at least two active users, for example username1 and username2.
From this step, we need to remember:
- Full name of the application (videochat.youraccountname.voximplant.com)
- Usernames ( username1, username2 )
- Passwords for usernames ( passw0rd )
Tip: If you are confused about the concept, check these articles:
3. HTML + CSS
Remember that we are building a simple but user-friendly prototype that’s why we could use frameworks. So, let’s create index.html with mounted libraries: Bootstrap, JQuery and supporting scripts. See the index.html code here: https://github.com/voximplant/videochat/blob/master/WebApp/index.html
Note that in HTML we use two local CSS files have been mounted: css/bootstrap-dialog.css and css/app.css. We’ve added them to make the application more user friendly. You can copy their content from the repository.
4. WEB SDK
Then start writing the JS code for the application.
See the key pieces of code below, they are pretty important. The wholelisting is available at the GitHub repository.
4.1 Initialize the SDK using a new instance:
4.2 Add a minimum number of handlers to provide the correct initialization:
// assign handlers voxAPI.on(VoxImplant.Events.SDKReady, onSdkReady); voxAPI.on(VoxImplant.Events.ConnectionEstablished, onConnectionEstablished); voxAPI.on(VoxImplant.Events.ConnectionFailed, onConnectionFailed); voxAPI.on(VoxImplant.Events.ConnectionClosed, onConnectionClosed); voxAPI.on(VoxImplant.Events.AuthResult, onAuthResult); voxAPI.on(VoxImplant.Events.IncomingCall, onIncomingCall); voxAPI.on(VoxImplant.Events.MicAccessResult, onMicAccessResult); voxAPI.on(VoxImplant.Events.SourcesInfoUpdated, onSourcesInfoUpdated);
4.3 Login function
Do you remember the username(s), application name and passwords from paragraph one? You will definitely need them to use the application.
5. SCREEN SHARING
We need to add two buttons to turn ScreenSharing on/off and then make them work.
So, add the handlers with the shareScreen() and stopSharingScreen() methods to the corresponding buttons, that’s it. Note that calling shareScreen(true) allows the initiator to view what is being shared.
6. THE WHOLE CODE
Now you could check the whole demo app code here. Bear in mind that you should insert your own values (see paragraphs 2 and 4.3).
7. HOW TO USE IT
- Upload the files from the WebApp folder to your web server and open index.html#accname=YOUR_VOXIMPLANT_ACCOUNT_NAME in your browser. Note that if you are using a local web server, the browser link will be like this:
- Open your awesome demo app on two different devices.
- Allow access to your microphone and camera.
- Sign in as username1 in one demo app
- Sign in as username2 in the other demo app
- In demo app 1 where you’re logged as username1, type username2 in the @Username field, then press Call. Wait a little while the video call is being established.
- When the video stream starts, you can click Share Screen. Then a window will open in your browser prompting you to choose which screen/window you want to share. Choose the screen/window and click Share.
- The other participant will see your screen/window. You will also be able to see what you are sharing at the moment.
- To stop sharing the screen, click Stop Sharing. The screen sharing will stop immediately.