1. Вступ Аудіо захоплення / відео було "Святий Грааль" веб-розробки протягом тривалого часу. Протягом...
2. WebGL текстури
3. Використання getUserMedia з веб-Audio API
4. висновок

Вступ

Аудіо захоплення / відео було "Святий Грааль" веб-розробки протягом тривалого часу. Протягом багатьох років ми були покладатися на плагіни браузера (Flash, або Silverlight), щоб отримати роботу. Давай!

HTML5 на допомогу. Воно не може бути очевидним, але зростання HTML5 приніс сплеск доступу до апаратним пристроєм. геолокації (GPS), то орієнтація API (Акселерометр), WebGL (GPU), і веб-Аудіо API (Аудіо апаратне забезпечення) є прекрасними прикладами, Ці особливості смішного потужний, піддаючи високого рівня JavaScript API, які сидять на вершині основних апаратних можливостей системи.

Цей підручник представляє новий API, navigator.getUserMedia () яка дозволяє веб-додатків для доступу до камери користувача і мікрофон.

беручи скріншоти

<Canvas> API, ctx.drawImage (video, 0, 0) метод робить тривіальної залучити <video> кадри до <canvas> Звичайно, тепер у нас є відеовхід за допомогою getUserMedia () це так само легко створити додаток Photo Booth з в режимі реального часу відео:

<Video autoplay> </ video> <img src = ""> <canvas style = "display: none;"> </ canvas> <script> var video = document. querySelector ( 'video'); var canvas = document. querySelector ( 'canvas'); var ctx = canvas. getContext ( '2d'); var localMediaStream = null; function snapshot () {if (localMediaStream) {ctx. drawImage (video, 0, 0); // "image / webp" works in Chrome. // Other browsers will fall back to image / png. document.querySelector ( 'img'). src = canvas.toDataURL ( 'image / webp'); }} Video.addEventListener ( 'click', snapshot, false); // Not showing vendor prefixes or code that works cross-browser. navigator.getUserMedia ({video: true}, function (stream) {video.src = window.URL.createObjectURL (stream); localMediaStream = stream;}, errorCallback); </ Script>

тров

WebGL текстури

Один дивовижний випадок використання для захоплення відео є надання живий вхід в WebGL текстури. Так як я абсолютно нічого не знаємо про WebGL (крім того, що це мило), я збираюся пропоную вам Джерома Етьєна підручник і демо подивимося. Це говорить про те, як використовувати getUserMedia () і three.js надавати живе відео в WebGL.

Використання getUserMedia з веб-Audio API

Один з моїх снів, щоб побудувати автонастройки в браузері з не більше ніж відкритої веб-технології!

Хром підтримує живу мікрофонний вхід з getUserMedia () в веб-Audio API для ефектів в реальному часі. Трубопроводи вхід для мікрофона на веб-Audio API виглядає наступним чином:

window. AudioContext = window. AudioContext || window. webkitAudioContext; var context = new AudioContext (); navigator. getUserMedia ({audio: true}, function (stream) {var microphone = context. createMediaStreamSource (stream); var filter = context. createBiquadFilter (); // microphone -> filter -> destination. microphone.connect (filter); filter .connect (context.destination);}, errorCallback);

демонстрації:

Для отримання додаткової інформації див пост Кріса Вілсона.

висновок

В цілому, пристрій доступу в мережі була міцним горішком для злому. багато люди намагалися, мало вдалося. Більшість ранніх ідей ніколи не заволоділи межами власної середовищі і не мають вони набули широкого поширення.

Реальна проблема полягає в тому, що модель Павутини безпеки дуже відрізняється від рідного світу. Наприклад, я, ймовірно, не хочу, щоб кожен веб-сайт Джо Shmoe мати довільний доступ до моєї відеокамерою. Це складна проблема, щоб отримати права.

Подолання рамок, як PhoneGap допомогли підштовхнути кордон, але вони тільки початок і тимчасове вирішення основної проблеми. Для того, щоб веб-додатки конкурентоспроможні, щоб їх настільні аналоги, нам потрібен доступ до рідної пристроїв.

getUserMedia () є лише першої хвилі доступ до нових типів пристроїв. Я сподіваюся, що ми будемо продовжувати бачити більше в найближчому майбутньому!

додаткові ресурси

Демос