Setup
So let's get started by setting up the basis for our WebRTC-powered phone app.
First find a sensible place on your local file structure and run
mkdir audio_appand thencd audio_appto create a directory to contain your app and enter into it.Next, create a new app by running
yarn init. Follow the prompts, providing a name, version, description, etc. to your project.Next, install the required dependencies using the following commands:
Peer will be used for the peer server and PeerJS will be used to access the PeerJS API and framework. Your
package.jsonshould something look like this when you've finished installing the dependencies: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" }}To finish the setup, you should copy the following HTML and CSS files into the root of your project folder. You can name both files
index, so the HTML file will beindex.htmland the CSS file will beindex.css. You won't need to modify these much in the articles that follow.
<!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/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js"></script> </head> <body> <div> <h1>Phone a friend</h1> <p>Connecting...</p> <p>Please use headphones!</p> <button>Call</button> <section hidden> <div> <p>You're automatically muted, unmute yourself!</p> <audio controls muted="true"></audio> <audio controls muted="true"></audio> </div> <button>Hang up</button> </section> </div> <section hidden> <div>close</div> <div> <label>Give us your friend's device ID</label> <input placeholder="Enter your friend's device ID" aria-colcount="10" /> <button>Connect</button> </div> </section> </body></html>*,*::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;}