WebRTC：将房间添加到简单的 WebRTC 和 WebSocket 应用程序 - 需要建议

Posted 2023-02-16

【中文标题】WebRTC：将房间添加到简单的 WebRTC 和 WebSocket 应用程序 - 需要建议

【英文标题】：WebRTC: Add rooms to simple WebRTC & WebSocket app - Advice Needed

【发布时间】：2017-08-12 16:17:35

【问题描述】：

我对@9​​87654324@ 和编码非常陌生，如果这不是一个明确的问题，我深表歉意。

我遵循 Shane Tully 示例 here 并对其进行了修改以在我的 AWS 服务器上运行。它正在运行查找，但一次只允许我一个连接。我想让用户输入我的 URL，后跟房间名称，以便连接到房间。

例如www.myurl.com/apple 其中 apple 是要创建的房间。这是一个示例 - 如果您在此 URL 的末尾添加 /apppl，它将创建一个房间。 （这个例子的代码比较复杂，使用socket.io。这里我使用ws for Node来创建websockets）

有人对此有什么建议吗？我的总体目标是创建一个包含视频通话功能的 android 应用程序，并使用 WebView 来显示通话功能，这就是为什么我需要为每对设备设置不同的 URL，以便它们都访问同一个房间。

提前感谢您！ 克莱尔

服务器代码：

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://***.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();

【问题讨论】：

WebRCT 太复杂了。首先，您需要完全了解架构。我现在无法回答您的问题，但我已经使用本指南实施了太久：***.com/questions/24575368/…

太好了，我去看看！是的，这很复杂，我是一名学生，被要求做一个项目来创建两个 Android 平板电脑之间的视频链接，看起来 WebRTC 会很容易，因为它到处都这么说！！！不是，但 *** 非常适合提供帮助！

这个问题貌似是关于discovery，其实不在WebRTC的范围内。如果这很复杂，那不是 WebRTC 的错。

你是对的！！我认为只是我没有足够的基础知识，所以我很难找到 WebRTC，但我认为这是因为我将它混为一谈创建视频链接的所有内容！我把它收回！！感谢您的链接，我会研究它！

【参考方案1】：

您需要更改示例中的服务器代码。现在它只是将所有消息广播给所有其他客户端。您需要做的是在服务器端设置正确的逻辑，仅向具有相同房间 ID 的客户端发送消息。

I have written a webRTC based p2p scalable broadcast following Shane Tully's example. Click here to see

您可以从这里开始，通过仅向特定客户端发送信令消息来了解我的意思。在您的情况下，消息广播应仅针对具有相同房间 ID 的客户端进行。我希望这会有所帮助！