VideoChat

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search

Contents

Introduction

Video chat or video calling is essentially streaming both audio and video inputs asynchronously between two or more end users. Video calling is a great way to have productive and visual communication between your users hence high popularity of this feature in QuickBlox developers community.

Typically both audio and video calling is used along with 1:1 / IM textual chat communication but there are use cases (such is in gaming or when walking / driving for example) where they are used on their own.

At QuickBlox we have first build video chat, but audio calling without picture is also possible. This is typically done to reduce the internet traffic and improve quality in poor signal areas - audio signal takes a lot of bandwidth and when live picture is added, it has to reduce the audio quality to be able to fit the sound in.

How it works

QuickBlox SDK client library works with input sources (camera, microphone), codecs, compression and then the data is streamed peer-to-peer between end users. This way video calling doesn't impact the server much so the system is highly scalable. Server however enables the handshake between end users before streaming starts to take place and also it resolves NAT traversal in case configuration of networks and firewalls between end users makes call impossible otherwise. This is done with the help of QuickBlox STUN/TURN server.

SDK & code samples

Title APIs used Description
Simple Web WebRTC (VideoChat) code sample Chat, VideoChat The VideoChat code sample allows you to easily add video calling and audio calling features into your Web app. Enable a video call function similar to FaceTime or Skype using this code sample as a basis.


Web video sample1.png

Simple iOS WebRTC (VideoChat) code sample Chat, VideoChat The VideoChat code sample allows you to easily add video calling and audio calling features into your iOS app. Enable a video call function similar to FaceTime or Skype using this code sample as a basis.


User List.png Video Call.png Incoming Call.png

Simple Android WebRTC (VideoChat) code sample Chat, VideoChat The VideoChat code sample allows you to easily add video calling and audio calling features into your iOS app. Enable a video call function similar to FaceTime or Skype using this code sample as a basis.


User List Android.png Video Call Android.png Incoming Call Android.png

Technologies used

Our latest video chat solution uses the open-source technology WebRTC. It is intended for the organisation of streaming media data between browsers or other supporting it applications for peer-to-peer technology without any additional plugins.

Get an overview of WebRTC from the Google I/O presentation.

WebRTC FAQ

To achieve real-time media communication, several transfer servers for data exchanges and a specific signaling mechanism are needed.

Their roles are:

  • Get network information such as IP addresses and ports, and exchange this with other WebRTC clients (known as peers) to enable connection, even through NATs and firewalls
  • Coordinate signaling communication to report errors and initiate or close sessions
  • Exchange information about media and client capability, such as resolution and codecs
  • Communicate streaming audio, video or data


The signaling in the QuickBox WebRTC module is implemented over the XMPP protocol using QuickBlox Chat Module. Our module is a high-level solution around WebRTC technology. Read more about signaling in the next paragraph.

Connecting to server

Chat

Check Chat page how to connect to QuickBlox Chat.

ICE servers

Also, you can customise a list of ICE servers.

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

How does WebRTC select which TURN server to use if multiple options are given? During the connectivity checking phase, WebRTC will choose the TURN relay with the lowest round-trip time. Thus, setting multiple TURN servers allows 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:

var iceServers = [
      {
        'url': 'stun:stun.l.google.com:19302'
      },
      {
        'url': 'stun:turn.quickblox.com',
        'username': 'quickblox',
        'credential': 'baccb97ba2d92d71e26eb9886da5f1e0'
      },
      {
        'url': 'turn:turn.quickblox.com:3478?transport=udp',
        'username': 'quickblox',
        'credential': 'baccb97ba2d92d71e26eb9886da5f1e0'
      },
      {
        'url': 'turn:turn.quickblox.com:3478?transport=tcp',
        'username': 'quickblox',
        'credential': 'baccb97ba2d92d71e26eb9886da5f1e0'
      }
    ]

Signaling v1.0

Next signaling protocol is used in QuickBlox WebRTC Video chat iOS/Android/Web code samples.

Developers also can use this protocol to build WebRTC library and video chat applications for other platforms.

Note:

All video chat signalling messages have type="headline" and an extra parameter <moduleIdentifier>...</moduleIdentifier>.
Check these 2 values to detect the video chat signalling message.

Call

Signal to initiate a call.

Format

<message to="..."  type="headline" id="...">
    <extraParams xmlns="jabber:client">
        <moduleIdentifier>WebRTCVideoChat</moduleIdentifier>
        <signalType>call</signalType>
        <sessionID>...</sessionID>
        <callType>...</callType>
        <sdp>...</sdp>
        <platform>...</platform>
        <callerID>...</callerID>
        <opponentsIDs>
           <opponentID>...</opponentID>
           <opponentID>...</opponentID>
           ...
        </opponentsIDs>
        <userInfo>... </userInfo>
    </extraParams>
</message>

Parameters

Parameter Description
moduleIdentifier Identifier of a module, hold WebRTCVideoChat
signalType Type of signal, hold call value
sessionID Unique id of current video chat session. Users have to use the same sessionID within particular call. Timestamp can be used as a sessionID value.
callType Type of call. Use 1 for video call, 2 for audio call
sdp Local session description, value of RTCSessionDescription.sdp property http://dev.w3.org/2011/webrtc/editor/webrtc.html#idl-def-RTCSessionDescription , obtained after ‘createOffer’ call. More info https://webrtchacks.com/sdp-anatomy
platform Type of platform. Can be ios, android, web
callerID The id of a user who initiates a call. Used for group calls
opponentsIDs Array of users ids with whom caller initiates a call. Used for group calls
userInfo Optional user info


