---
description: Set up CC for VidyoPlatform WebRTC SDK
---

# Closed Captioning

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:

```json
{
    "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](https://vidyoclosedcaptioning-vidyoplatform-gc6c3x2x3a-uc.a.run.app/cc/api/v1)

### CC Workflow

{% hint style="info" %}
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.
{% endhint %}

#### 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:

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

Now we are good to start a service:

`closedCaptionServiceUrl` - our service URL was discovered earlier.

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

In response, you’ll receive a `subscriptionToken:`

```javascript
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:

```javascript
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.

```javascript
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.

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

`this.subscriptionToken` - cached subscription token.

At this point, your CC service has been stopped.
