WebRTC - 语音演示

简述

在本章中，我们将构建一个客户端应用程序，允许两个用户在不同的设备上使用 WebRTC 音频流进行通信。我们的应用程序将有两个页面。一个用于登录，另一个用于与另一个用户进行音频呼叫。

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

信令服务器

要创建 WebRTC 连接，客户端必须能够在不使用 WebRTC 对等连接的情况下传输消息。这是我们将使用 HTML5 WebSockets 的地方——两个端点之间的双向套接字连接——一个网络服务器和一个网络浏览器。现在让我们开始使用 WebSocket 库。创建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 库。然后我们在端口 9090 上创建一个套接字服务器。接下来，我们监听连接事件。当用户与服务器建立 WebSocket 连接时，将执行此代码。然后我们收听用户发送的任何消息。最后，我们向连接的用户发送“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 对象。更改我们文件的顶部 -


//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 = {};

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


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

如果用户发送带有登录类型的消息，我们 -

检查是否有人已经使用此用户名登录。
如果是，则告诉用户他没有成功登录。
如果没有人使用此用户名，我们将用户名作为键添加到连接对象。
如果无法识别命令，我们会发送错误。

以下代码是用于向连接发送消息的辅助函数。将它添加到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)); 
}

客户申请

测试此应用程序的一种方法是打开两个浏览器选项卡并尝试相互进行音频通话。

首先，我们需要安装引导程序库。Bootstrap 是用于开发 Web 应用程序的前端框架。您可以在http://getbootstrap.com/了解更多信息。创建一个名为“audiochat”的文件夹。这将是我们的根应用程序文件夹。在此文件夹中创建一个文件package.json（这是管理 npm 依赖项所必需的）并添加以下内容 -


{ 
   "name": "webrtc-audiochat", 
   "version": "0.1.0", 
   "description": "webrtc-audiochat", 
   "author": "Author", 
   "license": "BSD-2-Clause" 
}

然后运行npm install bootstrap。这将在audiochat/node_modules文件夹中安装引导程序库。

现在我们需要创建一个基本的 HTML 页面。使用以下代码在根文件夹中创建一个index.html文件 -


<html>
 
   <head> 
      <title>WebRTC Voice Demo</title> 
      <link rel = "stylesheet" href = "node_modules/bootstrap/dist/css/bootstrap.min.css"/> 
   </head>
 
   <style> 
      body { 
         background: #eee; 
         padding: 5% 0; 
      } 
   </style>
     
   <body> 
      <div id = "loginPage" class = "container text-center"> 
          
         <div class = "row"> 
            <div class = "col-md-4 col-md-offset-4">
                    
               <h2>WebRTC Voice Demo. Please sign in</h2>
                    
               <label for = "usernameInput" class = "sr-only">Login</label> 
               <input type = "email" id = "usernameInput" 
                  class = "form-control formgroup"
                  placeholder = "Login" required = "" autofocus = ""> 
               <button id = "loginBtn" class = "btn btn-lg btn-primary btnblock">
                  Sign in</button> 
            </div> 
         </div> 
               
      </div>
          
      <div id = "callPage" class = "call-page">
          
         <div class = "row"> 
               
            <div class = "col-md-6 text-right"> 
               Local audio: <audio id = "localAudio" 
               controls autoplay></audio> 
            </div>
                    
            <div class = "col-md-6 text-left"> 
               Remote audio: <audio id = "remoteAudio" 
                  controls autoplay></audio> 
            </div> 
                    
         </div> 
               
         <div class = "row text-center"> 
            <div class = "col-md-12"> 
               <input id = "callToUsernameInput" 
                  type = "text" placeholder = "username to call" /> 
               <button id = "callBtn" class = "btn-success btn">Call</button> 
               <button id = "hangUpBtn" class = "btn-danger btn">Hang Up</button> 
            </div> 
         </div>
               
      </div> 
          
      <script src = "client.js"></script> 
          
   </body>
     
</html>

这个页面你应该很熟悉。我们添加了bootstrap css 文件。我们还定义了两个页面。最后，我们创建了几个文本字段和按钮来从用户那里获取信息。您应该看到本地和远程音频流的两个音频元素。请注意，我们添加了指向client.js文件的链接。

