Как открыть 2 потока (видео и экран) и переключаться между ними - PullRequest
Новая
       3

Как открыть 2 потока (видео и экран) и переключаться между ними

1 голос
/ 25 мая 2020

Можно ли сначала запросить разрешение на захват экрана, а затем, когда это необходимо, быстро переключиться на видео или вернуться к экрану?

Прямо сейчас я могу переключаться, когда захочу, кроме каждого раза, когда пользователь переключается для захвата экрана, и он должен выбрать приложение или экран, принять его, а затем поделиться им.

Снимок экрана с выбором между приложением или экраном, принять и затем поделиться

Обновление:

для экрана захвата: 

// ask sourceId
window.postMessage('get-sourceId', '*');

window.addEventListener('message', function (event) {
    if (event.origin != window.location.origin) {
        return;
    }
    onMessageCallback(event.data);
});

function  onMessageCallback(data) {
    if (!(typeof data == 'string' || !!data.sourceId)) return;

    // "cancel" button is clicked
    if (data == 'PermissionDeniedError') {
        chromeMediaSource = 'PermissionDeniedError';
    }

    // extension notified his presence
    if (data == 'rtcmulticonnection-extension-loaded') {
        chromeMediaSource = 'desktop';
    }

    // extension shared temp sourceId
    if (data.sourceId) {
        console.log('data', data);
        sourceId = data.sourceId;
        start_capture_after_got_sourceId();
    }
}

function start_capture_after_got_sourceId () {
    stop_capture();

    var screenConstraints = {
        audio: false,
        video: {
            mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: sourceId,
                maxWidth: window.screen.width > 1920 ? window.screen.width : 1920,
                maxHeight: window.screen.height > 1080 ? window.screen.height : 1080,
                minFrameRate: 15
            }
        }
    }

    navigator.mediaDevices.getUserMedia(screenConstraints)
    .then(function(stream) {
        gotStream(stream);
    })
    .catch(function(err) {
        console.log('Error getUserMedia ', err);
        closeStream();
    });
}

для видео: 

function share_video () {
    type_share = 'video';

        var quality_size = $('#videoquality').val().split(':');
        if (navigator.userAgent.indexOf("Chrome") != -1) {
            var screenConstraints = {
                audio: true
                , video: {
                    "mandatory": {
                        "minWidth": 1080,
                        "minHeight": 720,
                        "minFrameRate": 15
                    }
                }
            }
        };

        navigator.mediaDevices.getUserMedia(screenConstraints)
        .then(function(stream) {
            gotStream(stream);
        })
        .catch(function(err) {
            console.log('Error getUserMedia ', err);
            closeStream();
        });
}

gotStream, который используется при захвате экран и видео: 

function gotStream(stream) {
    if (type_share == 'video') {
        localMediaStream_v = stream;
        document.getElementById("localVideo").srcObject = stream;
    } else {
        document.getElementById("localScreen").srcObject = stream;
        localMediaStream_s = stream;
    }

    $.ajax({
        type: 'POST',
        /*url: 'index.php?r=video/add-temp-id',*/
        data: { check_temp_id: $('#id_conference').text() },
        success: function (data) {
            var jsondata = JSON.parse(data);
            console.log('data', data);
            startSocket(jsondata['login'], jsondata['temp_pass'], 'main');

        },
        error: function (data) {
            console.log('error record to db', data);
        }
    });

}

затем откройте websocket и спросите sdp, затем: 

function createOfferZdpZero() {

    pc = new PeerConnection(pc_config, pc_constraints);
    if (type_share == 'video') {
        pc.addStream(localMediaStream_v);
    } else {
        pc.addStream(localMediaStream_s);
    }
    pc.onicecandidate = gotIceCandidate;
    pc.onaddstream = gotRemoteStream;

    pc.oniceconnectionstatechange = gotIceConnectionStateChange;

    pc.createOffer(
        gotLocalDescriptionSdpZero,
        function (error) {
            console.log(error)
        },
        {
            'offerToReceiveAudio': true
            , 'offerToReceiveVideo': true
        }
    );

}
...