当前位置：极客教程 > WebRTC > WebRTC 精品教程 > WebRTC 视频演示

WebRTC 视频演示

WebRTC 视频演示

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

WebRTC 视频演示

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

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

我们将为来自客户端的每个消息添加一个type字段。例如，如果用户想要登录，他会发送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;
   }  
});

如果用户发送一个带有登录类型的消息，我们进行以下操作： - 检查是否有其他用户使用同样的用户名登录 - 如果有，告诉用户他尚未成功登录 - 如果没有其他用户使用该用户名，将用户名作为键添加到连接对象中 - 如果命令未被识别，发送错误消息 下面的代码是一个用于向连接发送消息的辅助函数。将其添加到 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库。Bootstrap是一个用于开发Web应用程序的前端框架。你可以在这里了解更多信息：http://getbootstrap.com/。 创建一个名为”videochat”的文件夹，这将是我们的根应用程序文件夹。在这个文件夹中创建一个名为package.json的文件（用于管理npm依赖项）并添加以下内容- 。

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

然后运行 npm install bootstrap。这将在 videochat/node_modules 文件夹中安装 bootstrap 库。

现在我们需要创建一个基本的 HTML 页面。在根文件夹中创建一个 index.html 文件，其中包含以下代码 –

<html> 

   <head> 
      <title>WebRTC Video Demo</title>
      <link rel = "stylesheet" href = "node_modules/bootstrap/dist/css/bootstrap.min.css"/>
   </head>

   <style>

      body { 
         background: #eee; 
         padding: 5% 0; 
      } 

      video { 
         background: black; 
         border: 1px solid gray; 
      }

      .call-page { 
         position: relative; 
         display: block; 
         margin: 0 auto; 
         width: 500px; 
         height: 500px; 
      } 

      #localVideo { 
         width: 150px; 
         height: 150px; 
         position: absolute; 
         top: 15px; 
         right: 15px; 
      }

      #remoteVideo { 
         width: 500px; 
         height: 500px; 
      }

   </style>

   <body>

   <div id = "loginPage" class = "container text-center"> 

      <div class = "row"> 
         <div class = "col-md-4 col-md-offset-4">

            <h2>WebRTC Video Demo. Please sign in</h2> 
            <label for = "usernameInput" class = "sr-only">Login</label> 
            <input type = "email" id = "usernameInput" c
               lass = "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"> 
      <video id = "localVideo" autoplay></video> 
      <video id = "remoteVideo" autoplay></video>

      <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 视频演示

下一步是使用唯一用户名实现用户登录。我们只需将用户名发送给服务器，服务器会告诉我们它是否已被占用。将以下代码添加到您的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');

//hide call page 
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 { 
      //display the call page if login is successful 
      loginPage.style.display = "none"; 
      callPage.style.display = "block";  
      //start peer connection 
   } 
};

首先，我们选择一些页面元素的参考。然后，隐藏呼叫页面。然后，我们在登录按钮上添加一个事件侦听器。当用户点击它时，我们将他的用户名发送到服务器。最后，我们实现handleLogin回调函数。如果登录成功，我们显示呼叫页面并开始建立对等连接。 为了启动对等连接，我们需要以下步骤： - 从网络摄像头获取流。 - 创建RTCPeerConnection对象。 请将以下代码添加到“UI selectors block”中：

var localVideo = document.querySelector('#localVideo'); 
var remoteVideo = document.querySelector('#remoteVideo');

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 video stream 
      navigator.webkitGetUserMedia({ video: true, audio: true }, function (myStream) { 
         stream = myStream; 

         //displaying local video stream on the page 
         localVideo.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) { 
            remoteVideo.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); 
      }); 
   } 
};

现在，如果你运行这段代码，页面应该允许你登录并在页面上显示本地视频流。

WebRTC 视频演示

现在我们准备开始一个呼叫。首先，我们向另一个用户发送一个 offer 。一旦用户收到了这个offer，他会创建一个 answer 并开始交换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; 
   remoteVideo.src = null; 

   yourConn.close(); 
   yourConn.onicecandidate = null; 
   yourConn.onaddstream = null; 
};

当用户点击“挂断”按钮时，会执行以下操作：

  • 发送“离开”消息给另一个用户
  • 关闭RTCPeerConnection并在本地销毁连接

现在运行代码。你应该可以使用两个浏览器标签登录到服务器。然后，你可以进行呼叫并挂断通话。

WebRTC 视频演示

//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 localVideo = document.querySelector('#localVideo'); 
var remoteVideo = document.querySelector('#remoteVideo'); 

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 video stream 
      navigator.webkitGetUserMedia({ video: true, audio: true }, function (myStream) { 
         stream = myStream; 

         //displaying local video stream on the page 
         localVideo.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) { 
            remoteVideo.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; 
   remoteVideo.src = null; 

   yourConn.close(); 
   yourConn.onicecandidate = null; 
   yourConn.onaddstream = null; 
};

总结

这个演示为每个WebRTC应用程序提供了一个基线功能。为了改进这个演示，你可以通过像Facebook或Google这样的平台添加用户身份验证，并处理用户输入的无效数据。此外，WebRTC连接可能会因为不支持技术或无法绕过防火墙而失败。为了使任何WebRTC应用程序稳定，需要进行大量的工作。

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 精品教程