现在我们需要与我们的信令服务器建立连接。使用以下代码在根文件夹中创建client.js文件 -


//our username 
var name; 
var connectedUser;
  
//connecting to our signaling server 
var conn = new WebSocket('ws://localhost:9090');
  
conn.onopen = function () { 
   console.log("Connected to the signaling server"); 
}; 
 
//when we got a message from a signaling server 
conn.onmessage = function (msg) { 
   console.log("Got message", msg.data);  
   var data = JSON.parse(msg.data);  
     
   switch(data.type) { 
      case "login": 
         handleLogin(data.success); 
         break; 
      //when somebody wants to call us 
      case "offer": 
         handleOffer(data.offer, data.name); 
         break; 
      case "answer": 
         handleAnswer(data.answer); 
         break; 
      //when a remote peer sends an ice candidate to us 
      case "candidate": 
         handleCandidate(data.candidate); 
         break;
      case "leave": 
         handleLeave(); 
         break; 
      default: 
         break; 
   } 
};
  
conn.onerror = function (err) { 
   console.log("Got error", err); 
};
  
//alias for sending JSON encoded messages 
function send(message) { 
   //attach the other peer username to our messages
   if (connectedUser) { 
      message.name = connectedUser; 
   } 
     
   conn.send(JSON.stringify(message)); 
};

现在通过节点服务器运行我们的信令服务器。然后，在根文件夹中运行静态命令并在浏览器中打开页面。您应该看到以下控制台输出 -

下一步是使用唯一的用户名实现用户登录。我们只需将用户名发送到服务器，然后服务器会告诉我们它是否已被使用。将以下代码添加到您的client.js文件 -


//****** 
//UI selectors block 
//******
var loginPage = document.querySelector('#loginPage'); 
var usernameInput = document.querySelector('#usernameInput'); 
var loginBtn = document.querySelector('#loginBtn');
 
var callPage = document.querySelector('#callPage'); 
var callToUsernameInput = document.querySelector('#callToUsernameInput');
var callBtn = document.querySelector('#callBtn');
 
var hangUpBtn = document.querySelector('#hangUpBtn');
  
callPage.style.display = "none";
  
// Login when the user clicks the button 
loginBtn.addEventListener("click", function (event) { 
   name = usernameInput.value;
     
   if (name.length > 0) { 
      send({
         type: "login", 
         name: name 
      }); 
   } 
     
}); 
 
function handleLogin(success) { 
   if (success === false) { 
      alert("Ooops...try a different username"); 
   } else { 
      loginPage.style.display = "none"; 
      callPage.style.display = "block"; 
          
      //********************** 
      //Starting a peer connection 
      //**********************
                   
   } 
     
};

首先，我们选择一些对页面元素的引用。我们隐藏调用页面。然后，我们在登录按钮上添加一个事件监听器。当用户点击它时，我们将他的用户名发送到服务器。最后，我们实现 handleLogin 回调。如果登录成功，我们将显示调用页面并开始建立对等连接。

要开始对等连接，我们需要 -

从麦克风获取音频流
创建 RTCPeerConnection 对象

将以下代码添加到“UI 选择器块” -


var localAudio = document.querySelector('#localAudio'); 
var remoteAudio = document.querySelector('#remoteAudio'); 
var yourConn; 
var stream;

修改handleLogin函数 -


function handleLogin(success) { 
   if (success === false) { 
      alert("Ooops...try a different username"); 
   } else { 
      loginPage.style.display = "none"; 
      callPage.style.display = "block";
          
      //********************** 
      //Starting a peer connection 
      //********************** 
          
      //getting local audio stream 
      navigator.webkitGetUserMedia({ video: false, audio: true }, function (myStream) { 
         stream = myStream; 
               
         //displaying local audio stream on the page
         localAudio.src = window.URL.createObjectURL(stream);
               
         //using Google public stun server 
         var configuration = { 
            "iceServers": [{ "url": "stun:stun2.1.google.com:19302" }] 
         }; 
               
         yourConn = new webkitRTCPeerConnection(configuration); 
               
         // setup stream listening 
         yourConn.addStream(stream); 
               
         //when a remote user adds stream to the peer connection, we display it 
         yourConn.onaddstream = function (e) { 
            remoteAudio.src = window.URL.createObjectURL(e.stream); 
         }; 
               
         // Setup ice handling 
         yourConn.onicecandidate = function (event) { 
            if (event.candidate) { 
               send({ 
                  type: "candidate", 
               }); 
            } 
         };  
               
      }, function (error) { 
         console.log(error); 
      }); 
          
   } 
};

