Gambaran keseluruhan dan contoh menangkap maklumat audio dan video menggunakan petua tutorial HTML5_html5

Ikhtisar artikel ini
Merakam maklumat audio dan video telah lama menjadi kesukaran dalam pembangunan Web. Selama bertahun-tahun, kami telah bergantung pada pemalam penyemak imbas untuk memenuhi keperluan ini.
Dalam HTML 5, terdapat banyak API yang boleh mengakses peranti perkakasan, seperti API Geolokasi untuk mengakses peranti GPS, API Orientasi untuk mengakses peranti pecutan, API WebGL untuk mengakses peranti GPU, API Audio Web untuk mengakses peranti main balik audio, dsb. . API ini sangat berkuasa kerana pembangun boleh mengakses terus peranti perkakasan asas dengan menulis kod skrip JavaScript.
Artikel ini memperkenalkan API baharu yang membolehkan aplikasi web mempunyai keupayaan untuk mengakses kamera dan peranti mikrofon pengguna dengan menggunakan kaedah navigatior.getUserMedia().

Sejarah pembangunan teknologi untuk menangkap data media
Dalam beberapa tahun kebelakangan ini, keperluan untuk mengakses peranti tempatan pelanggan dalam aplikasi web mula muncul, jadi organisasi W3C memutuskan untuk menganjurkan Kumpulan kerja DAP (DASAR APIS Peranti) untuk membangunkan piawaian bersatu bagi merealisasikan keperluan ini.
Mari kita lihat apa yang berlaku pada tahun 2011:

Menangkap data media dalam fail halaman HTML
Standard pertama yang dibangunkan oleh kumpulan kerja DAP ialah cara Menangkap data media dalam halaman HTML web aplikasi. Mereka memutuskan untuk melebihkan elemen input bagi jenis fail () dan menambah nilai atribut baharu pada atribut accept.
Jika pembangun ingin melaksanakan fungsi pengguna mengambil gambar melalui kamera, mereka boleh menulis kod seperti yang ditunjukkan di bawah.

Salin kod

Kod adalah seperti berikut:

Kod untuk merakam data video dan data audio adalah serupa:

Salin kod

Kod adalah seperti berikut:

untuk melengkapkan pengambilan gambar atau keupayaan untuk merakam data media. Walau bagaimanapun, kerana kod ini masih kekurangan keupayaan untuk melaksanakan beberapa keperluan yang berkaitan (seperti memaparkan data video yang ditangkap dalam elemen kanvas, atau menggunakan penapis WEBGL pada data video yang ditangkap), ia tidak digunakan secara meluas oleh pembangun.
Pelayar yang disokong:

Pelayar Android 3.0
Chrome untuk Android (0.16)
Firefox Mobile 10.0
elemen peranti
Jika anda menggunakan kawalan fail, tangkap data media dan proseskannya Memproses keupayaan adalah sangat terhad, jadi satu standard baharu muncul yang boleh menyokong mana-mana peranti. Piawaian ini menggunakan elemen peranti.
Pelayar Opera ialah penyemak imbas pertama yang menangkap data video melalui elemen peranti. Hampir pada hari yang sama, organisasi WhatWG memutuskan untuk menggunakan kaedah navigator.getUserMedia() untuk menangkap data media. Seminggu kemudian, Opera melancarkan pelayar baharu yang menyokong kaedah navigator.getUserMedia(). Kemudian, Microsoft Tools melancarkan pelayar IE 9 yang menyokong kaedah ini. Penggunaan
elemen peranti adalah seperti berikut.

Salin kod

Kod adalah seperti berikut:

kemas kini fungsi(strim) {
dokumen. querySelector('video').src = stream.url;
Pelayar yang disokong:
Malangnya, tiada versi rasmi penyemak imbas menyokong elemen peranti setakat ini.
WEBRTC
Baru-baru ini, disebabkan kemunculan API WebRTC (Web Real Time Communication: Web real-time communication), teknologi penangkapan data media telah mencapai kemajuan yang besar. Google, Opera, Mozilla dan syarikat lain sedang berusaha keras untuk melaksanakannya dalam penyemak imbas mereka.
WebRTC API ialah API yang berkait rapat dengan kaedah getUserMedia, yang menyediakan keupayaan untuk mengakses kamera tempatan atau peranti mikrofon pelanggan.
Pelayar yang disokong:
Setakat ini, dalam versi Chrome 18 penyemak imbas, WebRTC boleh digunakan selepas menetapkannya dalam halaman chrome://flags Dalam versi Chrome 21 penyemak imbas, API ini digunakan secara lalai, tiada lagi tetapan diperlukan. API WebRTC disokong secara lalai dalam penyemak imbas di atas Opera 12 dan Firefox 17.
Menggunakan kaedah getUserMedia
Dengan menggunakan kaedah getUserMedia, kami boleh mengakses terus peranti kamera tempatan dan peranti mikrofon pelanggan tanpa bergantung pada pemalam.
Mengesan sokongan penyemak imbas
Anda boleh menggunakan kaedah yang ditunjukkan di bawah untuk mengesan sama ada penyemak imbas menyokong kaedah getUserMedia.

Salin kod

Kod tersebut adalah seperti berikut:

fungsi hasGetUserMedia() {
/ /Sila ambil perhatian: Awalan
return tidak digunakan dalam penyemak imbas Opera!!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia ||
}
jika (mempunyaiGetUserMedia()) {
alert('Pelayar anda menyokong kaedah getUserMedia');
}
lain {
alert('Pelayar anda tidak menyokong kaedah getUserMedia');
}

Dapatkan kebenaran untuk mengakses peranti
Untuk mengakses peranti kamera pelanggan dan peranti mikrofon, kami perlu mendapatkan kebenaran terlebih dahulu. Parameter pertama kaedah getUserMedia ialah objek yang menentukan jenis media. Contohnya, apabila anda ingin mengakses peranti kamera, parameter pertama hendaklah {video:true}. Untuk mengakses peranti kamera dan peranti mikrofon pada masa yang sama, anda perlu menggunakan {video:true,audio: true} parameter. Kod adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

window.URL = window.URL || window.webkitURL; |. navigator. mozGetUserMedia ||. navigator.msGetUserMedia; video: true}, fungsi (strim) { video.src = window.URL.createObjectURL(strim);

}, onFailSoHard); penyemak imbas tidak menyokong Kaedah getUserMedia');

}

Sicherheit
In einigen Browsern wird beim Aufruf der getUserMedia-Methode ein Eingabeaufforderungsfenster angezeigt, in dem der Benutzer gefragt wird, ob er den Zugriff auf seine Kamera oder sein Mikrofon zulassen oder verweigern soll.
Fotos aufnehmen
In der Canvas-API können Sie die Methode ctx.drawImage(video,0,0) verwenden, um einen bestimmten Frame im Videoelement an das Canvas-Element auszugeben. Da wir die erfassten Bildinformationen von der Kamera des Benutzers an das Videoelement ausgegeben haben, können wir die Bildinformationen natürlich auch über das Videoelement an das Canvas-Element ausgeben, um die Fotoaufnahme in Echtzeit zu realisieren Funktion. Der Code ist wie folgt.

Code kopieren

Der Code lautet wie folgt:

< ;/video> ;
canvas>var video = document.getElementById('video');
var canvas = document.getElementById('canvas'); var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0); .toDataURL( 'image/png');
}
}
video.addEventListener('click', snapshot, false);
//Kein Herstellerpräfix verwenden
navigator.getUserMedia ({video : true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
},



CSS-Filter anwenden

Bisher können CSS-Filter in Browsern ab Chrome 18 und höher verwendet werden.

Durch die Verwendung von CSS-Filtern können wir dem im Videoelement aufgenommenen Video verschiedene Bildfiltereffekte hinzufügen.



Code kopieren

Der Code lautet wie folgt: Breite: 307px

Höhe: 250px;

Rahmen: 1px solide #ccc;

.grayscale {
-webkit-filter: greyscale(1);
}
.sepia {
-webkit-filter: sepia(1);
.blur {
- Webkit-Filter: Unschärfe (3px);
...
script> var idx = 0; ', ' hue-rotate3', 'saturate', 'invert', ''];
function changeFilter(e) {
var el = e.target;
el.className = ''; 🎜>var effect = filter[idx % filter.length]; // Schleife durch Filter
if (effect) {
el.classList.add(effect);
}
document. getElementById('video').addEventListener('click', changeFilter, false);