Как получить аудио и видео, отправленные через дорожки WebRT C? - PullRequest
Новая
       334

Как получить аудио и видео, отправленные через дорожки WebRT C?

0 голосов
/ 18 марта 2020

Я делаю сайт WebRT C и сейчас работаю над видео-соединением один-ко-многим. Обнаружив, что addStream() устарела, я переключился на addTrack(). Однако, независимо от того, какой из них я использую, передается только аудио, а не видео. Первоначально я думал, что это потому, что я был на локальном хосте без https, но даже когда я запускаю его на своем сервере узлов, происходит то же самое. Решение будет приветствоваться.

Код хостинга ( хост. js) 

    document.addEventListener("DOMContentLoaded", () => {
    uuid = createUUID();

    localVideo = document.getElementById('localVideo');

    serverConnection = new WebSocket('wss://' + window.location.hostname + ':443');

    console.log("Opened WS on :443")

    serverConnection.onmessage = gotMessageFromServer;

    var constraints = {
        video: true,
        audio: true,
    };

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
    } else {
        alert('Your browser does not support getUserMedia API');
    }

    document.getElementById("start").addEventListener("click", (e) => {
        start(uuid)
    });
});

function getUserMediaSuccess(stream) {
    localStream = stream;
    localVideo.srcObject = stream;
}

function start(uid) {
    peerConnections[uid] = new RTCPeerConnection(peerConnectionConfig);
    peerConnections[uid].onicecandidate = gotIceCandidate;

    for (const track of localStream.getTracks()) {
        peerConnections[uid].addTrack(track, localStream);
      }
}

Код программы просмотра ( client. js) 

function pageReady() {
    uuid = createUUID();

    remoteVideo = document.getElementById('remoteVideo');
    remoteVideo.srcObject = remoteStream;
    remoteVideo.play();

    serverConnection = new WebSocket('wss://' + window.location.hostname + ':443');
    serverConnection.onmessage = gotMessageFromServer;

    var constraints = {
        video: false,
        audio: true,
    };

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
    } else {
        alert('Your browser does not support getUserMedia API');
    }

}

function getUserMediaSuccess(stream) {
    localStream = stream;

}

function start(isCaller) {
    console.log("pressed Start")
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    console.log("new RTCconnection")
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.ontrack = gotRemoteStream;
    peerConnection.addTrack(localStream.getTracks()[0]);
    peerConnection.createOffer().then((desc) => {
        createdDescription(desc);
    }).catch(errorHandler);
}

function gotRemoteStream(e) {
    console.log('got remote stream');
    if (e.streams && e.streams[0]) {
        remoteVideo.srcObject = e.streams[0];
      } else {
        if (!inboundStream) {
          inboundStream = new MediaStream();
          remoteVideo.srcObject = inboundStream;
        }
        inboundStream.addTrack(e.track);
      }
}

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

PPS Вы, вероятно, хотите больше кода, чтобы вы могли запустить его самостоятельно, поэтому репозиторий здесь . Откройте один клиент в / host и другой в / class. Убедитесь, что вы go до https://localhost, иначе это не сработает.

1 Ответ

1 голос
/ 19 марта 2020

Добавьте эту строку в клиент. js file peerConnection.addTransceiver ("video"); после вызова addtrack. 

function start(isCaller) {
    console.log("pressed Start")
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    console.log("new RTCconnection")
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.ontrack = gotRemoteStream;
    peerConnection.addTrack(localStream.getTracks()[0]);
    peerConnection.addTransceiver("video"); // The line to be added
    peerConnection.createOffer().then((desc) => {
        createdDescription(desc);
    }).catch(errorHandler);
}
...