Блог

У меня есть приложение NodeJS, которое копирует масштабирование. Я выяснил, как передавать аудио и видео в реальном времени между одноранговыми узлами. Теперь я застрял в точке, где мне нужно добавить опцию совместного использования экрана. Пожалуйста, подскажите мне способ изменить поток на «screenStream». Совместное использование экрана должно начинаться при нажатии кнопки с идентификатором «shareScreen».

Вот script.js файл (кстати, я использую библиотеку PeerJS для P2P-вызова и подключения:

 var socket = io('/');
var myPeer = new Peer(undefined, {
    host: 'peerjs-server.herokuapp.com',
    port: '443',
    secure: true
});

var videoGrid = document.getElementById('videoGrid');
var myVideo = document.createElement('video');
myVideo.muted = true;

var peers = {};

myPeer.on('open', (id) => {
    socket.emit('join-room', roomId, id);

    document.getElementById('disconnectButton').onclick = () => {
        socket.emit('disconnected');
        window.location = "https://www.google.com";
    }
});

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then((stream) => {

    socket.on('user-connected', (userId) => {
        connectToNewUser(userId, stream);
    });

    addVideoStream(myVideo, stream);

    myPeer.on('call', (call) => {
        call.answer(stream);
        const videoElement = document.createElement('video');
        call.on('stream', (userVideoStream) => {
            addVideoStream(videoElement, userVideoStream);
        });
    });

    document.getElementById("videoToggler").onclick = () => {
        if (stream.getVideoTracks()[0].enabled) {
            stream.getVideoTracks()[0].enabled = false;
            stream.getVideoTracks()[0].muted = false;
            document.getElementById("videoToggler").classList.remove('fa-video');
            document.getElementById("videoToggler").classList.add('fa-video-slash');
            document.getElementById("videoToggler").style.color = "#FF0000";
        } else {
            stream.getVideoTracks()[0].enabled = true;
            stream.getVideoTracks()[0].muted = true;
            document.getElementById("videoToggler").classList.remove('fa-video-slash');
            document.getElementById("videoToggler").classList.add('fa-video');
            document.getElementById("videoToggler").style.color = "#000000";
        }
    }

    document.getElementById("audioToggler").onclick = () => {
        if (stream.getAudioTracks()[0].enabled) {
            stream.getAudioTracks()[0].enabled = false;
            stream.getAudioTracks()[0].muted = false;
            document.getElementById("audioToggler").classList.remove('fa-microphone');
            document.getElementById("audioToggler").classList.add('fa-microphone-slash');
            document.getElementById("audioToggler").style.color = "#FF0000";
        } else {
            stream.getAudioTracks()[0].enabled = true;
            stream.getAudioTracks()[0].muted = true;
            document.getElementById("audioToggler").classList.remove('fa-microphone-slash');
            document.getElementById("audioToggler").classList.add('fa-microphone');
            document.getElementById("audioToggler").style.color = "#000000";
        }
    }
});

function connectToNewUser(userId, stream) {
    var call = myPeer.call(userId, stream);
    peers[userId] = call;
    const videoElement = document.createElement('video');
    call.on('stream', (userVideoStream) => {
        addVideoStream(videoElement, userVideoStream);
    });
    call.on('close', () => {
        videoElement.remove();
    });
}

function addVideoStream(videoElement, stream) {
    videoElement.autoplay = true;
    videoElement.srcObject = stream;
    videoGrid.append(videoElement);
}

socket.on('user-disconnected', (userId) => {
    peers[userId].close();
});