Closed Captioning

Set up CC for VidyoPlatform WebRTC SDK

First of all, Closed Captioning has to be enabled in Portal Features -> flag CcEnabled. For the VidyoPlatform <<*.platform.vidyo.io>> it has been configured already.

The next step would be to discover the Closed Captioning Service URL that we will be talking to.

CC Service Discovery

You can trigger a GET request at https://getservices.platform.vidyo.io with the corresponding response:

{
    "sendSMS": {
        "url": "https://us-central1-vidyoproduction.cloudfunctions.net/send-sms",
        "isServiceAvailable": true
    },
    "verifyPortal": {
        "url": "https://us-central1-vidyoproduction.cloudfunctions.net/verify-portal",
        "isServiceAvailable": true
    },
    "closedCaption": {
        "url": "https://vidyoclosedcaptioning-vidyoplatform-gc6c3x2x3a-uc.a.run.app/cc/api/v1",
        "isServiceAvailable": true
    },
    "eventServer": {
        "url": "wss://vpvio-events001-prod-gcp-us-va-a.platform.vidyo.io",
        "isServiceAvailable": true
    }
}

Now we know that the service is Available and the URL is:

https://vidyoclosedcaptioning-vidyoplatform-gc6c3x2x3a-uc.a.run.app/cc/api/v1

CC Workflow

You have to /Start & /Stop the CC service in order to use it AND Subscribe /Unsubscribe from the CC topic to receive the CC callbacks.

Start Service

Call /startClosedCaptioning Web Services API in order to start the CC Service. So, you have to obtain the JWT token first with the VidyoClient JS API since any WebServices REST API requires a JWT token:

const jwtToken = (await vidyoConnector.GetJWTToken()).jwtToken;

Now we are good to start a service:

closedCaptionServiceUrl - our service URL was discovered earlier.

const startServiceResponse = await fetch(closedCaptionServiceUrl +
"/startClosedCaptioning",
{headers: { "Authorization": "Bearer " + jwtToken}});

In response, you’ll receive a subscriptionToken:

const startServiceResJSON = await startServiceResponse.json();
const status = startServiceResJSON.status;
const subscriptionToken = startServiceResJSON.data.subscriptionToken;

which we’re going to use to subscribe to the topic and receive CC updates:

await vidyoConnector.SubscribeToTopic({
    topicSubscriptionToken: subscriptionToken,
    messageCallback: (data) => {
        console.log("CC: Data Received: " + data);
    },
    statusCallback: (status, message, code) => {
        if (status === "SUBSCRIPTION_SUBSCRIBED") {
            this.ccEnabled = true;  // a flag to remember
            $("#ccButton").addClass("ccOff").removeClass("ccOn"); // some generic UI
        } else if (status === "SUBSCRIPTION_UNSUBSCRIBED") {
            this.ccEnabled = false; // a flag to remember
            $("#ccButton").addClass("ccOn").removeClass("ccOff"); // some generic UI
        }
    console.log("CC: Subscribe Status: " + status + ". Message: " + message + ". Code: " + code);
    },
});

Stop Service

In order to stop the service, you have to call /stopClosedCaptioning WebServices API and Unsubscribe from the Topic. For this, you need the JWT token and subscriptionToken you used to subscribe earlier.

const stopServiceResponse = await fetch(this.closedCaptionServiceUrl +
"/stopClosedCaptioning",
{headers: { "Authorization": "Bearer " + this.jwtToken}});

this.closedCaptionServiceUrl - cached service URL this.jwtToken - cached Token, however, it’s better to obtain since the old one might expire.

await vidyoConnector.UnsubscribeFromTopic({ topicSubscriptionToken:
this.subscriptionToken });

this.subscriptionToken - cached subscription token.

At this point, your CC service has been stopped.