WebRTC 视频Demo

  在本节中，我们将构建一个客户端应用程序，允许两个用户在不同的设备上使用webrtc通信。我们的应用将有两页:一个用于登录,另一个用于通讯。

  这两个页面将包含在div标签中。大多数输入是通过简单事件处理程序完成的。

信令服务器

  要创建webRTC连接客户端，必须能够传输消息而不使用webRTC对等连接。这是我们将使用html5 WebSockets-用于建立浏览器和服务器之间的双向套接字连接。现在让我们开始使用WebSockets创建server.js文件并插入以下代码:

  //require our websocket library 

var WebSocketServer = require('ws').Server; 

//creating a websocket server at port 9090 

var wss = new WebSocketServer({port: 9090});

//when a user connects to our sever 

wss.on('connection', function(connection) { 

   console.log("user connected"); 

   //when server gets a message from a connected user 

   connection.on('message', function(message) { 

      console.log("Got message from a user:", message); 

   }); 

   connection.send("Hello from server");

});

  第一行中我们引用已经安装的websocket库,如果没有安装请先进行安装(npm install ws)。然后在端口号9090上创建一个socket服务器。接下来，我们监听连接事件。当用户对服务器建立websocket连接时，将执行connection方法。然后我们监听用户发送的消息。最后，我们向连接的用户发送响应“Hello from server”。

  在我们的信令服务器中，我们将为每个连接使用基于字符串的用户名，以便我们知道发送消息的信息。让我们更改我们的连接处理程序:connection.on('message', 

function(message) { 
   var data; 
   //accepting only JSON messages 
   try { 
      data = JSON.parse(message); 
   } catch (e) { 
      console.log("Invalid JSON"); 
      data = {}; 
   } 
});

  我们只接受JSON消息。接下来，我们需要将连接的用户存储在某个地方。我们将使用一个简单的JavaScript对象来保存用户信息。更改server.js的顶部:

//require our websocket library 
var WebSocketServer = require('ws').Server; 

//creating a websocket server at port 9090 
var wss = new WebSocketServer({port: 9090}); 

//all connected to the server users 
var users = {};//这里是新增加的变量

  我们将为来自客户端的消息添加一个类型字段。例如，如果用户想要登录，他会发送login

类型消息。让我们定义它:

connection.on('message', function(message) { 
   var data; 
   //accepting only JSON messages 
   try { 
      data = JSON.parse(message);
   } catch (e) { 
      console.log("Invalid JSON"); 
      data = {}; 
   } 
   //switching type of the user message 
   switch (data.type) { 
      //when a user tries to login 
      case "login": 
         console.log("User logged:", data.name); 
         //if anyone is logged in with this username then refuse 
         if(users[data.name]) { 
            sendTo(connection, { 
               type: "login", 
               success: false 
            }); 
         } else { 
            //save user connection on the server 
            users[data.name] = connection; 
            connection.name = data.name; 
            sendTo(connection, { 
               type: "login", 
               success: true 
            }); 
         } 
         break;
      default: 
         sendTo(connection, { 
            type: "error", 
            message: "Command no found: " + data.type 
         }); 
         break;
   }  
});

  如果用户使用登录类型发送消息，则:

• 1.检查是否有人已使用此用户名登录

• 2.如果是，那么告诉用户他没有成功登录

• 3.如果没有人使用此用户名，我们将用户名作为连接对象的key。

• 4.如果命令不被识别，我们发送错误。

  下面的代码是用于将消息发送到连接的helper函数。将它添加到server.js文件中:

function sendTo(connection, message) { 
   connection.send(JSON.stringify(message)); 
}

  当用户断开连接时，我们应该清理其连接。当关闭事件触发时，我们可以删除用户。将以下代码添加到连接处理程序:

connection.on("close", function() { 
   if(connection.name) { 
      delete users[connection.name]; 
   } 
});

  在成功登录后，用户希望跟其他用户建立链接的请求。他应该向另一个用户提供实现它的提议。添加提供处理程序:

case "offer": 
   //for ex. UserA wants to call UserB 
   console.log("Sending offer to: ", data.name);
   //if UserB exists then send him offer details 
   var conn = users[data.name]; 
   if(conn != null) { 
      //setting that UserA connected with UserB 
      connection.otherName = data.name; 
      sendTo(conn, { 
         type: "offer",
         offer: data.offer, 
         name: connection.name 
      }); 
   }  
   break;

  首先，我们得到我们想要调用的用户的连接。如果存在，我们就派他提供细节。我们还向连接对象添加othername。这是为了便于后来找到它的简单性。

  对响应的回答有一个类似的模式，我们在提供处理程序中使用。我们的服务器只通过所有消息作为对另一个用户的应答。在提供处理程序后添加以下代码case "answer": 

   console.log("Sending answer to: ", data.name); 
   //for ex. UserB answers UserA 
   var conn = users[data.name]; 
   if(conn != null) { 
      connection.otherName = data.name; 
      sendTo(conn, { 
         type: "answer", 
         answer: data.answer 
      }); 
   } 
   break;

  最后一部分是在用户之间处理ice候选人。我们使用相同的技术在用户之间传递消息。主要区别是，候选消息可能按任何顺序为每个用户执行多次。添加候选处理程序.

