opentok / opentok-react

React components for OpenTok.js
https://www.npmjs.com/package/opentok-react
MIT License
107 stars 105 forks source link

Is there a way to change video output just like setAudioSource? #166

Closed meljason closed 3 years ago

meljason commented 3 years ago

In the documentation I see that to change the audio source, there is setAudioSource. But for changing the camera, the only option available is cycleVideo.

However, I have a select dropdown option with the list of cameras I got with OT.getDevices. How do we change the camera using something like setAudioSource?

I am using javascript and I tried to get a workaround this by unpublishing the publisher and "restarting" the stream by initialiazing the publisher again.

So here it is:

videoSelectOption.addEventListener("change", () => {  
            var optionSelect = videoSelectOption.options[videoSelectOption.selectedIndex].id;

            session.unpublish(publisher);
            restartStream();

            // Create a publisher
            function restartStream() {
                publisher.destroy();
                publisher = OT.initPublisher(
                    "subscriber",
                    {
                        insertMode: "append",
                        style: { buttonDisplayMode: "off", nameDisplayMode: "on" },
                        width: "100%",
                        height: "100%",
                        name: displayUser(),
                        videoSource: optionSelect
                    }, err => {
                        if (err) {
                            alert("Publish error " + err.message);
                        }
                    }
                );
                session.publish(publisher);
            }
        })   

So basically, what I did here is stopping the publisher and reinitializing it. But the problem with this is it destroy the stream then comes back again which will make the user leave the session and join again. Is there a way to change the camera without having to leave the session? Something just like setAudioSource.

enricop89 commented 3 years ago

Hi, currently it's not possible to setVideoSource as you would do it with the audio source. The only way, as you said, is to use cycleCamera or unpublish/publish .

meljason commented 3 years ago

Hi, currently it's not possible to setVideoSource as you would do it with the audio source. The only way, as you said, is to use cycleCamera or unpublish/publish .

Is the unpublish/publish solution the best solution? So there is no other way to change the camera without actually unpublishing right? Which means that the user will have to leave the session and rejoin when the camera changes.

enricop89 commented 3 years ago

It depends on your use case. If you know that your users are going to have <=2 webcams most of the time, cycleVideo is fine.

Otherwise, the unpublishing approach is the way to go for now.

meljason commented 3 years ago

It depends on your use case. If you know that your users are going to have <=2 webcams most of the time, cycleVideo is fine.

Otherwise, the unpublishing approach is the way to go for now.

I see! Thank you for your reply. Really helped!

enricop89 commented 3 years ago

We released setVideoSource API on the 2.19 JS SDK https://tokbox.com/developer/sdks/js/reference/Publisher.html#setVideoSource

meljason commented 3 years ago

Perfect! Thank you!