Solution guide: securing captions using a proxy
Use a authenticating proxy to secure captions
This guide explains how to add captions to a private video stream, and make sure only authorised users can see the captions. This guide is intended for developers integrating with CaptionHub. See the page on public/private mode for background.
Proxy approach
Our video player plugins normally fetch captions by polling a public endpoint on our CDN (captionsURL):
<script src="https://cdn.captionhub.com/live/videojs-plugin-1.21.js"></script>
<script>
...
player.CaptionHubLive({
captionsURL: "https://cdn.captionhub.com/live/public/captions/${ID}.json"
});
</script>For normal projects this endpoint is public, but it’s locked down in private mode.
In order to make sure only authorised users can see the captions, you’ll need to build a endpoint yourself that authorises the user using your preferred method. This can be anything from JWTs, SSO, and cookies to IP-whitelisting and other network based access controls.
After authorising the user, the endpoint can use our plugin captions API endpoint to fetch the response for the plugin and return it to the authorised user.
Example proxy
Here’s a simple example using Node with Express. This proxy checks for a cookie called user_id, and only allows access if it’s present. It then fetches the actual caption data from CaptionHub and returns it to the authorised client. Note this is just an example to illustrate the general workflow.
const app = express();
app.use(cookieParser(process.env.COOKIE_SECRET));
app.get('/captions/:projectId.json', async (req, res) => {
if (!req.signedCookies.user_id) {
return res.status(403).json({ error: 'Unauthorised' });
}
const response = await fetch(
`https://api.captionhub.com/api/v1/live_projects/${req.params.projectId}/plugin_captions`,
{
headers: {
Authorization: `Bearer ${process.env.CAPTIONHUB_API_TOKEN}`,
},
},
);
res.json(await response.json());
});
app.listen(3000, () => console.log('Proxy running on http://localhost:3000'));