case "candidate": 
   console.log("Sending candidate to:",data.name); 
   var conn = users[data.name];
   if(conn != null) { 
      sendTo(conn, { 
         type: "candidate", 
         candidate: data.candidate 
      }); 
   } 
   break;

  要允许我们的用户断开与其他用户的连接，我们应该实现挂起函数。它还将告诉服务器删除所有用户引用。添加离开处理程序.

case "leave": 
   console.log("Disconnecting from", data.name); 
   var conn = users[data.name]; 
   conn.otherName = null; 
   //notify the other user so he can disconnect his peer connection 
   if(conn != null) { 
      sendTo(conn, { 
         type: "leave" 
      }); 
   } 
   break;

  还需要向其他用户发送离开事件，以便因此断开对等连接。我们还应该处理用户从信令服务器放弃连接时的情况。让我们修改我们的关闭处理程序.

connection.on("close", function() { 
   if(connection.name) { 
      delete users[connection.name]; 
      if(connection.otherName) { 
         console.log("Disconnecting from ", connection.otherName); 
         var conn = users[connection.otherName]; 
         conn.otherName = null;  
         if(conn != null) { 
            sendTo(conn, { 
               type: "leave" 
            });
         }
      } 
   } 
});

  以下是我们的信令服务器的全部代码:

//require our websocket library 
var WebSocketServer = require('ws').Server; 

//creating a websocket server at port 9090 
var wss = new WebSocketServer({port: 9090}); 

//all connected to the server users 
var users = {};
  
//when a user connects to our sever 
wss.on('connection', function(connection) {
  
   console.log("User connected");
   //when server gets a message from a connected user 
   connection.on('message', function(message) { 
      var data; 
      //accepting only JSON messages 
      try { 
         data = JSON.parse(message); 
      } catch (e) { 
         console.log("Invalid JSON"); 
         data = {}; 
      }
      //switching type of the user message 
      switch (data.type) { 
         //when a user tries to login
         case "login": 
            console.log("User logged", data.name); 
            //if anyone is logged in with this username then refuse 
            if(users[data.name]) { 
               sendTo(connection, { 
                  type: "login", 
                  success: false 
               }); 
            } else { 
               //save user connection on the server 
               users[data.name] = connection; 
               connection.name = data.name; 
               sendTo(connection, { 
                  type: "login", 
                  success: true 
               }); 
            } 
            break;
         case "offer": 
            //for ex. UserA wants to call UserB 
            console.log("Sending offer to: ", data.name);
            //if UserB exists then send him offer details 
            var conn = users[data.name]; 
            if(conn != null) { 
               //setting that UserA connected with UserB 
               connection.otherName = data.name; 
               sendTo(conn, { 
                  type: "offer", 
                  offer: data.offer, 
                  name: connection.name 
               }); 
            }
            break;
         case "answer": 
            console.log("Sending answer to: ", data.name); 
            //for ex. UserB answers UserA 
            var conn = users[data.name]; 
            if(conn != null) { 
               connection.otherName = data.name; 
               sendTo(conn, { 
                  type: "answer", 
                  answer: data.answer 
               }); 
            } 
            break; 
         case "candidate": 
            console.log("Sending candidate to:",data.name); 
            var conn = users[data.name];
            if(conn != null) { 
               sendTo(conn, { 
                  type: "candidate", 
                  candidate: data.candidate 
               }); 
            } 
            break;
         case "leave": 
            console.log("Disconnecting from", data.name); 
            var conn = users[data.name]; 
            conn.otherName = null; 
            //notify the other user so he can disconnect his peer connection 
            if(conn != null) {
               sendTo(conn, { 
                  type: "leave" 
              }); 
            }
            break;
         default: 
            sendTo(connection, { 
               type: "error", 
               message: "Command not found: " + data.type 
            }); 
            break; 
      }
   }); 
   //when user exits, for example closes a browser window 
   //this may help if we are still in "offer","answer" or "candidate" state 
   connection.on("close", function() { 
      if(connection.name) { 
         delete users[connection.name]; 
         if(connection.otherName) { 
            console.log("Disconnecting from ", connection.otherName); 
            var conn = users[connection.otherName]; 
            conn.otherName = null;
            if(conn != null) { 
               sendTo(conn, { 
                  type: "leave" 
               }); 
            }
         } 
      }
   });  
   connection.send("Hello world");  
});
  
function sendTo(connection, message) { 
   connection.send(JSON.stringify(message)); 
}