許多瀏覽器現在都能存取使用者的影片和音訊輸入內容。不過,視瀏覽器而定,這可能會是完整的動態內嵌體驗,也可能會委派給使用者裝置上的其他應用程式。
從簡單開始,逐步增加
最簡單的方法就是請使用者提供預錄檔案。方法是建立簡單的檔案輸入元素,並新增 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 無法提供您是否已取得攝影機存取權的資訊。這會導致問題:為了提供良好的使用者介面,讓使用者授予相機存取權,您必須要求相機存取權。
您可以使用 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 () {};
});