Support & information center

How to integrate watchRTC with Vonage Video API (OpenTok)

When using the watchRTC SDK, we need to be able to bind with the WebRTC APIs before Vonage Video API is loaded.

👉 Vonage Video API is also know as OpenTok or TokBox.

In general

  • Make sure you call watchRTC.init() prior to including the opentok.min.js script file in your web page
  • If opentok.min.js is loaded prior to calling watchRTC.init() no metrics or data will be collected

If you use opentok-react

Vonage has a project known as opentok-react. It is a popular starting point for some developers.

If this is the case, then you will need to get our watchRTC SDK to load and initialize prior to including opentok.mis.js. To achieve that, follow these steps:

  1. Go to root file, the one where you import watchRTC SDK and use watchRTC.init() function
  2. Add after watchRTC import the following line:
import {preloadScript } from 'opentok-react’;Code language: JavaScript (javascript)
  1. Update export of your class/component with next HOC:
 export default preloadScript(YourComponentName)Code language: JavaScript (javascript)

Here’s what this does: This delays the opentok script from being injected and overriding everything that the watchRTC SDK needs until YourComponentName is rendered.

More about this here: https://github.com/opentok/opentok-react#preloadscript-higher-order-component

Was this article helpful?

Related Articles