您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

H5 手機頁面調用攝像頭：getUserMedia API 完整指南

編輯：程式設計綜合問答

核心 API

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => {
        const video = document.querySelector('video');
        video.srcObject = stream;
        video.play();
    })
    .catch(err => console.error('攝像頭存取失敗:', err));

HTML 結構

<video id="camera" autoplay playsinline width="100%"></video>
<button onclick="capture()">拍照</button>
<canvas id="snapshot" style="display:none"></canvas>

拍照並上傳

function capture() {
    const video = document.getElementById('camera');
    const canvas = document.getElementById('snapshot');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    // 轉 Base64 或 Blob 上傳
    canvas.toBlob(blob => {
        const formData = new FormData();
        formData.append('image', blob, 'photo.jpg');
        fetch('/upload', { method: 'POST', body: formData });
    }, 'image/jpeg', 0.9);
}

關鍵限制與相容性

必須 HTTPS（或 localhost），HTTP 環境瀏覽器拒絕 getUserMedia。
iOS Safari 需 <video playsinline> 否則全屏播放無法在頁面內拍照。
Android WebView 需在 WebChromeClient 中實作 onPermissionRequest 授權攝像頭權限。
相容性：Chrome 53+, Firefox 36+, Safari 11+, Edge 79+。舊版需前綴 navigator.webkitGetUserMedia。