Web movie

Web video

Quickblox Docs

Enterprise
Instruments
  • Home
  • Documentation
  • Pricing
  • Enterprise
  • Contact

Sources & Demo

The WebRTC VideoChat code sample permits you lightly add movie calling features into your Web app. Enable a movie call function similar to Skype using this code sample as a basis.

It is built on top of the WebRTC technology.

Browsers support of WebRTC

  • Android Browser (latest)
  • Opera Mobile (latest)
  • Chrome for Android (latest)
  • Firefox for Android (latest)

Unluckily, these features are unsupported in IE and Safari, and iOS mobile browsers.

Note: Opera mini for Android, which has minimal functionality, does not work with this technology either.

Prepare your application for Javascript SDK

Prep includes the following steps:

  • Create QuickBlox account
  • Register an application in Dashboard
  • Integrate QuickBlox SDK into application

Register a QuickBlox account

Create application in the Admin panel

In addition, there is helpful five minute guide.

Connect the SDK and configure

Integrate movie calling to your application

Transition guide from 1.7 to Two.0 version

This migration guide will provide guidance to upgrade your existing application to SDK version Two.0:

  1. Now methods as getUserMedia, attachMediaStream, detachMediaStream, call, accept, reject, stop, update, mute, unmute, snapshot are encapsulated in session object. You can obtain it via var session = QB.webrtc.createNewSession(calleesIds, typeOfCall);
  2. Added a callback to close a session – onSessionCloseListener.
  3. Renamed the callback onSessionStateChangedListener to onSessionConnectionStateChangedListener

More detailed info on these updates find in guide below.

Connect to talk

You have to connect to the Talk because the QuickBlox Movie calling SDK exchanges signaling messages over XMPP protocol via own signaling mechanism.

More detailed info about connection to Talk you can find on Talk code sample page.

Create movie session

In order to use Movie calling API you have to create a session object – choose your opponents with whom you would like to have a movie talk and a type of session (Movie or AUDIO):

Get local Media Stream

Access local media stream

In order to have a movie talk session you have to get access to the user’s devices (webcam / microphone):

This method lets the browser asks the user for permission to use devices. The appearance of the popup varies inbetween browsers.

You should permit this dialog to access the stream. Otherwise, the browser can’t obtain access and will throw an error for the getUserMedia callback function.

Parameters

You can use following parameters with getUserMedia

Note: is useful to reduce echo cancellation

and noises in the audio/movie talk

* audio or/and movie are required

** the options object will work only if elemId exists

Localhost and the secure HTTP protocol

The request for webrtc permissions is a security measure in browsers. Note also that getUserMedia() must be used solely when on the server, not the local file system, otherwise media streaming will not work.

Also you have to use HTTPS protocol to make it works – Chrome will block it on HTTP.

Code snippets

Get only audio stream from microphone

Get only movie stream from webcam

Get both rivulets

Get stream and automatically link it to movie element on the page

Get stream and automatically link, mute and mirrored rotate it

Advanced settings

It’s also possible to set custom-built movie resolution using getUserMedia constraints.

Example of HD camera resolution constraints, i.e. minWidth: 1280, minHeight: 720:

Here is a good code sample from WebRTC team how to work with getUserMedia constraints: https://webrtc.github.io/samples/src/content/getusermedia/resolution/

Link stream on the page

You can also fasten your local media stream to HTML movie element lately if you don’t pass the elemId key in parameters to getUserMedia.

To do this use the following steps:

  • create any audio / movie element in html
  • call session.attachMediaStream(id, stream, options)

This method affixes Media Stream Object to your DOM element and auto plays it

The same method is used for remote stream, received from your opponents.

Note on Debugging

If you attempt to download and open sample in your browser, you will likely run into Cross-Origin Resource Sharing (CORS) errors since the browser will block your requests to use movie and microphone features.

To test a sample locally we recommend you setup a elementary server using Python.

To do this, open your terminal and switch directories into your sample and depending on your version of Python, run one of the following directions:

Make a call

Make a call with this method:

The extension is used to pass any extra parameters in the request to your opponents.

After this call the opponents will get an incoming call request in onCallListener callback:

If the opponent is offline at the moment then onUserNotAnswerListener callback will be fired on caller’s side:

Settings & configuration

Session settings

There are a set of pre defined Movie calling settings that you can update for your purpose:

We recommend you to create config.js configuration file in your js-application and insert your custom-built movie calling settings into it.

ICE servers

Also you can customise a list of ICE servers (via iceServers key).

We use three TURN servers: in North Virginia turn.quickblox.com, in Asia turnsingapore.quickblox.com and in Europe turnireland.quickblox.com.

How does WebRTC select which TURN server to use if numerous options are given? During the connectivity checking phase, WebRTC will choose the TURN relay with the lowest round-trip time. Thus, setting numerous TURN servers permits your application to scale-up in terms of bandwidth and number of users.

Here is a list with default settings that we use, you can customise all of them or only some particular:

Test your settings