现在，如果您运行代码，页面应该允许您登录并在页面上显示您的本地音频流。

现在我们准备发起呼叫。首先，我们向另一个用户发送报价。一旦用户得到报价，他就会创建一个答案并开始交易 ICE 候选人。将以下代码添加到client.js文件 -


//initiating a call 
callBtn.addEventListener("click", function () { 
   var callToUsername = callToUsernameInput.value; 
     
   if (callToUsername.length > 0) { 
      connectedUser = callToUsername; 
          
      // create an offer 
      yourConn.createOffer(function (offer) { 
         send({ 
            type: "offer", 
            offer: offer 
         }); 
               
         yourConn.setLocalDescription(offer); 
               
      }, function (error) { 
         alert("Error when creating an offer"); 
      }); 
   } 
     
});
 
//when somebody sends us an offer 
function handleOffer(offer, name) { 
   connectedUser = name; 
   yourConn.setRemoteDescription(new RTCSessionDescription(offer)); 
     
   //create an answer to an offer 
   yourConn.createAnswer(function (answer) { 
      yourConn.setLocalDescription(answer); 
          
      send({ 
         type: "answer",
         answer: answer 
      }); 
          
   }, function (error) { 
      alert("Error when creating an answer"); 
   }); 
     
};
 
//when we got an answer from a remote user 
function handleAnswer(answer) { 
   yourConn.setRemoteDescription(new RTCSessionDescription(answer)); 
};
 
//when we got an ice candidate from a remote user 
function handleCandidate(candidate) { 
   yourConn.addIceCandidate(new RTCIceCandidate(candidate)); 
};

我们将点击处理程序添加到呼叫按钮，它会启动报价。然后我们实现onmessage处理程序期望的几个处理程序。它们将被异步处理，直到两个用户都建立了连接。

最后一步是实现挂断功能。这将停止传输数据并告诉其他用户关闭通话。添加以下代码 -


//hang up 
hangUpBtn.addEventListener("click", function () { 
   send({ 
      type: "leave" 
   });  
     
   handleLeave(); 
});
  
function handleLeave() { 
   connectedUser = null; 
   remoteAudio.src = null;
     
   yourConn.close(); 
   yourConn.onicecandidate = null; 
   yourConn.onaddstream = null;
};

当用户点击挂断按钮时 -

它将向其他用户发送“离开”消息
它将关闭 RTCPeerConnection 并在本地销毁连接

现在运行代码。您应该能够使用两个浏览器选项卡登录到服务器。然后您可以对该选项卡进行音频呼叫并挂断电话。

以下是整个client.js文件 -


//our username 
var name; 
var connectedUser;
 
//connecting to our signaling server 
var conn = new WebSocket('ws://localhost:9090');
 
conn.onopen = function () { 
   console.log("Connected to the signaling server"); 
};
 
//when we got a message from a signaling server 
conn.onmessage = function (msg) { 
   console.log("Got message", msg.data); 
   var data = JSON.parse(msg.data); 
     
   switch(data.type) { 
      case "login": 
         handleLogin(data.success); 
         break; 
      //when somebody wants to call us 
      case "offer": 
         handleOffer(data.offer, data.name); 
         break; 
      case "answer": 
         handleAnswer(data.answer); 
         break; 
      //when a remote peer sends an ice candidate to us 
      case "candidate": 
         handleCandidate(data.candidate); 
         break; 
      case "leave": 
         handleLeave(); 
         break; 
      default: 
         break; 
   } 
}; 
conn.onerror = function (err) { 
   console.log("Got error", err); 
};
 
