向使用者錄製影片

Mat Scales
X

許多瀏覽器現在都能存取使用者的影片和音訊輸入內容。不過，視瀏覽器而定，這可能會是完整的動態內嵌體驗，也可能會委派給使用者裝置上的其他應用程式。

從簡單開始，逐步增加

最簡單的方法就是請使用者提供預錄檔案。方法是建立簡單的檔案輸入元素，並新增 accept 篩選器，指出我們只接受影片檔案，以及 capture 屬性，指出我們要直接從攝影機取得檔案。

<input type="file" accept="video/*" capture />

這個方法適用於所有平台。在電腦上，系統會提示使用者從檔案系統上傳檔案 (忽略 capture 屬性)。iOS 版 Safari 會開啟相機應用程式，讓您錄製影片並傳回網頁；如果是 Android 裝置，使用者可以選擇使用哪個應用程式錄製影片，然後再傳送回網頁。

許多行動裝置都配備多個相機。如果有偏好，可以將 capture 屬性設為 user (如果您想讓攝影機面向使用者的鏡頭)；或 environment (如果您想讓鏡頭外面的攝影機)。

<input type="file" accept="video/*" capture="user" />
<input type="file" accept="video/*" capture="environment" />

請注意，這只是提示。如果瀏覽器不支援此選項，或是您要求的相機類型無法使用，瀏覽器可能會選擇其他相機。

使用者完成錄影並返回網站後，您必須以某種方式取得檔案資料。您可以將 onchange 事件附加至輸入元素，然後讀取事件物件的 files 屬性，即可快速存取。

<input type="file" accept="video/*" capture="camera" id="recorder" />
<video id="player" controls></video>
<script>
  var recorder = document.getElementById('recorder');
  var player = document.getElementById('player');

  recorder.addEventListener('change', function (e) {
    var file = e.target.files[0];
    // Do something with the video file.
    player.src = URL.createObjectURL(file);
  });
</script>

獲得檔案存取權後，你可以視需要對檔案執行任何操作。舉例來說，您可以執行下列操作：

  • 直接將其附加至 <video> 元素，即可播放
  • 下載至使用者的裝置
  • 附加到 XMLHttpRequest，即可上傳至伺服器
  • 將影格繪製至畫布，並套用濾鏡

雖然使用輸入元素方法存取影片資料的做法無所不在，但它是最不受歡迎的做法。我們真的很想取得相機存取權，並直接在頁面中提供良好的體驗。

以互動方式存取攝影機

新式瀏覽器可直接與鏡頭連線，讓我們打造與網頁完全整合的服務體驗，使用者永遠不會離開瀏覽器。

取得攝影機存取權

我們可以使用 WebRTC 規格中的 API (稱為 getUserMedia())，直接存取相機。getUserMedia() 會提示使用者存取已連接的麥克風和相機。

如果成功，API 會傳回 Stream，其中包含來自相機或麥克風的資料，我們可以將其附加至 <video> 元素、附加至 WebRTC 串流，或使用 MediaRecorder API 儲存。

如要從相機取得資料，我們只需在傳遞至 getUserMedia() API 的限制物件中設定 video: true

<video id="player" controls></video>
<script>
  var player = document.getElementById('player');

  var handleSuccess = function (stream) {
    player.srcObject = stream;
  };

  navigator.mediaDevices
    .getUserMedia({audio: true, video: true})
    .then(handleSuccess);
</script>

如要選擇特定攝影機，請先列舉可用的攝影機。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices = devices.filter((d) => d.kind === 'videoinput');
});

接著，您可以在呼叫 getUserMedia 時傳遞要使用的 deviceId。

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    deviceId: devices[0].deviceId,
  },
});

這項資訊本身並沒有太大用處。我們只能擷取影片資料並播放。

存取相機的原始資料

如要存取相機的原始影片資料，您可以將每個影格繪製至 <canvas>，然後直接操作像素。

對於 2D 畫布，您可以使用結構定義的 drawImage 方法，將 <video> 元素的目前影格繪製到畫布中。

context.drawImage(myVideoElement, 0, 0);

透過 WebGL 畫布，您可以使用 <video> 元素做為紋理的來源。

gl.texImage2D(
  gl.TEXTURE_2D,
  0,
  gl.RGBA,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  myVideoElement,
);

請注意，無論是哪種情況，系統都會使用播放影片的當前影格。如要處理多個影格，您每次都必須將影片重新繪製到畫布上。

如要進一步瞭解這項功能，請參閱這篇文章，瞭解如何將即時特效套用至圖片和影片。

儲存攝影機的資料

如要儲存攝影機的資料，最簡單的方法是使用 MediaRecorder API。

MediaRecorder API 會採用 getUserMedia 建立的串流，然後逐步將串流中的資料儲存至您偏好的目的地。

<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
  let shouldStop = false;
  let stopped = false;
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');

  stopButton.addEventListener('click', function() {
    shouldStop = true;
  })

  var handleSuccess = function(stream) {
    const options = {mimeType: 'video/webm'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) {
        recordedChunks.push(e.data);
      }

      if(shouldStop === true && stopped === false) {
        mediaRecorder.stop();
        stopped = true;
      }
    });

    mediaRecorder.addEventListener('stop', function() {
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.webm';
    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then(handleSuccess);
</script>

在本例中，我們會將資料直接儲存到陣列，之後再轉換為 Blob，然後用於儲存到 Web 伺服器，或直接儲存到使用者裝置的儲存空間。

要求存取權以負責任地使用攝影機

如果使用者先前未授予網站相機存取權，您一呼叫 getUserMedia，瀏覽器就會提示使用者授予網站相機權限。

使用者不喜歡收到要求存取機器上強大裝置的提示，因此經常會封鎖這類要求，如果不瞭解提示的建立背景，也會忽略這類提示。最佳做法是僅在首次需要時要求存取攝影機。系統不會在使用者授予權限後再次詢問，但如果他們拒絕存取權，您就無法再次要求取得權限。

運用權限 API 檢查是否已具備存取權

getUserMedia API 無法提供您是否已取得攝影機存取權的資訊。這會顯示一個問題，如要提供良好的 UI 讓使用者授予您相機存取權，您必須要求相機存取權。

您可以使用 Permission API 在部分瀏覽器中解決這個問題。透過 navigator.permission API，您不必再次提示，即可查詢特定 API 的存取權狀態。

如要查詢您是否有權存取使用者的相機，您可以將 {name: 'camera'} 傳入查詢方法，系統會傳回以下任一項目：

  • granted：使用者先前已授予你攝影機的存取權；
  • prompt：使用者未授予您存取權，您呼叫 getUserMedia 時會收到提示。
  • denied：系統或使用者已明確封鎖攝影機的存取權，因此你無法存取攝影機。

您現在可以快速檢查，看看是否需要變更使用者介面，以便配合使用者需要採取的動作。

navigator.permissions.query({name: 'camera'}).then(function (result) {
  if (result.state == 'granted') {
  } else if (result.state == 'prompt') {
  } else if (result.state == 'denied') {
  }
  result.onchange = function () {};
});

意見回饋