OpenTok, How to switch publisher source from screen capturer to camera and vice versa?

Question

I am trying to implement the feature that allows to switch between screen sharing capture and camera in the middle of the video session in an Android app. I use OpenTok SDK 2.5 for Android.

I have researched OpenTok examples (OpenTok samples) and figured they show only one feature per program sample.

Question: Should code supply two Publishers (one equipped with Camera and one with Screensharing capturer) and switch them, for example

session.unpublish();
if (currentIsCamera) {
    session.publish(screenSharingPublisher);
}
else {
    session.publish(cameraPublisher);
}

or better stick with single Publisher and flip between the BaseVideoCapturer and ScreensharingCapturer as I need?

mPublisher.setPublishVideo(false);
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
    bvc.destroy();
}
//intent to start picture capture (Ex. ACTION_IMAGE_CAPTURE)

When you resume after taking the picture, you will need to initialize again

BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
    if(bvc.isCaptureStarted() == false){
        bvc.init();
        bvc.startCapture();
        mPublisher.setPublishVideo(true);
}           
}

This sample I took from the solution setPublishVideo(false) does not free the Camera

I suspect that unpublish/publish would break the session and that is not what I want.

P.S.Sorry for my English it is not my mother language.

Answer 1

On document Ready call the video publish method

var apiKey = '<APP_KEY>';
var sessionId = '<Session ID >';//Server Side Values
var token = '<Token >';//Server Side Values
var isModerator = <Yes/No>;//Handle it on server Side
var publisher;
var screenPublisher;
var streamMode = "camera";

session = OT.initSession(apiKey, sessionId);
publishVideo();
sessionEvents(publisher);
connectSession();

Html Code

<div id="subscribers" class="container-fluid show-controls">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div classs="live-stream">
                <div class="caller-list">
                    <ul>
                        <li class="">
                            <div id="publisher" class="draggable user-camscreen">

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="controls" id="">

    <div>
        <button id="btnShareScreen" data-screen="0" class="">
            <img src="~/Content/img/Student/screenshare.svg" class="screenshare" />
        </button>
        <p class="mb-none mt-xs text-sm line-height-xs text-white">Screen</p>
    </div>
</div>

On camera/screen switch button click call

/*
    Switching between camera and screen

 */
$("#btnShareScreen").on("click", function () {
    el = $(this);
    if (el.data('screen') == 0) {
        //Publish Screen
        publishScreen();
        connectSession();
        el.data('screen', '1');
        el.find('img').attr('src', '/Content/img/Student/video-icon.svg');
        el.parent().find('p').html("Camera");
    }
    else {
        publishVideo();
        connectSession();
        el.data('screen', '0');
        el.find('img').attr('src', '/Content/img/Student/screenshare.svg');
        el.parent().find('p').html("Screen");
    }
});

All Methods

function publishVideo() {
    console.log(screenPublisher);
    if (screenPublisher != undefined) {

        endStream(screenPublisher);
    }
    createPublisherDiv();
    publisher = OT.initPublisher('publisher', function (error) {
        if (error) {
            // Look at error.message to see what went wrong.
        } else {

            session.publish(publisher, function (error) {
                if (error) {
                    // Look error.message to see what went wrong.
                } else {
                    streamMode = "camera";
                }
            });
        }
    });
}

function publishScreen() {
    OT.checkScreenSharingCapability(function (response) {
        if (!response.supported || response.extensionRegistered === false) {
            // This browser does not support screen sharing.
            $.alert({
                title: 'Alert!',
                content: 'Your Browser Does Not Support Screen Sharing',
            });
        } else if (response.extensionInstalled === false) {
            // Prompt to install the extension.
        } else {
            //Screen sharing available
            endStream(publisher);

            createPublisherDiv();

            const publish = Promise.all([
                OT.getUserMedia({
                    videoSource: 'screen'
                }),
                OT.getUserMedia({
                    videoSource: null
                })
            ]).then(([screenStream, micStream]) => {
                return screenPublisher = OT.initPublisher('publisher', {
                    videoSource: screenStream.getVideoTracks()[0],
                    audioSource: micStream.getAudioTracks()[0],
                    fitMode: "contain"
                });
            });

            publish.then(screenPublisher => {
                session.publish(screenPublisher, function (error) {
                    if (error) {
                        // Look error.message to see what went wrong.
                    } else {
                        streamMode = "screen";
                    }
                });
            }).catch(handleError);
        }
    });
}

function endStream(streamPublisher) {
    session.unpublish(streamPublisher, function () {
        //Call back 
    });
}


function connectSession() {
    session.connect(token, function (error) {
        if (error) {
            console.error('Failed to connect', error);
        }
    });
}

function sessionEvents(streamPublisher) {
    session.on({
        sessionConnected: function (event) {
            // Publish the publisher we initialzed earlier (this will trigger 'streamCreated' on other
            // clients)
            session.publish(streamPublisher, function (error) {
                if (error) {
                    console.error('Failed to publish', error);
                } else {
                    console.log("Publish success");
                }
            });
        },

        // This function runs when another client publishes a stream (eg. session.publish())
        streamCreated: function (event) {
            // Create a container for a new Subscriber, assign it an id using the streamId, put it inside
            // the element with id="subscribers"
            console.log(event.stream);
            var subOptions = {
                width: '100%', height: '100%'
            };
            var subContainer = document.createElement('div');
            subContainer.id = 'stream-' + event.stream.streamId;
            document.getElementById('subscribers').appendChild(subContainer);

            // Subscribe to the stream that caused this event, put it inside the container we just made
            subscriber = session.subscribe(event.stream, subContainer, subOptions, function (error) {
                if (error) {
                    console.error('Failed to subscribe', error);
                }
            });

        }

    });
}

/*
    OpenTok Unpublish Methods removes publisher div.That's why dynamically creating div
*/
function createPublisherDiv() {
  $('.caller-list').find('li').empty();
    var html = '<div id="publisher" class="draggable user-camscreen"></div>';

    $('.caller-list').find('li').append(html);
}

function handleError(err) {
 if (err) console.log(err.message);
}