Google has another excellent analysis contraption – test.webrtc.org

You open the settings, insert your own Numb and TURN server configuration – and commence the test.

It will then check the system and network connections to give you a nice view of what the browser is experiencing – something you can later use to understand the environment you operate in.

Accept a call

Use accept method to accept the incoming call:

After this call the opponent will get a confirmation in onAcceptCallListener callback:

Next, caller will get also remote media stream from the opponent in onRemoteStreamListener function

From this point you have a working ready to go real-time videochat!

Reject a call

Use the reject method to decline an incoming call:

After this call the opponent will get a reject signal in onRejectCallListener callback:

End a call

Either participant can end the call anytime with the following method:

After this call the opponent will get a stop signal in onStopCallListener callback:

Track session state

There is a callback function to track the session state:

The possible values of connectionState are those of an enum of type QB.webrtc.SessionConnectionState:

  • QB.webrtc.SessionConnectionState.UNDEFINED
  • QB.webrtc.SessionConnectionState.CONNECTING
  • QB.webrtc.SessionConnectionState.CONNECTED
  • QB.webrtc.SessionConnectionState.FAILED
  • QB.webrtc.SessionConnectionState.DISCONNECTED
  • QB.webrtc.SessionConnectionState.CLOSED
  • QB.webrtc.SessionConnectionState.Finished

Notify opponents about any updates

Sometimes you make switches on the client side (e.g. switching the camera feed orientation from portrait to landscape) that need to be fed to the opponents and updated. For this, you can use the update function to send instructions to the opponents on how to update the UI.

After this call the opponent will get a signal in onUpdateCallListener callback:

Mute the stream

You can disable some of your local media stream at any time with mute(type) method:

Naturally, you can unmute the stream with the following methods:

Stats reporting

You are able to observe stats provided by WebRTC.

To begin collecting report information do the following on config:

And listen for stats reports in callback:

More info on stats keys is here

Recording a stream

We recommend using qbMediaRecorderJS to record rivulets, download the recorded files and checking available mimeTypes in your browser. Check out docs / sample of qbMediaRecorderJS.

To test the sample recommend using several audio/movie sources. We welcome your suggestions for the development of the contraption.

Deprecated feature (QB.Recorder).

Support: Firefox 47, Chrome 49, Opera 40.

You can record a stream or a few rivulets by using QB.Recorder.

Now QB.Recorder is in beta version, so be careful with this functionality.

See more functions in our WebRTC sample. The recorder is available in a peer-to-peer call.

Web movie

Quickblox Docs

Enterprise
Devices
  • Home
  • Documentation
  • Pricing
  • Enterprise
  • Contact

Sources & Demo

The WebRTC VideoChat code sample permits you lightly add movie calling features into your Web app. Enable a movie call function similar to Skype using this code sample as a basis.

It is built on top of the WebRTC technology.

Browsers support of WebRTC

  • Android Browser (latest)
  • Opera Mobile (latest)
  • Chrome for Android (latest)
  • Firefox for Android (latest)

Unluckily, these features are unsupported in IE and Safari, and iOS mobile browsers.

Note: Opera mini for Android, which has minimal functionality, does not work with this technology either.

Prepare your application for Javascript SDK

Prep includes the following steps:

  • Create QuickBlox account
  • Register an application in Dashboard
  • Integrate QuickBlox SDK into application

Register a QuickBlox account

Create application in the Admin panel

In addition, there is helpful five minute guide.

Connect the SDK and configure

Integrate movie calling to your application

Transition guide from 1.7 to Two.0 version

This migration guide will provide guidance to upgrade your existing application to SDK version Two.0:

  1. Now methods as getUserMedia, attachMediaStream, detachMediaStream, call, accept, reject, stop, update, mute, unmute, snapshot are encapsulated in session object. You can obtain it via var session = QB.webrtc.createNewSession(calleesIds, typeOfCall);
  2. Added a callback to close a session – onSessionCloseListener.
  3. Renamed the callback onSessionStateChangedListener to onSessionConnectionStateChangedListener

More detailed info on these updates find in guide below.

Connect to talk

You have to connect to the Talk because the QuickBlox Movie calling SDK exchanges signaling messages over XMPP protocol via own signaling mechanism.

More detailed info about connection to Talk you can find on Talk code sample page.

Create movie session

In order to use Movie calling API you have to create a session object – choose your opponents with whom you would like to have a movie talk and a type of session (Movie or AUDIO):

Get local Media Stream

Access local media stream

In order to have a movie talk session you have to get access to the user’s devices (webcam / microphone):

This method lets the browser asks the user for permission to use devices. The appearance of the popup varies inbetween browsers.

You should permit this dialog to access the stream. Otherwise, the browser can’t obtain access and will throw an error for the getUserMedia callback function.

Parameters

You can use following parameters with getUserMedia

Note: is useful to reduce echo cancellation

and noises in the audio/movie talk

* audio or/and movie are required

** the options object will work only if elemId exists

Localhost and the secure HTTP protocol

