Skip to main content

Live Streaming by API Video

The Live streaming by api.video extension enables you to set up a live stream to broadcast to a large number of users.

Before you begin

  1. Sign up with api.video
  2. Get your API Key. Make sure you set up a payment method with them in order to get the Production API key. The Sandbox API Key will not work.
  3. Broadcaster needs to download and install OBS, a free and open-source software.

Extension settings

  1. Login to CometChat and select your app.
  2. Go to the Extensions section and enable the Live Streaming (Video Broadcasting) extension.
  3. Open the Settings for this extension.
  4. Enter the api.video Production API Key.
  5. You can also select whether you want to record the live stream.

How does it work?

This extension delivers 2 different configurations:

  1. The broadcaster gets the server address and streamKey.
  2. The viewers get the embed link along with a few more details.

Broadcaster

1. Get broadcast details

The CometChat SDKs provide a callExtension method that can be called to trigger this extension. The broadcaster has to provide the following:

  1. Receiver type - user or group
  2. The receiver of the broadcast link (can be a uid for a user or guid in case of a group)
CometChat.callExtension('broadcast', 'POST', 'v1/broadcast', {
receiverType: 'user/group',
receiver: 'uid/guid'
}).then(response => {
// Success response
}).catch(error => {
// Some error occured
});

If the call is successful, the method will return the following JSON response:

{
"broadcaster": {
"server": "rtmp://broadcast.api.video_s",
"streamKey": "04cb0167-5za4-4ba6-831x-efa28e1917o3"
}
}

2. Start Streaming

In order to start streaming/broadcasting, launch OBS studio and go to: Settings > Stream > Select Custom from drop-down and enter the server and streamKey.

Once the details have been entered, click OK and close the Settings Panel. Next, you can click on the "Start Streaming" button.

Viewers

The viewers can either be a Group or a User.

The recipient(s) will receive a text message with embed link and metadata as follows:

Hello! I’m currently broadcasting. Use this link to join the broadcast: https://embed.api.video/live/li3WPpN3Ixj7dTDwdtL0dKt1

Implementation

At the viewers' end, from the message object, you can fetch the metadata by calling the getMetadata() method. Using this metadata, you can fetch the broadcast details.

var metadata = message.getMetadata();
if (metadata != null) {
var injectedObject = metadata["@injected"];
if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
var extensionsObject = injectedObject["extensions"];
if (
extensionsObject != null &&
extensionsObject.hasOwnProperty("broadcast")
) {
var broadcastObject = extensionsObject["broadcast"];
}
}
}