当前位置：极客教程 > WebRTC > WebRTC 精品教程 > WebRTC 语音演示

WebRTC 语音演示

WebRTC 语音演示

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

WebRTC 语音演示

这两个页面将是

标签。大部分输入是通过简单的事件处理程序完成的。

信令服务器

为了创建一个WebRTC连接，客户端必须能够在不使用WebRTC对等连接的情况下传输消息。这就是我们将使用HTML5 WebSockets的地方——一个双向的套接字连接，连接两个端点——一个Web服务器和一个Web浏览器。现在让我们开始使用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上创建一个socket服务器。接下来，我们监听连接事件。当用户通过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; 
   }  
});

如果用户发送的消息是 login 类型的话，我们要做如下处理：

  • 检查是否有其他用户使用过这个用户名登录。
  • 如果有，告诉用户他未成功登录。
  • 如果没有其他用户使用这个用户名，我们将用户名作为键添加到连接对象中。
  • 如果命令无法识别，则发送一个错误。

以下代码是一个帮助函数，用于发送消息到连接，将其添加到 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;

这也会向其他用户发送 leave 事件，以便他可以相应地断开与对等连接的连接。我们还应该处理当用户从信令服务器断开连接的情况。让我们修改我们的 close 处理程序−

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库。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文件夹中安装bootstrap库。

现在我们需要创建一个基本的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)); 
};

现在通过命令 node server 运行我们的信令服务器。然后，在根目录下运行 static 命令，并在浏览器中打开该页面。您应该能够看到以下的控制台输出−

WebRTC 语音演示

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

   } 
};

现在如果你运行代码，页面应该可以让你登录，并在页面上显示你的本地音频流。

WebRTC 语音演示

现在我们准备发起一个通话。首先，我们向另一个用户发送一个 offer （提议）。一旦用户接收到提议，他会创建一个 answer （回答），并开始交换 ICE candidates （候选人）。将以下代码添加到 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)); 
};

我们为Call按钮添加一个点击处理程序，该处理程序发起一个呼叫。然后，我们实现几个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并在本地销毁连接

现在运行代码。您应该能够使用两个浏览器标签登录到服务器。然后您可以向该标签发起音频通话，并将通话挂断。

WebRTC 语音演示

以下是整个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; 
};

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

WebRTC 精品教程