javascriptopentoktokbox

Switch OpenTok Publisher to specific video device


When wishing to change the audio input device (i.e. microphone) of an OpenTok Publisher object, you can use:

Publisher.setAudioSource(<id_of_microphone_device_here>)

...in order to specify which microphone you'd like to switch to.


However, if you want to change the video source (i.e. camera), the only option [that I could find] is to use:

Publisher.cycleVideo()

...which returns (via a promise) the ID of the media device / webcam that you've switched to by 'cycling' up a step.

Is there a method that I can use to specifically switch to a video device ID of my choosing, without having to:

a. Re-initialize my Publisher object?

-or-

b. Cycle through my video devices until I find the one I want?


I'm asking because, let's for argument's sake, assume that a user has 10 camera inputs — some of which they don't wish to 'cycle' through live on-stream in order to get to the one they want.

Is it possible to target a video device's ID just like we can for an audio device?

Something I tried to do in order to 'hack' this to work was to first disable the video output of a publisher (Publisher.publishVideo(false)), cycle through to find the one I want, and then 're-enable' the video output. However, disabling a publisher's video output seems to have the unfortunate consequence of not being able to cycle through its video devices.


Solution

  • OpenTok Developer Advocate here.

    Unlike setAudioSource, there is no comparative method for video.

    One alternative would be to publish the video to a canvas and use that as the source for the publisher. You can learn more about doing so at https://tokbox.com/developer/guides/publish-stream/js/#canvas.

    Then utilize MediaDevices.enumerateDevices() to identify your device and write its output to the canvas. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices