WebRTC: добавить комнаты в простое приложение WebRTC & WebSocket - Требуется консультация

Question

Я очень новичок в webrtc и кодирование, поэтому извиняюсь, если это не ясный вопрос.

Я последовал примеру Шейна Талли и исправил его, чтобы он работал на моем сервере AWS. Это работает находка, но он позволяет мне только одно соединение за раз. Я хотел бы, чтобы пользователи вводили мой URL, а затем имя комнаты для подключения к комнате.

например, www.myurl.com/apple, где яблоко - это комната, которая будет создана. Вот пример - если вы добавите /apppl в конце этого URL, это создаст комнату. (Код для этого примера довольно сложный и использует socket.io, где я использую ws для Node для создания веб-сокетов)

У кого-нибудь есть совет по этому поводу? Моя общая цель - создать приложение для Android, которое включает в себя функцию видеовызова и использует WebView для отображения функции вызова, поэтому мне нужны разные URL-адреса для каждой пары устройств, чтобы они оба имели доступ к одной и той же комнате.

Заранее спасибо! Claire

Код сервера:

const HTTPS_PORT = 443;
const fs = require('fs');
const https = require('https');
const WebSocket = require('ws');
const WebSocketServer = WebSocket.Server;

const serverConfig = {
    key: fs.readFileSync('key.pem'),
    cert: fs.readFileSync('cert.pem'),
};

// ----------------------------------------------------------------------------------------

// Create a server for the client html page
var handleRequest = function(request, response) {
    // Render the single client html file for any request the HTTP server receives
    console.log('request received: ' + request.url);

    if(request.url === '/') {
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.end(fs.readFileSync('client/index.html'));

    } else if(request.url === '/webrtc.js') {
        response.writeHead(200, {'Content-Type': 'application/javascript'});
        response.end(fs.readFileSync('client/webrtc.js'));
    }
};

var httpsServer = https.createServer(serverConfig, handleRequest);
httpsServer.listen(HTTPS_PORT, '0.0.0.0');

// ----------------------------------------------------------------------------------------

// Create a server for handling websocket calls
var wss = new WebSocketServer({server: httpsServer});

wss.on('connection', function(ws) {
    ws.on('message', function(message) {
        // Broadcast any received message to all clients
        console.log('received: %s', message);
        wss.broadcast(message);
    });
});

wss.broadcast = function(data) {
    this.clients.forEach(function(client) {
        if(client.readyState === WebSocket.OPEN) {
            client.send(data);
        }
    });
};

console.log('Server running. Visit https://localhost:' + HTTPS_PORT + ' in Firefox/Chrome (note the HTTPS; there is no HTTP -> HTTPS redirect!)');
//console.log("TEST TEST TEST" + JSON.stringify(room));

Код клиента:

var localVideo;
var remoteVideo;
var peerConnection;
var uuid;
var constraints = {
        video: true,
        audio: true,
    };

var peerConnectionConfig = {
    'iceServers': [
        {'urls': 'stun:stun.services.mozilla.com'},
        {'urls': 'stun:stun.l.google.com:19302'},
    ]
};

function pageReady() {
    uuid = uuid(); 

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

    if(navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);

    } else {
        alert('Your browser does not support getUserMedia API');
    }
}

//CB if it is possible to run gerUserMedia then gets the local video stream
function getUserMediaSuccess(stream) {
    localStream = stream;
    localVideo.src = window.URL.createObjectURL(stream); //Depreciated
    //localVideo.srcObject = stream;
}


//CB this function starts the call 
function start(isCaller) {
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.onaddstream = gotRemoteStream;
    //peerConnection.ontrack = gotRemoteStream;
    peerConnection.addStream(localStream);

    if(isCaller) {
        peerConnection.createOffer().then(createdDescription).catch(errorHandler);
    }
}

function gotMessageFromServer(message) {
    if(!peerConnection) start(false);

    var signal = JSON.parse(message.data);

    // Ignore messages from ourself
    if(signal.uuid == uuid) return;

    if(signal.sdp) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
            // Only create answers in response to offers
            if(signal.sdp.type == 'offer') {
                peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
            }
        }).catch(errorHandler);
    } else if(signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
    }
}

function gotIceCandidate(event) {
    if(event.candidate != null) {
        serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
    }
}

function createdDescription(description) {
    console.log('got description');

    peerConnection.setLocalDescription(description).then(function() {
        serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
    }).catch(errorHandler);
}

function gotRemoteStream(event) {
    console.log('got remote stream');
    remoteVideo.src = window.URL.createObjectURL(event.stream); 
    //remoteVideo.src = event.stream;
}

function errorHandler(error) {
    console.log(error);
}

// Taken from http://stackru.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function uuid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }

  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

Answer 1

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

Я написал масштабируемую трансляцию p2p на основе webRTC по примеру Шейна Талли. Нажмите здесь, чтобы увидеть

Вы можете следовать отсюда и понять, что я имею в виду, отправляя сигнальные сообщения только определенным клиентам. В вашем случае рассылка сообщений должна происходить только для тех клиентов, у которых одинаковый идентификатор комнаты. Надеюсь, это поможет!!