android - OpenTok，如何将发布者源从屏幕捕获器切换到相机，反之亦然？

Question

我正在尝试实现允许在 Android 应用程序的视频 session 中间切换屏幕共享捕获和相机的功能。我使用适用于 Android 的 OpenTok SDK 2.5。

我研究了 OpenTok 示例 (OpenTok samples) 并认为它们仅显示每个程序示例的一个功能。

问题:代码是否应该提供两个发布者(一个配备相机，一个配备屏幕共享捕获器)并切换它们，例如

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

还是更好地坚持使用单个 Publisher 并根据需要在 BaseVideoCapturer 和 ScreensharingCapturer 之间切换？

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

拍照后恢复时，需要重新初始化

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

我从解决方案 setPublishVideo(false) does not free the Camera 中获取的这个示例

我怀疑取消发布/发布会中断 session ，这不是我想要的。

P.S.对不起，我的英语不是我的母语。

Answer 1

在文档就绪时调用视频发布方法

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代码

<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>

在相机/屏幕切换按钮点击通话

/*
    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");
    }
});

所有方法

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);
}