Voximplant. Blog

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.

screen_sharing_article

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.

01_chrome_extension

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:

VoxEngine.forwardCallToUserDirect();

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 ( .* ).

02_js_scenario

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:

Your first VoxImplant application

Handling an incoming call

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

To start using VoxImplant Web SDK, make sure that you’ve added the JavaScript library in <head>:

<script src="//cdn.voximplant.com/edge/voximplant.min.js" type="text/javascript"></script>

Then start writing the JS code for the application.

See the key pieces of code below, they are pretty important. The whole listing is available at the GitHub repository.

4.1 Initialize the SDK using a new instance:

  1. // create VoxImplant instance
  2. var voxAPI = VoxImplant.getInstance();
  3. // initialize SDK
  4. try {
  5. voxAPI.init({
  6. micRequired: true, // force microphone/camera access request
  7. videoSupport: true, // enable video support
  8. progressTone: true, // play progress tone
  9. localVideoContainerId: "voximplant_container", // element id for local video from camera or screen sharing
  10. remoteVideoContainerId: "voximplant_container"
  11. });
  12. } catch(e) {
  13. log(e);
  14. }

4.2 Add a minimum number of handlers to provide the correct initialization:

  1. // assign handlers
  2. voxAPI.on(VoxImplant.Events.SDKReady, onSdkReady);
  3. voxAPI.on(VoxImplant.Events.ConnectionEstablished, onConnectionEstablished);
  4. voxAPI.on(VoxImplant.Events.ConnectionFailed, onConnectionFailed);
  5. voxAPI.on(VoxImplant.Events.ConnectionClosed, onConnectionClosed);
  6. voxAPI.on(VoxImplant.Events.AuthResult, onAuthResult);
  7. voxAPI.on(VoxImplant.Events.IncomingCall, onIncomingCall);
  8. voxAPI.on(VoxImplant.Events.MicAccessResult, onMicAccessResult);
  9. 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.

  1. // Login function
  2. function login() {
  3. log(username+"@"+application_name+"."+account_name+".voximplant.com");
  4. voxAPI.login(username+"@"+application_name+"."+account_name+".voximplant.com", password);
  5. }

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.

  1. // Call connected
  2. function onCallConnected(e) {
  3. log("CallConnected: "+currentCall.id());
  4. if ($('#cancelButton').length) {
  5. $('#cancelButton').html('Disconnect');
  6. $('<button id="shareButton" class="btn btn-default" type="button">Share Screen</button>').insertAfter("#cancelButton");
  7. } else {
  8. $('#callButton').replaceWith('<button id="cancelButton" class="btn btn-danger" type="button">Disconnect</button>');
  9. $('<button id="shareButton" class="btn btn-default" type="button">Share Screen</button>').insertAfter("#cancelButton");
  10. $('#cancelButton').click(function() {
  11. currentCall.hangup();
  12. });
  13. }
  14. $('#shareButton').click(function() {
  15. currentCall.shareScreen(true);
  16. });
  17. sendVideo(true);
  18. showRemoteVideo(true);
  19. }
  20.  
  21. // Video stream from local screen sharing
  22. function onLocalVideoStream(e) {
  23. console.log("LOCAL VIDEO STREAM");
  24. console.log(e);
  25. if (e.type == "sharing") {
  26. $('#shareButton').html('Stop Sharing');
  27. $('#shareButton').off('click').click(function() {
  28. currentCall.stopSharingScreen();
  29. $('#shareButton').html('Share Screen');
  30. $('#shareButton').off('click').click(function() {
  31. currentCall.shareScreen(true);
  32. });
  33. });
  34. }
  35. }

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:
    https://localhost:3000/#accname=YOUR_VOXIMPLANT_ACCOUNT_NAME
  • 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.

Tagged in ,

Comments

  • James Kay

    Hopefully not a dumb question: Why is a plugin needed rather than the native webrtc support in Chrome? Are plugins needed for other browsers?

    • Alexey Aylarov

      Hi James, it’s Google’s decision, you still need to use an extension in Chrome to share your screen. Firefox doesn’t require any plugins / extensions at the moment. Using HTTPS is a must for both