The request for webrtc permissions is a security measure in browsers. Note also that getUserMedia() must be used solely when on the server, not the local file system, otherwise media streaming will not work.

Also you have to use HTTPS protocol to make it works – Chrome will block it on HTTP.

Code snippets

Get only audio stream from microphone

Get only movie stream from webcam

Get both rivulets

Get stream and automatically fasten it to movie element on the page

Get stream and automatically fasten, mute and mirrored rotate it

Advanced settings

It’s also possible to set custom-built movie resolution using getUserMedia constraints.

Example of HD camera resolution constraints, i.e. minWidth: 1280, minHeight: 720:

Here is a good code sample from WebRTC team how to work with getUserMedia constraints: https://webrtc.github.io/samples/src/content/getusermedia/resolution/

Fasten stream on the page

You can also link your local media stream to HTML movie element lately if you don’t pass the elemId key in parameters to getUserMedia.

To do this use the following steps:

  • create any audio / movie element in html
  • call session.attachMediaStream(id, stream, options)

This method fastens Media Stream Object to your DOM element and auto plays it

The same method is used for remote stream, received from your opponents.

Note on Debugging

If you attempt to download and open sample in your browser, you will likely run into Cross-Origin Resource Sharing (CORS) errors since the browser will block your requests to use movie and microphone features.

To test a sample locally we recommend you setup a ordinary server using Python.

To do this, open your terminal and switch directories into your sample and depending on your version of Python, run one of the following directives:

Make a call

Make a call with this method:

The extension is used to pass any extra parameters in the request to your opponents.

After this call the opponents will get an incoming call request in onCallListener callback:

If the opponent is offline at the moment then onUserNotAnswerListener callback will be fired on caller’s side:

Settings & configuration

Session settings

There are a set of pre defined Movie calling settings that you can update for your purpose:

We recommend you to create config.js configuration file in your js-application and insert your custom-made movie calling settings into it.

ICE servers

Also you can customise a list of ICE servers (via iceServers key).

We use three TURN servers: in North Virginia turn.quickblox.com, in Asia turnsingapore.quickblox.com and in Europe turnireland.quickblox.com.

How does WebRTC select which TURN server to use if numerous options are given? During the connectivity checking phase, WebRTC will choose the TURN relay with the lowest round-trip time. Thus, setting numerous TURN servers permits your application to scale-up in terms of bandwidth and number of users.

Here is a list with default settings that we use, you can customise all of them or only some particular:

Test your settings

Google has another fine analysis contraption – test.webrtc.org

You open the settings, insert your own Overwhelm and TURN server configuration – and embark the test.

It will then check the system and network connections to give you a nice view of what the browser is experiencing – something you can later use to understand the environment you operate in.

Accept a call

Use accept method to accept the incoming call:

After this call the opponent will get a confirmation in onAcceptCallListener callback:

Next, caller will get also remote media stream from the opponent in onRemoteStreamListener function

From this point you have a working ready to go real-time videochat!

Reject a call

Use the reject method to decline an incoming call:

After this call the opponent will get a reject signal in onRejectCallListener callback:

End a call

Either participant can end the call anytime with the following method:

After this call the opponent will get a stop signal in onStopCallListener callback:

Track session state

There is a callback function to track the session state:

The possible values of connectionState are those of an enum of type QB.webrtc.SessionConnectionState:

  • QB.webrtc.SessionConnectionState.UNDEFINED
  • QB.webrtc.SessionConnectionState.CONNECTING
  • QB.webrtc.SessionConnectionState.CONNECTED
  • QB.webrtc.SessionConnectionState.FAILED
  • QB.webrtc.SessionConnectionState.DISCONNECTED
  • QB.webrtc.SessionConnectionState.CLOSED
  • QB.webrtc.SessionConnectionState.Finished

Notify opponents about any updates

Sometimes you make switches on the client side (e.g. switching the camera feed orientation from portrait to landscape) that need to be fed to the opponents and updated. For this, you can use the update function to send instructions to the opponents on how to update the UI.

After this call the opponent will get a signal in onUpdateCallListener callback:

Mute the stream

You can disable some of your local media stream at any time with mute(type) method:

Naturally, you can unmute the stream with the following methods:

Stats reporting

You are able to observe stats provided by WebRTC.

To commence collecting report information do the following on config:

And listen for stats reports in callback:

More info on stats keys is here

Recording a stream

We recommend using qbMediaRecorderJS to record rivulets, download the recorded files and checking available mimeTypes in your browser. Check out docs / sample of qbMediaRecorderJS.

To test the sample recommend using several audio/movie sources. We welcome your suggestions for the development of the implement.

Deprecated feature (QB.Recorder).

Support: Firefox 47, Chrome 49, Opera 40.

You can record a stream or a few rivulets by using QB.Recorder.

Now QB.Recorder is in beta version, so be careful with this functionality.

See more functions in our WebRTC sample. The recorder is available in a peer-to-peer call.

Related video:

Leave a Reply

Your email address will not be published. Required fields are marked *

*