從html5拍照

Question

我從很多方面閱讀了很多從html5頁面獲取圖像的方法。 我仍然不確定什么是最符合我需求的：

• 對瀏覽器和操作系統的廣泛支持：至少：chrome，firefox，android默認，safari
• 我不需要實時采集。 用戶必須按下按鈕才能拍照，請求系統相機應用程序

至少有三種解決方案：

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() （似乎已棄用）
• MediaDevices.getUserMedia() （似乎是實驗性的）

無論如何，我看到很多例子將相機嵌入到頁面中(w/ getUserMedia)所以我不知道我是否只能依賴第一種方法。

Answer 1

使用WebRTC getUserMedia API將涵蓋除Safari之外的所有現代瀏覽器： http ： //caniuse.com/#feat=stream

這是一個使用getUserMedia拍攝靜態圖片的示例頁面（帶有描述代碼的頁面的鏈接）。 大多數getUserMedia演示在可見的畫布區域中顯示視頻流，但這不是必需的。 您可以使用getUserMedia捕獲圖像，而無需在可見畫布中顯示視頻流。

不幸的是，Apple采用WebRTC API的速度很慢，所以我認為文件輸入標簽是你能期望的最佳標簽，除非你願意使用像Cordova這樣的東西。 以下是如何使用文件輸入標記的說明。

Media Capture API是候選推薦，這意味着它正在成為標准，但是，我不知道任何實現當前W3C建議的瀏覽器（在輸入標簽中使用裸捕獲屬性）。 目前，移動瀏覽器似乎只支持<input type="file" accept="image/*">樣式。

總之，如果您希望在不久的將來獲得廣泛的瀏覽器支持，您將需要支持這兩種方法，直到Apple開始支持WebRTC API或其他桌面瀏覽器開始支持Media Capture API（或具有capture屬性的變體）目前支持移動瀏覽器）。