Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs
Visit the Vonage API Developer PortalUse the OpenTok live captions API to enable real-time audio captioning of the publishers and subscribers connected to an OpenTok session.
Live captioning must be enabled at the session level via the REST API.
Live captioning is only supported in routed session.
This topic includes the following sections:
To enable live captions, initialize the OTPublisher component with the optional boolean publishCaptions property of the properties prop set to true:
<OTPublisher
style={{width: 400, height: 300}}
properties={{
publishCaptions: true,
// ... other properties
}}
/>
This setting is false by default.
You can dynamically change this property (based on a React state change) to toggle captions on and off for the published stream.
To start receiving captions, set the subscribeToCaptions property of the properties prop of the OTSubscriber component:
<OTSubscriber
style={{width: 200, height: 200}}
properties={{
subscribeToCaptions: true,
// ... other properties
}}
eventHandlers={{
captionReceived: event => {
console.log('Caption received:', event.text);
console.log('Caption final:', event.isFinal);
},
}}
/>
You can set the subscribeToCaptions property to true regardless of whether the client publishing the stream is currently publishing live captions. The subscriber will start receiving captions data once the publisher begins publishing captions.
Subscribers receive captions via the captionReceived event handler (shown above).
The captionReceived event object has two properties:
text — The text of the caption (a string)isFinal — Whether the caption text is final for a phrase (true) or partial (false).The OpenTok React Native SDK does not display the text of the captions events. You can create your own UI element to render the captions text based on captions events.
The Vonage web client SDK does not support a publisher receiving events for its own captions. To render captions for a stream published by the local client, create a hidden subscriber (to the local publisher's stream) to listen for the caption events. Set the subscribeToSelf property of the OTSubscriber to true. You should not render this subscriber's video (by setting its width and height to 0) and you should not subscribe to audio (to avoid echo, by setting subscribeToAudio to false). You can add the captions to the UI, as you would for other stream's captions. See Custom rendering of subscribers.