Add presentor window to html (for marp)

insert-presenter-to-html.js

const fs = require('fs')
const cheerio = require('cheerio')

const link = '<link rel="stylesheet" href="presenter.css">'
const script = '<script src="presenter.js" defer></script>'
const presenter = '<div class="presenter"><video id="incam" /></div>'

const filepath = process.argv[2]

let html = fs.readFileSync(filepath, 'utf8')
const $ = cheerio.load(html)
$('head').append(link)
$('head').append(script)
$('body').append(presenter)

fs.writeFileSync(filepath, $.html())

presenter.css

.drag {
  z-index: 1001;
}

.presenter {
  top: 80%;
  left: 85%;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: lightgrey;

  display: block;
  cursor: move;
  position: absolute;
  z-index: 1000;

  cursor: move;
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 1000;
  color: #fff;
  font-size: 20px;
  line-height: 100px;
  text-align: center;
}

.presenter > video {
  width: 100%;
  height: 100%;
  transform: scale(-1, 1);
  clip-path: circle(50%);
  object-fit: cover;
}

presenter.js

// 発表者の表示
const video = document.getElementById('incam')

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false,
}).then(stream => {
  video.srcObject = stream
  video.play()
}).catch(e => {
  console.log(e)
})

// 発表者表示エリアの移動 (D&D)
const presenter = document.getElementsByClassName("presenter")[0]
presenter.addEventListener("mousedown",  mdown, false)
presenter.addEventListener("touchstart", mdown, false)

let x, y

function mdown(e) {
  this.classList.add("drag")

  const event = e.type === 'mousedown' ? e : e.changedTouches[0]
  x = event.pageX - this.offsetLeft
  y = event.pageY - this.offsetTop

  document.body.addEventListener("mousemove", mmove, false)
  document.body.addEventListener("touchmove", mmove, false)
}

function mmove(e) {
  const drag = document.getElementsByClassName("drag")[0]
  const event = e.type === 'mousemove' ? e : e.changedTouches[0]

  e.preventDefault()

  drag.style.top = event.pageY - y + "px"
  drag.style.left = event.pageX - x + "px"

  drag.addEventListener("mouseup", mup, false)
  drag.addEventListener("touchend", mup, false)

  document.body.addEventListener("mouseleave", mup, false)
  document.body.addEventListener("touchleave", mup, false)
}

function mup(e) {
  const drag = document.getElementsByClassName("drag")[0]

  document.body.removeEventListener("mousemove", mmove, false)
  document.body.removeEventListener("touchmove", mmove, false)

  if (drag) {
    drag.removeEventListener("mouseup", mup, false)
    drag.removeEventListener("touchend", mup, false)
    drag.classList.remove("drag")
  }
}

// 発表者の表示・非表示 (Command + Shift + v)
let keyInput = []

document.addEventListener('keydown', (e) => {
  if (e.key !== 'Shift' && e.key !== 'Meta' && e.key !== 'v') {
    return
  }

  e.preventDefault()

  if (!keyInput.includes(e.key)) {
    keyInput.push(e.key)
  }

  if (keyInput.length === 3) {
    const tag = document.getElementsByClassName('presenter')[0]
    tag.style.display = tag.style.display === 'none' ? '' : 'none'

    // vは連続入力される && keyupは発火しないのでここで消す
    keyInput = keyInput.filter(k => k !== e.key)
  }
})

document.addEventListener('keyup', (e) => {
  e.preventDefault()

  // Shift, Commandが離された時は入力を初期状態に戻す
  keyInput = []
})