Ketuk layar untuk memicu fokus otomatis dengan getUserMedia

API dengan getUserMedia sangat berguna untuk memiliki aliran video di dalam browser/di dalam halaman HTML5, lihat misalnya https://www.html5rocks.com/en/tutorials/getusermedia/intro/ atau https://simpl.info/getusermedia/sources/.

Dari API ini, bagaimana cara memicu autofokus kamera (smartphone) saat melakukan ketukan pada tampilan video?

Ini memang merupakan perilaku yang biasa terjadi di hampir semua aplikasi kamera ponsel pintar.

Saya belum menemukan apa pun tentang "fokus" di dokumentasi API MediaDevices.getUserMedia()


javascript camera html getusermedia
person Basj    schedule 12.02.2020    source sumber
comment
Yah, menurutku itu tidak mungkin.   -  person Eldar    schedule 15.02.2020

Jawaban (1)


arrow_upward
8
arrow_downward

Hal ini mustahil dilakukan saat ini, namun mungkin terjadi di masa depan. Anda harus melihat Draf Kerja Pengambilan Gambar MediaStream. Spesifikasi ini menjelaskan opsi lanjutan untuk .applyConstraints, yang pertama kali diperkenalkan pada Pengambilan dan Streaming Media.

Bagaimana cara kerjanya sesuai spek? Pertama, Anda perlu mendapatkan kemampuan menggunakan .getCapabilities . Jika browser dapat mengatur fokus, Anda dapat mengatur focusMode: "auto" | "manual" dan focusDistance: number untuk batasan saat ini.

Mode fokus menjelaskan setelan fokus perangkat pengambilan gambar (misalnya otomatis atau manual).

Jarak fokus adalah setelan kamera numerik yang mengontrol jarak fokus lensa. Pengaturan biasanya mewakili jarak dalam meter ke jarak fokus optimal.

Sayangnya, Anda tidak dapat mengontrol fokus saat ini, namun Anda dapat memeriksa kode yang mungkin berfungsi di masa mendatang.

Masalah Chrome tentang dukungan untuk focusDistance | Status Platform Chrome | Status Implementasi Gambar MediaCapture.

Demo CodeSandbox

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then(gotMedia)
  .catch(err => console.error("getUserMedia() failed: ", err));

function gotMedia(mediastream) {
  const video = document.querySelector("video");
  video.srcObject = mediastream;

  const track = mediastream.getVideoTracks()[0];
  const capabilities = track.getCapabilities();

  // Check whether focus distance is supported or not.
  if (!capabilities.focusDistance) {
    return;
  }

  // Map focus distance to a slider element.
  const input = document.querySelector('input[type="range"]');
  input.min = capabilities.focusDistance.min;
  input.max = capabilities.focusDistance.max;
  input.step = capabilities.focusDistance.step;
  input.value = track.getSettings().focusDistance;

  input.oninput = function(event) {
    track.applyConstraints({
      advanced: [{
        focusMode: "manual",
        focusDistance: event.target.value
      }]
    });
  };
  input.hidden = false;
}
<video autoplay></video>
<input type="range" hidden />

person artanik    schedule 17.02.2020
comment
Terima kasih banyak, saya akan memeriksanya nanti ketika ada pembaruan browser, untuk melihat apakah sudah tersedia. PS: walaupun sudah tersedia, sepertinya tidak ada tap untuk fokus otomatis tetapi hanya opsi focusDistance manual? Apakah ini benar? Sayang sekali karena .doAutofocusNow() akan sangat berguna. - person Basj; 18.02.2020
comment
Sepertinya focusMode: "auto adalah tentang ketukan untuk fokus otomatis tetapi tanpa ketukan. Dan, ya, saya tidak melihat sesuatu di antaranya, ketika Anda dapat fokus otomatis ke area tertentu, tapi ini hanya draft yang berfungsi. Anda dapat membuat masalah di repositori w3c dan mengingatkan mereka tentang konsep/fitur yang terlewat ini. :) - person artanik; 18.02.2020
comment
Saya baru saja melakukannya @artanik di sini :) - person Basj; 18.02.2020
comment
Luar biasa, saya harap ini akan menjadi fitur dalam waktu dekat ???? - person artanik; 18.02.2020