WebRTC 项目的最终目的主要是让 Web 开发者能够基于浏览器轻易快捷开发出丰富的实时多媒体应用,而无需下载安装任何插件,Web 开发者也无需关注多媒体的数字信号处理过程,只需编写简单的 Javascript 程序即可实现。

{% codeblock package.json lang:json %} { “name”: “WebRTC-demo”, “description”: “A simple WebRTC demo”, “dependencies”: { “uuid”: “^3.0.1”, “ws”: “^2.1.0” } } {% endcodeblock %}

{% codeblock server.js lang:javascript %} const http = require(“http”); const uuid = require(“uuid”); const util = require(“util”); const fs = require(“fs”); const url = require(‘url’); const path = require(‘path’); const WebSocket = require(‘ws’);

const PORT = 3000; //端口 const dist = “./"; //根目录 const mine = { “.css”: “text/css”, “.html”: “text/html”, “.ico”: “image/x-icon”, “.jpeg”: “image/jpeg”, “.jpg”: “image/jpeg”, “.gif”: “image/gif”, “.js”: “text/javascript”, “.json”: “application/json”, “.pdf”: “application/pdf”, “.png”: “image/png”, “.svg”: “image/svg+xml”, “.swf”: “application/x-shockwave-flash”, “.tiff”: “image/tiff”, “.txt”: “text/plain”, “.wav”: “audio/x-wav”, “.wma”: “audio/x-ms-wma”, “.wmv”: “video/x-ms-wmv”, “.xml”: “text/xml”, “.mp3”: “audio/mpeg”, “.mp4”: “video/mp4”, “.exe”: “application/octet-stream”, “.md”: “text/x-markdown” }; const default_visit_list = [“index.html”, “index.htm”, “default.html”, “default.htm”];

let default_visit = (request, response, default_visit_file_list, i) => { fs.exists(path.join(__dirname, dist, url.parse(request.url).pathname, default_visit_file_list[i]), function (exists) { if (exists) { //若index.html存在 fs.readFile(path.join(__dirname, dist, url.parse(request.url).pathname, default_visit_file_list[i]), “binary”, function (err, file) { response.writeHead(200, { ‘Content-Type’: mine[".html”] || “text/plain” }); response.write(file, “binary”); response.end(); }); } else { //若index.html不存在 if (default_visit_file_list.length - 1 == i) { console.log("\x1B[31mERROR\x1B[39m: " + default_visit_file_list[0] + " is not exists."); file_not_found (response, request); } else { default_visit(request, response, default_visit_list, i + 1); } } }); } let file_not_found = (response, request) => { response.writeHead(404, { ‘Content-Type’: ‘text/plain’ }); response.write(“This request URL " + url.parse(request.url).pathname + " was not found on this server."); response.end(); } let server = http.createServer((request, response) => { let realPath = path.join(__dirname, dist, url.parse(request.url).pathname); if (url.parse(request.url).pathname == “/” || url.parse(request.url).pathname.split("/")[url.parse(request.url).pathname.split("/").length - 1].indexOf(".") == -1) { //访问目录为 “/” default_visit(request, response, default_visit_list, 0); } else { //指定路径 let ext = path.extname(realPath); fs.exists(realPath, exists => { if (!exists) { //指定路径的文件不存在 console.log("\x1B[31mERROR\x1B[39m: " + realPath + " is not exists."); file_not_found(response, request); } else { //指定路径的文件存在 fs.readFile(realPath, “binary”, (err, file) => { response.writeHead(200, { ‘Content-Type’: mine[ext] || “text/plain” }); response.write(file, “binary”); response.end(); }); } }); } }); server.listen(PORT); server.on(‘listening’, () => { console.log(“Server runing at http://127.0.0.1:” + server.address().port + “."); }); server.on(‘error’, () => { console.log(“Server Listen on " + PORT + " error."); }); let sockets = new Map(); let socketsID = new Set(); let wss = new WebSocket.Server({ server: server }); wss.on(‘connection’, socket => { socket.id = uuid.v4().split("-").join(''); console.log(‘connection ' + sockets.size); socket.send(JSON.stringify({ event: “peers”, data: { queue: sockets.size + 1, socketID: socket.id, socketsID: Array.from(socketsID) } })); for (let item of sockets.entries()) { item[1].send(JSON.stringify({ event: “new_peer”, data: { socketID: socket.id, me: item[1].id } })); } sockets.set(socket.id, socket); socketsID.add(socket.id); socket.on(‘message’, msg => { console.log(JSON.parse(msg).event + “: " + socket.id + " —> " + sockets.get(JSON.parse(msg).data.socketID).id); if (JSON.parse(msg).event === “msg”) { for (let item of sockets.entries()) { if (item[0] == JSON.parse(msg).data.socketID) continue; item[1].send(msg); } } else { sockets.get(JSON.parse(msg).data.socketID).send(msg); } }); socket.on(“close”, () => { console.log(“delete " + socket.id); sockets.delete(socket.id); socketsID.delete(socket.id); for (let item of sockets.entries()) { item[1].send(JSON.stringify({ event: “close”, data: { socketID: socket.id } })); } }) }); {% endcodeblock %} {% codeblock index.html lang:html %}

body {
  font-size: 62.5%;
  font-family: Consolas, "Microsoft Yahei";
  height: 100%;
  width: 100%;
  background: url(https://o3cpfaosb.qnssl.com/4874bd3e3bb8e89fd704771c77551f70.png) center center no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.login {
  display: block;
  font-family: inherit;
  left: 50%;
  top: 50%;
  line-height: 1;
  width: 400px;
  height: 40px;
  position: absolute;
  margin-left: -200px;
  margin-top: -20px;
  box-sizing: border-box;
  border: 1px solid #333;
  font-size: 2rem;
  padding: 3px;
  border-radius: 5px;
}

.login:focus,
.login:active {
  border: 1px solid #333;
}

.body {
  width: 960px;
  margin: 0 auto;
}

.box {
  width: 100%;
}

video {
  float: left;
  width: 420px;
  height: 315px;
  margin: 30px;
  background-color: #333;
  border-radius: 4px;
  width: 420px;
  height: 315px;
  border-radius: 4px;
}

.message {
  background-color: #333;
  height: 400px;
  width: 900px;
  margin: 0 auto;
  padding: 3px 10px;
  line-height: 1.2;
  overflow-y: auto;
  overflow-x: visible;
  box-sizing: border-box;
}

 ::-webkit-scrollbar {
  width: 5px;
  background-color: transparent;
}

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  border-radius: 10px;
  background-color: #777;
}

 ::-webkit-scrollbar-thumb {
  height: 20px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

p {
  margin: 0;
}

p .name {
  font-size: 2rem;
}

p .name.me {
  color: #12BCD4;
}

p .name.other {
  color: #F34E4E;
}

p .msg {
  font-size: 1.8rem;
  color: #A9A7A7;
  word-wrap: break-word;
}

#msg-ipt {
  display: block;
  margin-left: 30px;
  margin-right: 30px;
  width: 900px;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-size: 2rem;
  margin-top: 10px;
  border-radius: 5px;
  border: 0;
  padding: 3px;
}

#msg-ipt:active {
  outline: none;
  border: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.clearfix {
  *+height: 1%;
}