Question

我从以下网站获取此代码http://asher2003.wordpress.com/2013/11/18/webrtc-code-example/

html文件

<!DOCTYPE html>
<html>
<head>

<meta name='keywords' content='WebRTC, HTML5, JavaScript' />
<meta name='description' content='WebRTC Reference App' />
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1'>

<base target='_blank'>

<title>WebRTC client</title>

<!-- <link rel='stylesheet' href='css/main.css' /> -->

</head>

<body>

<div id='container'>

  <div id='videos'>
    <video id='localVideo' autoplay muted></video>
    <video id='remoteVideo' autoplay></video>
  </div>

</div>

<script src='/socket.io/socket.io.js'></script>
<script src='js/main.js'></script>

</body>
</html>

server.js文件

var static = require('node-static');
var http = require('http');
var file = new(static.Server)();
var app = http.createServer(function (req, res) {
  file.serve(req, res);
}).listen(2013);

var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket){

    function log(){
        var array = [">>> Message from server: "];
      for (var i = 0; i < arguments.length; i++) {
        array.push(arguments[i]);
      }
        socket.emit('log', array);
    }

    socket.on('message', function (message) {
        log('Got message: ', message);
    // For a real app, should be room only (not broadcast)
        socket.broadcast.emit('message', message);
    });

    socket.on('create or join', function (room) {
        var numClients = io.sockets.clients(room).length;

        log('Room ' + room + ' has ' + numClients + ' client(s)');
        log('Request to create or join room', room);

        if (numClients == 0){
            socket.join(room);
            socket.emit('created', room);
        } else if (numClients == 1) {
            io.sockets.in(room).emit('join', room);
            socket.join(room);
            socket.emit('joined', room);
        } else { // max two clients
            socket.emit('full', room);
        }
        socket.emit('emit(): client ' + socket.id + ' joined room ' + room);
        socket.broadcast.emit('broadcast(): client ' + socket.id + ' joined room ' + room);

    });

});

这适用于一对一的视频会议。但是如何将其转换为广播/一对多？

我尝试更改上面一行

} else if (numClients == 1) {
                io.sockets.in(room).emit('join', room);
                socket.join(room);
                socket.emit('joined', room);

到numClients == 2但它没有用。屏幕上没有任何内容

更新我在main.js中有这个

function handleRemoteStreamAdded(event) {
  console.log('Remote stream added.');
  remoteVideo.src = window.URL.createObjectURL(event.stream);
  remoteStream = event.stream;
}

因此上述功能变为

function handleRemoteStreamAdded(event){
remoteVideo = document.createElement('video');
if(document.getElementById( "remoteVideos" ).childNodes.length == 0){
    remoteVideo.setAttribute('id','remoteVideo1');
} else {
    remoteVideo.setAttribute('id','remoteVideo2');
}
document.getElementById( "remoteVideos" ).appendChild(remoteVideo);
remoteVideo.src = window.URL.createObjectURL(event.stream);
remoteVideo.play();

}

UPDATE2

enter image description here

我收到此错误..

Answer 1

因为

io.sockets.in(room).emit('join', room);

调用已经创建的一个套接字连接（客户端），但是当你有numClients == 2时意味着你需要告诉其他两个客户发送他们的信息。

所以，使用

var clients = io.sockets.clients(room);
clients.forEach(function(client){
    client.emit('join', room);
    client.join(room);
    client.emit('joined', room);
});

这应该可以解决问题。

即使是在HTML上取代

<video id='remoteVideo' autoplay></video>

与

<div id="remoteVideos"></div>

并且在main.js中的句柄远程流或您使用过的js中，webrtc客户端找到实例化远程视频的函数，在我的例子中，函数的名称是handleRemoteStreamAdded并且添加以下内容。

remoteVideo = document.createElement('video');
if(document.getElementById( "remoteVideos" ).childNodes.length == 0){
    remoteVideo.setAttribute('id','remoteVideo1');
} else {
    remoteVideo.setAttribute('id','remoteVideo2');
}
document.getElementById( "remoteVideos" ).appendChild(remoteVideo);
remoteVideo.src = window.URL.createObjectURL(event.stream);
remoteVideo.play();

使用node.js进行一对多/广播的Webrtc

1 个答案: