Suggestions

close search

OpenTok Hardware Setup component

Source CodeSample

The OpenTok Hardware Setup component provides a user interface for clients using the OpenTok.js 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 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();