<!DOCTYPE html>
<html lang="ja">
  <title>media-example</title>
  <h1 id="title">Media Devices - Video Test</h1>
  <video id="player" controls autoplay></video>
  <div id="devices"></div>
  <h2 id="permission">デバイスを許可する方法 (Firefox)</h2>
  <section>
    <h3>方法1</h3>
    <p>
      <a href="permissions.sqlite">事前にカメラを許可したpermissions.sqlite</a>
      をダウンロード後、プロファイルディレクトリ以下のpermissions.sqliteファイル
      と置き換える。
    </p>
  </section>
  <section>
    <h3>方法2</h3>
    <p>
      あるいは、次のSQLをプロファイルディレクトリ以下のpermissions.sqliteファイル
      に対して発行する。
    </p>
    <pre class="sql">
insert into moz_perms (origin, type, permission, expireType, expireTime, modificationTime)
  values ("https://media-example.kou029w.vercel.app", "camera", 1, 0, 0, 0);
    </pre>
  </section>
  <script>
    const sql = `insert into moz_perms (origin, type, permission, expireType, expireTime, modificationTime)
  values ("${window.location.origin}", "camera", 1, 0, 0, 0);`;
    const sqlDisplay = document.querySelector(".sql");
    if (sqlDisplay) sqlDisplay.textContent = sql;

    (async () => {
      const devices = (await navigator.mediaDevices.enumerateDevices()).filter(
        ({ kind }) => kind === "videoinput"
      );
      const list = document.getElementById("devices");
      devices.forEach(({ deviceId, label }) => {
        const a = document.createElement("a");
        a.href = `#${deviceId}`;
        a.textContent = `${label} (${deviceId})`;
        a.style.display = "block";
        a.onclick = () => {
          location.href = a.href;
          location.reload();
        };
        list.appendChild(a);
      });
    })();
    const play = async (deviceId) => {
      const player = document.getElementById("player");
      player.srcObject = await navigator.mediaDevices.getUserMedia({
        video: { deviceId },
      });
    };
    play(location.hash.slice(1));
  </script>
</html>