Video Service

Video Service provides person-to-person and multi-user WebRTC audio / video communication capabilities. Despite its name it can be used for audio-only use cases.

Initialization

The only argument needed to initialize the Video Service is an instance of Signal Service.

// Init Video Service
var videoSvc = new bit6.Video(signalSvc);

Concepts

• A Session represents a real-time media exchange between users
• Each Session has one or more Participants
• Each Participant represents a client endpoint with identity + deviceId
• Each Participant can publish zero or more media streams/tracks into the Session
• Each Participant can subscribe to media published by other Participants

Sessions

Get a map of all Sessions this client is participating in:

// Get all Sessions
console.log('All sessions:', videoSvc.sessions);

Get notified about the current client joining and leaving sessions.

// s - Session object
// op - operation performed: 1 - add, 0 - update, -1 - delete
videoSvc.on('session', function(s, op) {
  console.log('Video Session', op, s);
});

Properties

• id - unique Session ID generated by the platform
• mode - media mode - p2p, sfu, or mcu

Create / Join / Leave

A client can create a bew Session. It is automatically added as a Participant.

// Create a Session. Callback is optional.
videoSvc.create({mode: 'p2p'}, function(err, s) {
  console.log('Session created', err, s.id);
});

To join an existing Session you need its id:

// Join a Session. Callback is optional.
var sessionId = '...';
videoSvc.join(sessionId, function(err, s) {
  console.log('Session joined', err, s.id);
});

To leave a Session this client is participating in:

session.leave();

Participants

Get a map of all the remote Participants of a Session:

console.log('All participants:', session.participants);

This client representation in the Session:

console.log('Me:', session.me);

Get notified about Participants joining and leaving a Session:

// p - Participant object
// op - operation performed: 1 - add, 0 - update, -1 - delete
session.on('participant', function(p, op) {
  console.log('Video Participant', op, p);
});

Properties

• id - participant's authenticated client id - identity/device/route
• pub - map of media kinds this remote participant is publishing
• sub - map of media kinds this remote participant is subscribing to from the local client
• subTo - media kinds the local client subscribes to from this remote participant

Map of media kinds has the format:

{
  audio: true,
  video: false,
  screen: true,
  data: true
}

Local client, represented by session.me has the following properties:

• id - participant's authenticated client id - identity/device/route
• pub - map of media kinds the local client is publishing

Media

Capture

Bit6 will call browser's getUserMedia() API automatically when you decide to publish audio / video media.

Publish

To start publishing media to a Session, specify what kinds of media you want to publish:

var media = {
  audio: true,
  video: true
};
session.me.publish(media);

If you decide to change the published media, call the same method specifying only the media that needs to change. For example, to stop publishing camera feed after the call above:

var media = {
  video: false
};
session.me.publish(media);

Subscribe

You can decide which media types you are interested in receiving from a remote Participant.

var media = {
  audio: true,
  video: false
};
participant.subscribe(media);

If the remote Participant does not yet publish the media type you specified, nothing will happen.

Video UI

If you plan to send or receive video streams, you need to handle the placement of the video elements. SDK will notify you when a new local or remote video element will need to be displayed.

// Let's say you want to display the video elements in DOM element '#container'
// v - video element to add or remove
// s - Session that has this video or null if it is a local feed
// p - Session Participant that has this video or null if it is a local feed
// op - operation. 1 - add, 0 - update, -1 - remove
function handleVideoElemChange(v, s, p, op) {
  var vc = $('#container');
  if (op < 0) {
    vc[0].removeChild(v);
  }
  else if (op > 0) {
    v.setAttribute('class', s ? 'remote' : 'local');
    vc.append(v);
  }
  // Total number of video elements (local and remote)
  var n = vc[0].children.length;
  // Display the container if we have any video elements
  if (op != 0) {
    vc.toggle(n > 0);
  }
}
// Get notified about video elements for local video feed
// v - video element to add or remove
// op - operation. 1 - add, 0 - update, -1 - remove
videoSvc.capture.on('video', function(v, op) {
  console.log('Local video elem', op, v);
  handleVideoElemChange(v, null, null, op);
});
// Get notified about new video elements for remote video feeds.
// This listener needs to be added to each Session
// v - video element to add or remove
// p - participant
// op - operation. 1 - add, 0 - update, -1 - remove
session.on('video', function(v, p, op) {
  handleVideoElemChange(v, session, p, op);
});