User Video

app.js

const frontendsocket = io();

const myface = document.getElementById("myface");
const mute = document.getElementById("mute");
const camera = document.getElementById("camera");

let myStream; //video와 audio 결합
let muted = false; //처음에는 음성을 받음
let cameraOff = false;	//처음에는 영상을 받음

async function getMedia() {
  try {
    myStream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    });
    myface.srcObject = myStream;
  } catch (e) {
    console.log(e);
  }
}

getMedia();

function handleMuteButton() {
  if (!muted) {
    mute.innerText = "Unmute";
    muted = true;
  } else {
    mute.innerText = "Mute";
    muted = false;
  }
}
function handleCameraButton() {
  if (!cameraOff) {
    camera.innerText = "Turn Camera On";
    cameraOff = true;
  } else {
    camera.innerText = "Turn Camera Off";
    cameraOff = false;
  }
}

mute.addEventListener("click", handleMuteButton);
camera.addEventListener("click", handleCameraButton);

server.js

import http from "http";
import SocketIO from "socket.io";
import { instrument } from "@socket.io/admin-ui";
import express from "express";

const app = express();

const PORT = 3000;

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
// 기본 path를 /public으로 설정
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));

const httpServer = http.createServer(app);

const wsServer = SocketIO(httpServer);

const handleListen = () => console.log(`Listening on >	http://localhost:${PORT}`);
httpServer.listen(PORT, handleListen);

home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body 
        header
            h1 Noom
        main
            div#mystream
                video#myface(autoplay,playsinline,width="100",height="100")
                button#mute Mute
                button#camera Turn Camera Off
        script(src="/socket.io/socket.io.js")
        script(src="/public/js/app.js")