demo/index.html

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>picamera.js demo</title>
</head>

<body>
  <div>
    <div>
      <video id="videoElement" controls autoplay playsinline>
        Your browser doesn't support HTML5 video.
      </video>
    </div>
    <div>
      <label>Device UID: <input type="text" id="deviceUid" placeholder="Device UID"></label><br>
      <label>MQTT Host: <input type="text" id="mqttHost" placeholder="MQTT Host"></label><br>
      <label>MQTT Path: <input type="text" id="mqttPath" placeholder="MQTT Path" value="/mqtt"></label><br>
      <label>MQTT Port: <input type="number" id="mqttPort" placeholder="MQTT Port" value="8884"></label><br>
      <label>MQTT Username: <input type="text" id="mqttUsername" placeholder="MQTT Username"></label><br>
      <label>MQTT Password: <input type="password" id="mqttPassword" placeholder="MQTT Password"></label><br>
    </div>
    <div>
      <button onclick="start()">Start</button>
      <button onclick="stop()">Stop</button>
    </div>
  </div>

  <script type="module">
    import { PiCamera } from 'https://cdn.jsdelivr.net/npm/picamera.js@latest/dist/picamera.esm.js';

    let videoRef = document.getElementById('videoElement');
    let conn = null;

    window.start = function start() {
      // 取得使用者輸入的連線參數
      const deviceUid = document.getElementById('deviceUid').value;
      const mqttHost = document.getElementById('mqttHost').value;
      const mqttPath = document.getElementById('mqttPath').value;
      const mqttPort = parseInt(document.getElementById('mqttPort').value);
      const mqttUsername = document.getElementById('mqttUsername').value;
      const mqttPassword = document.getElementById('mqttPassword').value;

      // 初始化 PiCamera 連線
      conn = new PiCamera({
        deviceUid: deviceUid,
        mqttHost: mqttHost,
        mqttPath: mqttPath,
        mqttPort: mqttPort,
        mqttUsername: mqttUsername,
        mqttPassword: mqttPassword,
        stunUrls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"],
      });
      conn.attach(videoRef);
      conn.connect();
    };

    window.stop = function stop() {
      if (conn) {
        conn.terminate();
      }
    };
  </script>
</body>

</html>