//alias for sending JSON encoded messages 
function send(message) { 
   //attach the other peer username to our messages 
   if (connectedUser) { 
      message.name = connectedUser; 
   } 
     
   conn.send(JSON.stringify(message)); 
};
 
//****** 
//UI selectors block 
//****** 
var loginPage = document.querySelector('#loginPage'); 
var usernameInput = document.querySelector('#usernameInput'); 
var loginBtn = document.querySelector('#loginBtn');
var callPage = document.querySelector('#callPage'); 
var callToUsernameInput = document.querySelector('#callToUsernameInput');
var callBtn = document.querySelector('#callBtn'); 
var hangUpBtn = document.querySelector('#hangUpBtn'); 
var localAudio = document.querySelector('#localAudio'); 
var remoteAudio = document.querySelector('#remoteAudio'); 
var yourConn; 
var stream; 
callPage.style.display = "none";
 
// Login when the user clicks the button 
loginBtn.addEventListener("click", function (event) { 
   name = usernameInput.value; 
     
   if (name.length > 0) { 
      send({ 
         type: "login", 
         name: name 
      }); 
   } 
     
});
 
function handleLogin(success) { 
   if (success === false) { 
      alert("Ooops...try a different username"); 
   } else { 
      loginPage.style.display = "none"; 
      callPage.style.display = "block"; 
          
      //********************** 
      //Starting a peer connection 
      //********************** 
          
      //getting local audio stream 
      navigator.webkitGetUserMedia({ video: false, audio: true }, function (myStream) { 
         stream = myStream; 
               
         //displaying local audio stream on the page 
         localAudio.src = window.URL.createObjectURL(stream);
               
         //using Google public stun server 
         var configuration = { 
            "iceServers": [{ "url": "stun:stun2.1.google.com:19302" }] 
         }; 
               
         yourConn = new webkitRTCPeerConnection(configuration); 
               
         // setup stream listening 
         yourConn.addStream(stream); 
               
         //when a remote user adds stream to the peer connection, we display it 
         yourConn.onaddstream = function (e) { 
            remoteAudio.src = window.URL.createObjectURL(e.stream); 
         }; 
               
         // Setup ice handling 
         yourConn.onicecandidate = function (event) { 
            if (event.candidate) { 
               send({ 
                  type: "candidate", 
                  candidate: event.candidate 
               }); 
            } 
         }; 
               
      }, function (error) { 
         console.log(error); 
      }); 
          
   } 
};
 
//initiating a call 
callBtn.addEventListener("click", function () { 
   var callToUsername = callToUsernameInput.value; 
     
   if (callToUsername.length > 0) { 
      connectedUser = callToUsername; 
          
      // create an offer 
      yourConn.createOffer(function (offer) { 
         send({
            type: "offer", 
            offer: offer 
         }); 
               
         yourConn.setLocalDescription(offer); 
      }, function (error) { 
         alert("Error when creating an offer"); 
      }); 
   } 
});
 
//when somebody sends us an offer 
function handleOffer(offer, name) { 
   connectedUser = name; 
   yourConn.setRemoteDescription(new RTCSessionDescription(offer)); 
     
   //create an answer to an offer 
   yourConn.createAnswer(function (answer) { 
      yourConn.setLocalDescription(answer); 
          
      send({ 
         type: "answer", 
         answer: answer 
      });
          
   }, function (error) { 
      alert("Error when creating an answer"); 
   }); 
     
};
 
//when we got an answer from a remote user 
function handleAnswer(answer) { 
   yourConn.setRemoteDescription(new RTCSessionDescription(answer)); 
};
 
//when we got an ice candidate from a remote user 
function handleCandidate(candidate) { 
   yourConn.addIceCandidate(new RTCIceCandidate(candidate)); 
};
 
//hang up
hangUpBtn.addEventListener("click", function () { 
   send({ 
      type: "leave" 
   }); 
     
   handleLeave(); 
});
 
function handleLeave() { 
   connectedUser = null; 
   remoteAudio.src = null; 
     
   yourConn.close(); 
   yourConn.onicecandidate = null; 
   yourConn.onaddstream = null; 
};

WebRTC - 语音演示

简述

信令服务器

客户申请