HTML 屬性:capture

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

capture 屬性指定是否(可選)應捕獲新檔案,以及應使用哪個裝置來捕獲由 accept 屬性定義的特定型別的新媒體。

值包括 userenvironmentcapture 屬性支援 file 輸入型別。

如果 accept 屬性指示輸入應該是這些型別之一,則 capture 屬性的值是一個字串,用於指定用於捕獲影像或影片資料的攝像頭。

描述
使用者 應使用使用者正面的攝像頭和/或麥克風。
environment 應使用面向外部的攝像頭和/或麥克風。

注意:capture 之前是一個布林屬性,如果存在,則要求使用裝置的媒體捕獲裝置(如攝像頭或麥克風)而不是請求檔案輸入。

試一試

<label for="selfie">Take a picture of your face:</label>

<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />

<label for="picture">Take a picture using back facing camera:</label>

<input
  type="file"
  id="picture"
  name="picture"
  accept="image/*"
  capture="environment" />
label {
  display: block;
  margin-top: 1rem;
}

input {
  margin-bottom: 1rem;
}

示例

當在檔案輸入型別上設定時,具有麥克風和攝像頭的作業系統將顯示一個使用者介面,允許從現有檔案中選擇或建立新檔案。

html
<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*" />
</p>

請注意,這些在移動裝置上效果更好;如果您的裝置是臺式電腦,您很可能會看到一個典型的檔案選擇器。

規範

規範
HTML 媒體捕獲
# dfn-capture

瀏覽器相容性

另見