getUserMedia() による写真の撮影

body {
  font:
    1rem "Lucida Grande",
    "Arial",
    sans-serif;
  padding: 0.8rem;
}

button {
  display: block;
  margin-block: 1rem;
}

#start-button {
  position: relative;
  margin: auto;
  bottom: 32px;
  background-color: rgb(0 150 0 / 50%);
  border: 1px solid rgb(255 255 255 / 70%);
  box-shadow: 0px 0px 1px 2px rgb(0 0 0 / 20%);
  font-size: 14px;
  color: white;
}

#video,
#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 100%;
  height: auto;
}

#canvas {
  display: none;
}

.camera,
.output {
  display: inline-block;
  width: 49%;
  height: auto;
}

.output {
  vertical-align: top;
}

code {
  background-color: lightgrey;
}

<h1>写真のキャプチャデモ</h1>
<p>
  この例では、<code>navigator.mediaDevices.getUserMedia()</code> を使用して、ウェブカメラやその他の映像機器からメディアストリームを設定し、そのストリームから画像を取得して、その画像から PNG を作成する方法を示します。
</p>
<button id="permissions-button">カメラの使用を許可</button>

<p>
  &#9432; この例では、以前と同じコードを使用しますが、今回は CSS の <code>filter: grayscale(100%)</code> 宣言を使用して、<code>&lt;video&gt;</code> 要素にフィルター効果を追加します。その後、video 要素に CSS の <code>filter</code> が適用されているかどうかを調べることができ、キャンバスに描画する際に同じフィルターを使用します。
</p>

<div class="camera">
  <video id="video">映像ストリームが利用できません。</video>
  <button id="start-button">写真をキャプチャ</button>
</div>

<canvas id="canvas"></canvas>
<div class="output">
  <img
    id="photo"
    src=""
    alt="スクリーンキャプチャ結果はこのボックスに表示されます。" />
</div>

const width = 320; // 写真の幅をこのサイズに変倍する
let height = 0; // これは入力ストリームに基づいて計算される

let streaming = false;

const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const photo = document.getElementById("photo");
const startButton = document.getElementById("start-button");
const allowButton = document.getElementById("permissions-button");

allowButton.addEventListener("click", () => {
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then((stream) => {
      video.srcObject = stream;
      video.play();
    })
    .catch((err) => {
      console.error(`エラーが発生: ${err}`);
    });
});

video.addEventListener("canplay", (ev) => {
  if (!streaming) {
    height = video.videoHeight / (video.videoWidth / width);

    video.setAttribute("width", width);
    video.setAttribute("height", height);
    canvas.setAttribute("width", width);
    canvas.setAttribute("height", height);
    streaming = true;
  }
});

startButton.addEventListener("click", (ev) => {
  takePicture();
  ev.preventDefault();
});

function clearPhoto() {
  const context = canvas.getContext("2d");
  context.fillStyle = "#aaaaaa";
  context.fillRect(0, 0, canvas.width, canvas.height);

  const data = canvas.toDataURL("image/png");
  photo.setAttribute("src", data);
}

clearPhoto();

function takePicture() {
  const context = canvas.getContext("2d");
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);

    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  } else {
    clearPhoto();
  }
}

#video {
  filter: grayscale(100%);
}

function takePicture() {
  const context = canvas.getContext("2d");
  if (width && height) {
    canvas.width = width;
    canvas.height = height;

    // この video 要素から CSS フィルターの計算値を取得
    // この例では、"grayscale(100%)" などが返される可能性がある
    const videoStyles = window.getComputedStyle(video);
    const filterValue = videoStyles.getPropertyValue("filter");

    // このフィルターをキャンバスの描画コンテキストに適用する
    // フィルターがない場合（"none" が返された場合）、デフォルトで "none" とする
    context.filter = filterValue !== "none" ? filterValue : "none";

    context.drawImage(video, 0, 0, width, height);

    const dataUrl = canvas.toDataURL("image/png");
    photo.setAttribute("src", dataUrl);
  } else {
    clearPhoto();
  }
}