Menggunakan API Tangkapan Media

Artikel ini meneroka API Penangkapan dan Stream Media (GetUsermedia), membolehkan halaman web untuk mengakses webcam dan mikrofon tanpa plugin. Disokong oleh pelayar utama termasuk Chrome, Opera, Firefox, dan Edge.

API menawarkan video, audio, dan penangkapan imej; mengawal tetapan kamera (resolusi, kadar bingkai, fokus); Sokongan Multi-Camera; dan integrasi dengan API lain. Aplikasi terdiri daripada sembang video ke penciptaan kandungan media sosial. Kebenaran pengguna diperlukan, dan ketersediaan ciri berbeza di seluruh peranti dan penyemak imbas.

Ciri -ciri utama dan fungsi:

kaedah

, pusat API, menggunakan getUserMedia() untuk menentukan keutamaan menangkap (FacingMode, Volume, Resolusi). MediaStreamConstraints membantu memilih peranti khusus melalui enumerateDevices() mereka. Panggilan yang berjaya mengembalikan objek deviceId. MediaStream

Keserasian penyemak imbas:

API menikmati sokongan luas, sejak kembali ke Chrome 21, Opera 18, dan Firefox 17, dengan tambahan baru -baru ini. Modernizr memudahkan pemeriksaan keserasian pelayar. Tanpa Modernizr, pemeriksaan manual diperlukan untuk mengendalikan ketidakkonsistenan penyemak imbas.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

secara alternatif, tanpa modenizr:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Main balik video:

HTML termasuk tag

(ditetapkan ke <video></video> dan autoplay) untuk memaparkan aliran yang ditangkap. JavaScript secara dinamik menetapkan muted (atau srcObject sebagai sandaran) elemen video. src

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

Akses kamera dan keizinan: API mengutamakan keselamatan pengguna. Apabila dilancarkan, aplikasi meminta kebenaran untuk menggunakan webcam (atau webcam dan mikrofon, jika ditentukan). menerima objek yang menentukan keperluan akses media (

untuk webcam,

untuk kedua -duanya). getUserMedia() {video: true} {video: true, audio: true}

Pelbagai sokongan webcam:

Mendapatkan maklumat mengenai peranti input/output media yang tersedia (mikrofon, kamera, pembesar suara). Ia mengembalikan janji yang menyelesaikan kepada pelbagai objek peranti, masing -masing dengan sifat seperti ,

, dan

. Ciri ini masih eksperimen. MediaDevices.enumerateDevices() kind deviceId Menetapkan Sumber Video: label

Fungsi menetapkan sumber tag video kepada yang diterima . Ia menggunakan

jika disokong, jatuh ke

untuk pelayar yang lebih tua. initializeVideoStream() MediaStream srcObject URL.createObjectURL() penapis CSS:

var initializeVideoStream = function(stream) {
    // ... (code to set video source) ...
};

Aplikasi ini menggunakan penapis CSS masa nyata ke video dan imej. Kitaran fungsi JavaScript melalui penapis yang telah ditetapkan (kelabu, sepia, kabur, dll.), Menambah kelas CSS yang sepadan dengan elemen video.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Penjimatan imej:

navigator.msSaveBlob (IE10) atau sandaran menggunakan toDataURL dan elemen <a></a> menjimatkan imej yang ditangkap.

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Perkembangan selanjutnya:

Kemungkinan masa depan termasuk integrasi WebGL untuk penapisan lanjutan dan persekitaran interaktif, dan integrasi API Audio Web untuk manipulasi audio. Sokongan penyemak imbas mudah alih juga berkembang.

(yang lain dari input asal, termasuk Soalan Lazim dan Sumber Pembelajaran Microsoft, ditinggalkan untuk keringkasan, kerana ia sebahagian besarnya deskriptif dan tidak secara langsung berkaitan dengan fungsi teras API penangkapan media seperti yang ditunjukkan dalam kod tersebut Coretan.)

Atas ialah kandungan terperinci Menggunakan API Tangkapan Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!