You can also add additional custom parameters to a message to pass more information about you like avatar, full_name etc.

Accept

Signal to accept an incoming call.

Format

<message to="..."  type="headline" id="...">
    <extraParams xmlns="jabber:client">
        <moduleIdentifier>WebRTCVideoChat</moduleIdentifier>
        <signalType>accept</signalType>
        <sessionID>...</sessionID>
        <sdp>...</sdp>
        <platform>...</platform>
        <userInfo>...</userInfo>
    </extraParams>
</message>

Parameters

Parameter Description
moduleIdentifier Identifier of a module, hold WebRTCVideoChat
signalType Type of signal, hold accept value
sessionID Unique id of current video chat session. Users have to use the same sessionID within particular call. Timestamp can be used as a sessionID value.
sdp Local session description, value of RTCSessionDescription.sdp property http://dev.w3.org/2011/webrtc/editor/webrtc.html#idl-def-RTCSessionDescription , obtained after ‘createOffer’ call. More info https://webrtchacks.com/sdp-anatomy
platform Type of platform. Can be ios, android, web
userInfo Optional user info


You can also add additional custom parameters to a message to pass more information about you like avatar, full_name etc.

Reject

Signal to reject an incoming call.

Format

<message to="..."  type="headline" id="...">
    <extraParams xmlns="jabber:client">
        <moduleIdentifier>WebRTCVideoChat</moduleIdentifier>
        <signalType>reject</signalType>
        <sessionID>...</sessionID>
        <platform>...</platform>
        <userInfo>...<userInfo>
    </extraParams>
</message>

Parameters

Parameter Description
moduleIdentifier Identifier of a module, hold WebRTCVideoChat
signalType Type of signal, hold reject value
sessionID Unique id of current video chat session. Users have to use the same sessionID within particular call. Timestamp can be used as a sessionID value.
platform Type of platform. Can be ios, android, web
userInfo Optional user info

You can also add additional custom parameters to a message to pass more information about you like avatar, full_name etc.

If a client doesn't support WebRTC then he should send the auto reject request with user_info={not_supported: 1}

Hang Up

Signal to finish the call.

Format

<message to="..."  type="headline" id="...">
    <extraParams xmlns="jabber:client">
        <moduleIdentifier>WebRTCVideoChat</moduleIdentifier>
        <signalType>hangUp</signalType>
        <sessionID>...</sessionID>
        <userInfo>...</userInfo>
    </extraParams>
</message>

Parameters

Parameter Description
moduleIdentifier Identifier of a module, hold WebRTCVideoChat
signalType Type of signal, hold hangUp value
sessionID Unique id of current video chat session. Users have to use the same sessionID within particular call. Timestamp can be used as a sessionID value.
platform Type of platform. Can be ios, android, web
userInfo Optional user info


You can also add additional custom parameters to a message to pass more information about you like avatar, full_name etc.

ICE candidates

Signal to send WebRTC ICE candidates.

Format

<message to="..."  type="headline" id="...">
    <extraParams xmlns="jabber:client">
        <moduleIdentifier>WebRTCVideoChat</moduleIdentifier>
        <signalType>iceCandidates</signalType>
        <sessionID>...</sessionID>
        <iceCandidates>
            <iceCandidate>
                <sdpMLineIndex>...</sdpMLineIndex>
            	<sdpMid>...</sdpMid>
            	<candidate>...</candidate>
            </iceCandidate>
            <iceCandidate>
            	<sdpMLineIndex>...</sdpMLineIndex>
            	<sdpMid>...</sdpMid>
            	<candidate>...</candidate>
             </iceCandidate>
             ...
         </iceCandidates>
    </extraParams>
</message>

Parameters

Parameter Description
moduleIdentifier Identifier of a module, hold WebRTCVideoChat
signalType Type of signal, hold iceCandidates value
sessionID Unique id of current video chat session. Users have to use the same sessionID within particular call. Timestamp can be used as a sessionID value.
iceCandidates An array of WebRTC ICE candidates. More info http://dev.w3.org/2011/webrtc/editor/webrtc.html#idl-def-RTCIceCandidate

Update parameters

Signal to notify the opponent that some call parameters were updated.

Format

<message to="..."  type="headline" id="...">
    <extraParams xmlns="jabber:client">
        <moduleIdentifier>WebRTCVideoChat</moduleIdentifier>
        <signalType>update</signalType>
        <sessionID>...</sessionID>
        <param1>...</param1>
        <param2>...</param2>
        ...
    </extraParams>
</message>

Parameters

Parameter Description
moduleIdentifier Identifier of a module, hold WebRTCVideoChat
signalType Type of signal, hold update value
sessionID Unique id of current video chat session. Users have to use the same sessionID within particular call. Timestamp can be used as a sessionID value.


Add all changed parameters to a message to pass these updates to an opponent.