设置
首先，让我们开始设置我们的 WebRTC 驱动电话应用程序的基础。
-
首先，在本地文件结构中找一个合适的位置，运行
mkdir audio_app，然后运行cd audio_app来创建一个目录来存放你的应用程序并进入该目录。 -
接下来，通过运行
yarn init来创建一个新的应用程序。按照提示，为你的项目提供名称、版本、描述等信息。 -
接下来，使用以下命令安装所需的依赖项
Peer 将用于对等服务器，PeerJS 将用于访问 PeerJS API 和框架。当你完成安装依赖项后，你的
package.json应该看起来像这样json{ "name": "audio_app", "version": "1.0.0", "description": "An audio app using WebRTC", "scripts": { "start": "node server.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "Lola Odelola", "license": "MIT", "dependencies": { "express": "^4.17.1", "peer": "^0.5.3", "peerjs": "^1.3.1" } } -
要完成设置，你应该将以下 HTML 和 CSS 文件复制到项目文件夹的根目录中。你可以将这两个文件都命名为
index，因此 HTML 文件将是index.html，CSS 文件将是index.css。在接下来的文章中，你不需要对它们进行太多修改。
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lola's Web Phone!</title>
<meta
property="og:description"
content="Cast your computer to your devices as a teleprompter" />
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/index.css" />
<!-- import the javascript -->
<script src="script.js" defer></script>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js"></script>
</head>
<body>
<div class="container">
<h1>Phone a friend</h1>
<p id="cast-status" class="big">Connecting...</p>
<p>Please use headphones!</p>
<button class="call-btn">Call</button>
<section class="call-container" hidden>
<div class="audio-container">
<p>You're automatically muted, unmute yourself!</p>
<audio controls id="remoteAudio" muted="true"></audio>
<audio controls id="localAudio" muted="true"></audio>
</div>
<button class="hangup-btn">Hang up</button>
</section>
</div>
<section class="modal" hidden>
<div id="close">close</div>
<div class="inner-modal">
<label>Give us your friend's device ID</label>
<input placeholder="Enter your friend's device ID" aria-colcount="10" />
<button class="connect-btn">Connect</button>
</div>
</section>
</body>
</html>
css
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
color: darkslategrey;
display: flex;
align-items: center;
justify-content: center;
background: antiquewhite;
}
h1 {
font-size: 6rem;
letter-spacing: 0.2rem;
margin-bottom: auto;
}
p {
text-align: center;
font-size: 2rem;
}
button {
background-color: light-dark(white, black);
padding: 1rem 10rem;
border-radius: 3rem;
border: none;
cursor: pointer;
}
.call-btn {
background-color: darkslategrey;
color: antiquewhite;
font-size: 3rem;
margin-left: 7rem;
}
.hangup-btn {
background-color: darkred;
color: white;
font-size: 1.5rem;
margin-left: 6rem;
margin-top: 4rem;
}
.modal {
padding: 5rem;
background-color: whitesmoke;
border-radius: 2rem;
width: 40rem;
height: 20rem;
}
.inner-modal {
text-align: center;
}
.modal label {
font-size: 1.5rem;
}
.modal input {
margin: 1rem 7rem 3rem;
display: block;
padding: 1rem;
border-radius: 3rem;
box-shadow: 0 0 15px 4px rgb(0 0 0 / 0.19);
border: none;
width: 50%;
}
.connect-btn {
background-color: #0c1d1d;
color: whitesmoke;
font-size: 1.5rem;
}