Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

The Vonage Video API Hardware Setup component

Source CodeSample

The OpenTok Hardware Setup component provides a user interface for clients using the [OpenTok.js] 1 library to select the camera and microphone. The client can use the camera and microphone to publish a stream to an OpenTok.js session.

A pre-built version of the hardware setup component is hosted at opentok.com. You can add it to your web page with the following script tag:

<script src="https://static.opentok.com/hardware-setup/v1/js/opentok-hardware-setup.min.js"></script>

You can also build (and modify) the component from the source code at GitHub.

Using the component

Use the component along with the [OpenTok.js] 1 library.

Important restriction: The Hardware Setup component is only available on sites loaded via HTTPS.

createOpentokHardwareSetupComponent()

To initialize the Hardware Setup component, call the createOpentokHardwareSetupComponent() method. This method takes the following parameters:

The method returns a HardwareSetup object, which has the following methods: audioSource(), videoSource(), and destroy().

Example:

// Replace this with the ID of the target DOM element for the component
var element = document.querySelector('#hardware-setup');

var options = {
  insertMode: 'append' // Or use another insertMode setting.
};

var component = createOpentokHardwareSetupComponent(element, options, function(error) {
  if (error) {
    console.error('Error: ', error);
    element.innerHTML = '<strong>Error getting devices</strong>: '
      error.message;
    return;
  }
  // Add a button to call component.destroy() to close the component.
});

HardwareSetup.audioSource()

Returns an object representing the selected audio source. This object has a deviceId property, which is the unique audio device ID (a string). You can store this string in a cookie for use in a future session. You can pass the audio source object or its deviceId property as a value for the audioSource property of the properties object passed into the OT.initPublisher() method.

Example:

// component is the object returned by createOpentokHardwareSetupComponent()
var publisherOptions = {
  audioSource: component.audioSource(),
  videoSource: component.videoSource()
};
OT.initPublisher(targetElement, publisherOptions);

HardwareSetup.videoSource()

Returns an object representing the selected video source. This object has a deviceId property, which is the unique video device ID (a string). You can store this string in a cookie for use in a future session. You can pass the video source object or its deviceId property as a value for the videoSource property of the properties object passed into the OT.initPublisher() method.

Example:

// component is the object returned by createOpentokHardwareSetupComponent()
var publisherOptions = {
  audioSource: component.audioSource(),
  videoSource: component.videoSource()
};
OT.initPublisher(targetElement, publisherOptions);

HardwareSetup.destroy()

Closes the hardware setup component (if visible) and removes it from the HTML DOM.

Example:

// component is the object returned by createOpentokHardwareSetupComponent()
component.destroy();