getUserMedia
Історично єдиним способом взаємодії з локальними ресурсами в Інтернеті є завантаження файлів. Єдині локальні пристрої з якими ви можете дійсно взаємодіяти — це миша та клавіатура. На щастя, це не так. У попередньому розділі ми бачили як управляти аудіо. У цьому розділі ми поговоримо про веб-камеру користувача.
Передусім хочу наголосити, що все це ще альфа-версія. API для розмови через локальні пристрої неодноразово змінювалися і, ймовірно, змінюватимуться не раз, перш ніж вони стануть стандартом. Крім того, лише десктопна версія Chrome і Opera має реальну підтримку для розмови через веб-камеру. Фактично немає підтримки на телефонах. Використовуйте цей розділ як спосіб побачити, що настане в майбутньому і отримайте задоволення граючи з кодом, але в жодному разі не використовуйте в робочому коді. Як згадувалося, давайте повеселимося!
У доступу до локальних пристроїв з веб-сторінки довге і строкате минуле. Традиційно це було прерогативою лише плагінів, таких як Flash та Java. Ситуація багато в чому змінилася кілька років тому. Група WebRTC націлилася дозволити комунікацію в реальному часі в Інтернеті. Подумайте про відео-чати та пряму трансляцію концертів. Одним із необхідних компонентів для цього є доступ до веб-камери. Сьогодні ми можемо зробити це за допомогою navigator.getUserMedia().
Я збираюся показати вам метод, який працює в останній версії Chrome. Більш надійне рішення показано в цій статті на HTML5 Rocks. Також зверніть увагу, що getUserMedia не працюватиме з локальними файлами. Ви повинні запускати все на локальному веб-сервері.
Для початку нам знадобиться елемент <video> на сторінці. Там буде відображатися веб-камера.
<code data-language="html"><video autoplay></video>
Щоб отримати доступ до веб-камери, ми повинні спочатку подивитися, чи є підтримка через navigator.webkitGetUserMedia !=null. Якщо існує, ми можемо запросити доступ. options визначає, що нам потрібно: аудіо, відео або те й інше. На момент написання статті тільки аудіо не працює в Chrome.
<code data-language="javascript">if(navigator.webkitGetUserMedia!=null) ; //запитуємо доступ до веб-камери navigator.webkitGetUserMedia(options, function(stream) { //отримуємо тег video var video=document.querySelector('video'); //включаємо потік у магічний URL video.src=window.webkitURL .createObjectURL(stream);}, function(e) { console.log("error happened"); }); }При викликі webkitGetUserMedia відкривається діалогове вікно, в якому користувача запитують, якщо наша сторінка може отримати доступ. Якщо користувач схвалює тоді викликається перша функція. Якщо виникли проблеми, то буде викликана функція помилки.
Тепер у нас є потік, який ми можемо приєднати до елемента <video> на сторінці , за допомогою магічного URL через webkitURL.createObjectURL(). Після підключення елемент <video> покаже живий вигляд з веб-камери.
Ось як це виглядає:
Проста веб-камера
Створення знімка
Тепер ми маємо живий потік веб-камери, але що ми можемо з цим зробити? Коли це відбувається, елемент <video> чудово відтворює на полотні. Ми можемо зробити знімок із веб-камери просто намалювавши на полотні елемент.
<code data-language="html"><form><input type='button' id='snapshot' value="snapshot"></form> <canvas id='canvas' width='100' height='100'></canvas> <script> document.getElementById('snapshot').onclick=function() { var video=document.querySelector('video'); var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.drawImage(video,0,0); }
</script>При натисканні на кнопку її обробник подій захопить елемент <video> зі сторінки та намалює його на полотні. Ми використовуємо той самий виклик drawImage(), що і для статичних зображень. Через цю функцію ми можемо маніпулювати картинкою аналогічно роботі із зображеннями. Для розтягнення змініть виклик drawImage на наступний:
<code data-language="javascript">//вихідне відео змінює розмір на 100x100 ctx.drawImage( video,0,0,100,100);
Розтягнутий знімок
Ось і все. Веб-камера це просто зображення. Ми можемо модифікувати його, використовуючи деякі ефекти, описані у розділі про буфер пікселів. Код нижче інвертує знімок.
<code data-language="javascript">var video=document.querySelector('video'); var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.drawImage(video,0,0); //отримуємо дані полотна var data=ctx.getImageData(0,0,canvas.width,canvas.height); //інвертуємо кожен піксель for(n=0; n<data.width*data.height; n++) { var index=n*4; data.data[index+0]=255-data.data[index+0]; data.data[index+1]=255-data.data[index+1]; data.data[index+2]=255-data.data[index+2]; //don't touch the alpha }
//встановлюємо дані назад ctx.putImageData(data,0,0); 
Інвертований знімок
Ви можете робити це живо неодноразово захоплюючи відео, а не тільки коли користувач натиснув кнопку.
Більше крутих хаків
Те, що я показав вам, це тільки верхівка айсберга можливостей. Ось ще кілька прикладів, створених іншими талановитими розробниками. src="/assets/images/canvasdeepdive/webcamtoy.jpg" alt="webcamtoy.com">
Soundstep.com створив ксилофон, яким ви керуєте, просто переміщуючи руки перед веб-камерою. Зверніть увагу на датчик руху глядача в правому нижньому кутку. /p>
Мікрофон насправді поки що не працює. Ви не можете поки що підключити його до аудіо-матеріалів через баги, але сподіваюся це зміниться найближчим часом.