tutorial

tutorial

New WebRTC Screen Sharing for Chrome

Bistri Team June 13, 2014 engineering, tutorial No comments
Screen sharing is a really convenient feature, for business purposes, for technical support, etc.

Since version 27, Google Chrome offers a screen sharing functionality. That feature was activated with a flag  [“Enable screen capture support in getUserMedia()” ].

However Google has recently decided to change the way screen sharing is implemented in Chrome.

From now on, screen sharing requires a Chrome Extension. Yes… each web site editor has to submit its own extension on the Chrome WebStore.

Now the good news: with this new implementation, you can share your entire screen or just a specific window.

As an exemple, this is how the dialog box looks like on Bistri.com when you share a screen:
WebRTC_ScreenSharing_Chrome-Ext_Popup

Neither Firefox nor Opera has support for screen sharing yet. However, you can view a screen or a window shared from Google Chrome on both Firefox and Opera.

Tutorial

  1. Create your own Chrome Extension, customizing the code of our Screen Sharing Extension on Git. Clone this extension and open the manifest.json: – line 2: modify the name attribute – line 15-20: set all domains allowed use this extension
  2. Submit your Chrome Extension on the Chrome Developer DashboardWebRTC_ScreenSharing_Chrome-Ext_NewItem
  3. Select the “Inline Installation” checkbox to allow inline install for your extension (documentation) WebRTC_ScreenSharing_Chrome-Ext_InLineInstall
  4. Copy the ItemID of your extension:WebRTC_ScreenSharing_Chrome-Ext_ItemID
  5. Add your Chrome Extension id to the init object
    BistriConference.init( {
        appId: "125...445",
        appKey: "edhh64...99v35",
        chromeExtentionId: "paoa...oan",
        userName: "John Doe"
    } );
  6. Start local stream
    BistriConference.startStream( "screen-sharing", function( stream ){
        // display stream into the page
        BistriConference.attachStream( stream, document.body );
    } );

You can test the Bistri extension on the Bistri demo conference:
http://bistri.com/demo/conf


Bistri_Video_Conference

The full Javascript SDK reference: http://developers.bistri.com/webrtc-sdk/js-sdk-reference/

Tutorial: how to build a simple video chat application in a few steps

Bistri Team July 23, 2013 demo, engineering, tutorial 5 comments

We’ve just published an howto build a simple video chat application in a few steps:
https://api.developers.bistri.com/tutorial

The code of a complete WebRTC video chat application is given at the end of the page, as a Fiddle:
http://jsfiddle.net/bistri/DJjcB/

Prerequisites:

  • Bistri Conference is compatible only with WebRTC enabled browsers: Chrome 23+, Firefox 22
  • You need to create an application on the Bistri Developers portal in order to get your personal API keys (if you don’t already have a developer account, you can freely create one at the following address: https://api.developers.bistri.com/signup)
  • Add Bistri WebRTC lib to your page