Alakkan kamera web anda ke penyemak imbas di JavaScript

opera 12: perintis dalam sokongan API aliran multimedia W3C

Pelepasan Perisian Opera Versi 12 menandakan peristiwa penting yang signifikan, menjadikannya pelayar utama pertama untuk menyokong API Multimedia Stream W3C (juga dikenali sebagai API GetUsermedia). API ini membolehkan streaming kamera dan input mikrofon terus ke tetingkap penyemak imbas, biasanya digunakan sebagai atribut

elemen src. Memandangkan status draf API dan sifat yang berkembang, artikel ini memberikan gambaran keseluruhan asas. Kami akan mengembangkan ini kerana API matang dan mendapat sokongan yang lebih luas. <video></video>

Mengesahkan sokongan API

Pada masa ini, Opera kekal sebagai penyemak imbas tunggal dengan sokongan API Stream. Oleh itu, memeriksa ketersediaan API sebelum pelaksanaan adalah penting. Fungsi berikut mengesahkan sokongan dengan mengkaji kaedah

objek navigator: getUserMedia()

<code class="language-javascript">function isStreamSupported() {
  return !!navigator.getUserMedia;
}</code>

menggunakan kaedah

getUserMedia()

Kaedah

menyediakan akses kepada API Stream. Walau bagaimanapun, kebenaran pengguna yang jelas diperlukan. Setelah memanggil navigator.getUserMedia(), Opera memaparkan dialog persetujuan. getUserMedia()

sintaks

adalah seperti berikut: Ia menerima dua hujah wajib dan pilihan ketiga. Objek "Kekangan" menentukan aliran media yang diminta (video dan/atau audio).

dilaksanakan atas akses yang berjaya, menerima objek Stream Media. getUserMedia() (pilihan) mengendalikan kegagalan (mis., Penafian pengguna). successCallback errorCallback

Mengintegrasikan dengan

<code class="language-javascript">navigator.getUserMedia(constraints, successCallback[, errorCallback]);</code>

Elements

<video></video> Contoh ini menunjukkan input kamera streaming ke elemen HTML

, termasuk permainan, jeda, dan kawalan berhenti. Permintaan pembolehubah

kedua -dua audio dan video. (Versi langsung, jika tersedia di opera, akan dihubungkan di sini.) <video></video> constraints

Soalan Lazim (Soalan Lazim)

<code class="language-html"><title>getUserMedia Example</title>
<meta charset="UTF-8">
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<br><br>
<video id="camera"></video>

</code>

Bahagian ini menangani soalan umum mengenai streaming webcam dalam JavaScript, meliputi keselamatan, penyelesaian masalah, penstriman pelbagai pelayar, pelarasan resolusi, pengurangan kelewatan, rakaman, pengendalian ralat, integrasi audio/video, pengoptimuman prestasi, dan aplikasi penapis. (Jawapan terperinci dari teks asal akan dimasukkan di sini).

Atas ialah kandungan terperinci Alakkan kamera web anda ke penyemak imbas di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!