WebRTC: как я могу передать клиенту A клиента клиенту B?

Question

Я смотрю WebRTC, но чувствую, что не понимаю полную картину. Я рассматриваю этот демонстрационный проект, в частности: https://github.com/oney/RCTWebRTCDemo/blob/master/main.js

У меня возникли проблемы с пониманием того, как я могу сопоставить 2 клиента, чтобы клиент A мог видеть видеопоток клиента B и наоборот.

Это в демо:

function getLocalStream(isFront, callback) { 
    MediaStreamTrack.getSources(sourceInfos => { 
    console.log(sourceInfos); 
    let videoSourceId; 
    for (const i = 0; i < sourceInfos.length; i++) { 
     const sourceInfo = sourceInfos[i]; 
     if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" : "back")) { 
     videoSourceId = sourceInfo.id; 
     } 
    } 
    getUserMedia({ 
     audio: true, 
     video: { 
     mandatory: { 
      minWidth: 500, // Provide your own width, height and frame rate here 
      minHeight: 300, 
      minFrameRate: 30 
     }, 
     facingMode: (isFront ? "user" : "environment"), 
     optional: [{ sourceId: sourceInfos.id }] 
     } 
    }, function (stream) { 
     console.log('dddd', stream); 
     callback(stream); 
    }, logError); 
    }); 
} 

, а затем он используется так:

socket.on('connect', function(data) { 
    console.log('connect'); 
    getLocalStream(true, function(stream) { 
    localStream = stream; 
    container.setState({selfViewSrc: stream.toURL()}); 
    container.setState({status: 'ready', info: 'Please enter or create room ID'}); 
    }); 
}); 

Вопросы:

1. Что именно MediaStreamTrack.getSources делать? Это потому, что устройства могут иметь несколько источников видео (например, 3 веб-камеры)?

2. Не getUserMedia просто включите камеру клиента? В приведенном выше коде не клиент просто просматривает видео о себе?

Я хотел бы знать, как я могу передать URL клиента А в каком-то для клиента B так, что клиент B потоков видео от клиента приходит А. Как мне это сделать? Я представляю что-то вроде этого:

1. Клиент А входит в комнату «abc123». Ожидает присоединения другого клиента
2. Клиент B входит, также присоединяется к комнате «abc123».
3. Клиент A сигнализирует о том, что Клиент B вошел в комнату, поэтому он устанавливает соединение с клиентом B
4. Клиент A и Клиент B начинают потоковое вещание со своей веб-камеры. Клиент А может видеть клиента B, и клиент B может видеть клиента A.

Как бы я сделать это с помощью библиотеки WebRTC (вы можете просто предположить, что сервер бэкенд для согласования номера создается)

Answer 1

Этот процесс называется JSEP (протокол установления сеанса JavaScript), и его можно разделить на три этапа, описанных ниже.Эти шаги запустят сразу оба клиента в помещении и может через WebSockets общается, я буду использовать ws как воображаемый WebSocket API для связи между клиентом и сервером и другими клиентами:

1. Пригласите

на этом этапе один desinged абонент создает и предложение и отправляет его через сервер другого клиента (вызываемым):

// This is only in Chrome 
var pc = new webkitRTCPeerConnection({iceServers:[{url:"stun:stun.l.google.com:19302"}]}, {optional: [{RtpDataChannels: true}]}); 

// Someone must be chosen to be the caller 
// (it can be either latest person who joins the room or the people in it) 
ws.on('joined', function() { 
    var offer = pc.createOffer(function (offer) { 
    pc.setLocalDescription(offer); 
    ws.send('offer', offer); 
    }); 
}); 

// The callee receives offer and returns an answer 
ws.on('offer', function (offer) { 
    pc.setRemoteDescription(new RTCSessionDescription(offer)); 
    pc.createAnswer(function(answer) { 
    pc.setLocalDescription(answer); 
    ws.send('answer', answer); 
    }, err => console.log('error'), {}); 
}); 

// The caller receives the answer 
ws.on('answer', function (answer) { 
    pc.setRemoteDescription(new RTCSessionDescription(answer)); 
}); 

Сейчас обе стороны обменялись SDP пакеты и готовы соединиться друг с другом.

2. Переговоры (ICE)

кандидатов ICE созданы с каждой стороны, чтобы найти способ, чтобы соединиться друг с другом, они в значительной степени IP-адреса, где они могут быть найдены: локальный, локальная сеть адрес (192.168.xx) и внешний публичный IP-адрес (ISP). Они генерируются автоматически объектом ПК.

// Both processing them on each end: 
ws.on('ICE', candidate => pc.addIceCandidate(new RTCIceCandidate(data))); 
// Both sending them: 
pc.onicecandidate = candidate => ws.send('ICE', candidate); 

После ICE переговоров, Conexion получает создъм, если вы пытаетесь подключиться клиентов через брандмауэры с обеих сторон соединения, p2p коммуникации NAT обход, но не будет работать на некоторых сценариях.

3. Данные потокового

// Once the connection is established we can start to transfer video, 
// audio or data 

navigator.getUserMedia(function (stream) { 
    pc.addStream(stream); 
}, err => console.log('Error getting User Media')); 

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

Не стесняйтесь проверить мой проект WebRTC в GitHub, где я создаю p2p-соединения в комнатах для многих участников, он находится в GitHub и имеет live demo.

Answer 2

MediaStreamTrack.getSources используется для подключения видеоустройств. Сейчас это устарело. См. Этот вопрос stack-overflow и documentation. Также см. MediaStreamTrack.getSourcesdemo and code.

Да. getUserMedia просто включает камеру. Вы можете увидеть демо и код here.

Обращайтесь к этому образцу связи & с кодом here, чтобы передавать аудио и видео между пользователями.

Также посмотрите на this на связь в реальном времени с WebRTC.