rtc-session/static/app.js

"use strict";

const localMedia = document.getElementById("my-video");
localMedia.muted = true;

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
}).then((localStream) => {
  localMedia.srcObject = localStream;
  grid.localStream     = localStream;
  localMedia.addEventListener("loadedmetadata", () => localMedia.play());
}).catch((error) => {
  peer.error = error.message;
});

const callee = new Vue({
  el: "#callee",
  data: {
    calleeId: "",
  },
  methods: {
    addPeer: () => {
      if (callee.calleeId && !grid.peers.includes(callee.calleeId))
        grid.peers.push(callee.calleeId);
    },
  },
});

const grid = new Vue({
  el: "#grid",
  data: {
    localStream: undefined,
    peers:       [],
  },
  methods: {
    makeCall: (peerId) => {
      let call = peer.peer.call(peerId, grid.localStream);
      let video = document.getElementById(call.peer);
      call.on("stream", (remoteStream) => {
        video.srcObject = remoteStream;
        video.addEventListener("loadedmetadata", () => video.play());
      });
    },
  },
});

const peer = new Vue({
  el: "#peer",
  data: {
    clientId: "",
    error:    "",
    peer:     new Peer(undefined, {
      host: "localhost",
      key:  "testingkey",
      path: "/peerjs/conference",
      port: 3000,
    }),
  },
});

peer.peer.on("close", ()      => peer.clientId = "");
peer.peer.on("error", (error) => peer.error    = error.message);
peer.peer.on("open",  ()      => peer.clientId = peer.peer.id);

peer.peer.on("call", (call) => {
  call.answer(grid.localStream);
  let video = document.getElementById(call.peer);
  call.on("stream", (remoteStream) => {
    video.srcObject = remoteStream;
    video.addEventListener("loadedmetadata", () => video.play());
  });
});

const model = new Vue({
  el: "#model",
  data: {
    loading:     false,
    loadedModel: undefined,
  },
  methods: {
    localDetection: () => {
      model.loadedModel.detect(localMedia)
        .then((predictions) => {
          const liveView = document.getElementById("live-view");
          for (const child of liveView.childNodes) {
            if (child.localName === "p") child.remove();
          }

          for (const prediction of predictions) {
            const p = document.createElement("p");
            p.innerText = `${prediction.class} (${Math.round(prediction.score * 100)})`;
            p.style     = "top: 0; left; 0;" +
              `margin-left: ${prediction.bbox[0]}px;` +
              `margin-top:  ${prediction.bbox[1]}px;` +
              `width:       ${prediction.bbox[2]}px;`;

            liveView.appendChild(p);
          }
        }).catch((error) => {
          peer.error = error.message;
        });
    },
    startLoading: () => {
      model.loading = true;
      cocoSsd.load()
        .then((loadedModel) => {
          model.loading     = false;
          model.loadedModel = loadedModel;
      }).catch((error) => {
        peer.error = error.message;
      });
    },
  },
});

setInterval(
  () => {
    if (model && model.loadedModel) model.localDetection();
  },
  5000
);