javascript - 使用 Node.js 进行一对多/广播的 Webrtc

标签 javascript webrtc

我从以下网站获取此代码 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);

    });

});

这对于一对一视频 session 效果很好。但是如何将其转换为广播/一对多?

我尝试更改上面的行

} 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();

}

更新2

enter image description here

我收到此错误..

最佳答案

因为

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 或您使用 webrtc 客户端的 js 中的句柄远程流上,找到实例化远程视频的函数,在我的例子中,该函数的名称是 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();

关于javascript - 使用 Node.js 进行一对多/广播的 Webrtc,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21402840/

相关文章:

javascript - Ember.js:将参数传递给嵌套路由

javascript - 使用 javascript 设置表格行的样式属性

node.js - WEBRTC 视频聊天应用程序无法在不同网络中运行

centos - 使用 Docker 在 Cent OS 6.6 中安装和运行 Kurento 媒体服务器

c# - 来自 JsonResult 的动态 ActionLink?

javascript - bootstrap-wysiwyg 在 IE 中不起作用

python - 在 Ubuntu 上构建原生 webrtc

javascript - peerjs webrtc调用响应

javascript - WebRTC firefox 约束

javascript - Twitter Bootstrap 崩溃 : change display of toggle button