Завдяки WebRTC і пов'язані з ним API, такі модулі як Flash і Silverlight для захоплення аудіо і відео з веб-камери, не потрібні. Ця стаття познайомить Вас з getUserMedia - функція API, з проекту WebRTC.
getUserMedia API
Захоплення аудіо та відео з веб камери за допомогою getUserMedia Існує кілька варіантів використання getUserMedia. Перший варіант, спілкування в реальному часі, але його можна використовувати і для запису книг і уроків, онлайн-курсів і т.д ... Другий варіант використання - це спостереження за будинком або за робочими що б не зменшувалася продуктивність праці. Ще getUserMedia API можна застосувати для прозорості відео або виконати захоплення змісту сайту з кодом, дивіться записи « Альфа-прозорість в відео HTML5 »,« захоплення змісту ».
getUserMedia API корисний як для розробників, так і користувачів. Розробники тепер можуть отримати доступ до аудіо і відео джерел сигналу за допомогою однієї функції. При цьому користувачам не потрібно встановлювати додаткове програмне забезпечення. Для користувачів це означає, зменшення часу завантаження за допомогою об'єктів, а також розширення використання програмного забезпечення для технічно підкованих людей.
Хоча getUserMedia API, за станом на 07 січня 2014 року, все-таки визнаний стандартом W3C. API надає тільки один метод; getUserMedia (), який відноситься до елементів window.navigator. Метод приймає success, failure в якості параметрів зворотного виклику. Елемент має властивості audio і video. Це логічне значення, де true означає запит потоку аудіо або відео, а false без запиту потоку.
Аудіо та відео, передається наступними запитами:
{Video: true, audio: true}Крім того, значення може бути з Constraints елементів. Цей тип елементів дає нам більше контролю над потоком. Ми можемо вказати джерело відеосигналу з високою роздільною здатністю, наприклад 1280 x 720, або з маленьким, наприклад 320 x 180. Кожне обмеження елементів містить дві властивості: mandatory і optional.
mandatory, (обов'язкові властивості) - це набір обмежень, які повинні задовольняти вимогам, якщо немає буде виклик errorCallback.
optional, являє собою масив елементів, вказаних в наборі обмежень, вимоги яких повинні виконуватися, але якщо вони не зможуть бути реалізовані, будуть ігноруватися.
Припустимо, нам потрібно, аудіо та відео користувача, з високою роздільною здатністю і частотою 30 кадрів в секунду. Крім того, якщо є можливість, щоб відео було з частотою 60 кадрів.
Для виконання цього завдання потрібно зробити наступне:
{Video: {mandatory: {minWidth: 1280, minHeight: 720, minFrameRate: 30}, optional: [{minFrameRate: 60}]}, audio: true}Більш детальну інформацію про властивості, Ви можете знайти на сторінці.
Два інших аргументу getUserMedia () - це два протилежних виклику. Якщо отриманий потік успішно передається в функцію зворотного виклику, Ви побачите відео, якщо немає, буде помилка зворотного виклику, що містить інформацію про помилку, що відбулася.
Сумісність з браузерами
Браузери настільних комп'ютерів підтримують getUserMedia API, але на мобільних пристроях виникають проблеми. Крім того, більшість браузерів, які підтримують getUserMedia API, як і раніше вимагають префікси.
Список браузерів, які в даний час підтримують getUserMedia API:
- Chrome 21+ (префікс -webkit)
- Firefox 17+ (префікс -moz)
- Опера 12+ (не підтримує починаючи з версії від 15 до 17)
На мобільних браузерах etUserMedia API підтримується тільки: Chrome 21+ (префікс -webkit), і Опера 12+ (префікс -webkit починаючи з версії 16). Також зверніть увагу, що якщо сторінка, що містить інструкції для роботи з цим API відкрита через file: // протокол в Chrome, вона не буде працювати.
У випадку з Опера - це дійсно цікаво і заслуговує увагу. У цьому браузері реалізований API, але, з невідомої мені причини, після переходу на версію 15, etUserMedia API більше не підтримується. Нарешті, підтримка API був відновлений у версії 18. Opera 18 - перша з версії, яка підтримує аудіо потік.
Ми не повинні ігнорувати проблеми сумісності getUserMedia API з браузерами, використовуйте який вирішить проблему сумісності.
Демонстрація getUserMedia API
У цьому розділі я покажу вам демонстрацію з використанням getUserMedia API, що б Ви побачили як працює getUserMedia API і конкретно подивитися його параметри. Мета цієї демо-програми створення "дзеркала", в тому сенсі, що все, що захоплено з веб-камери і мікрофона буде передаватися на екран і аудіо-динаміки. Ми будемо питати у користувача дозвіл доступу до мультимедійного потоку, а потім виводити їх за допомогою простої розмітки відео HTML5. До елементу відео HTML5 будуть додані дві кнопки: одна для відтворення відео, а інша щоб зупинити потік.
Якщо інтерфейс API не підтримується браузером, на моніторі з'являється повідомлення "Ваш браузер не підтримує getUserMedia API", і відключить кнопки. Якщо браузер підтримує getUserMedia API, кнопки подій будуть активні. Якщо натиснута кнопка "Відтворення", скрипт перевіряє версію браузера Opera, тому що з нею проблеми, які описані в попередньому розділі. Потім, викликаємо дані аудіо і відео з пристрою користувача. Якщо запит виконаний успішно, ми побачимо потік даних за допомогою елемента відео; в іншому випадку, буде помилка, яка сталася в консолі. Кнопка "Стоп" зупинить відео в режим паузи, і потік буде зупинений.
Код демонстрації getUserMedia API написаний Aurelio De Rosa:
код:
<! DOCTYPE html> <html lang = "ru"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" /> <title> Демонстрація getUserMedia API </ title> <style> body {max-width: 500px; margin: 2em auto; font-size: 20px; } H1 {text-align: center; } .Buttons-wrapper {text-align: center; } .Hidden {display: none; } #Video {display: block; width: 100%; } .Button-demo {padding: 0.5em; display: inline-block; margin: 1em auto; } .Author {display: block; margin-top: 1em; } </ Style> </ head> <body> <h1> Демонстрація getUserMedia API </ h1> <video id = "video" autoplay controls> </ video> <div class = "buttons-wrapper"> <button id = "button-play-gum" class = "button-demo" href = http://www.pixelcom.crimea.ua/ "#"> Відтворення </ button> <button id = "button-stop-gum" class = "button-demo" href = http://www.pixelcom.crimea.ua/ "#"> Стоп </ button> </ div> <span id = "gum-unsupported" class = "hidden"> Ваш браузер не підтримує getUserMedia API </ span> <span id = "gum-partially-supported" class = "hidden"> Ваш браузер підтримує getUserMedia API частково (тільки відео) </ span> <script> var videoStream = null; var video = document.getElementById ( "video"); // Підтримка браузерами window.navigator = window.navigator || {}; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || null; if (navigator.getUserMedia === null) {document.getElementById ( 'gum-unsupported'). classList.remove ( 'hidden'); document.getElementById ( 'button-play-gum'). setAttribute ( 'disabled', 'disabled'); document.getElementById ( 'button-stop-gum'). setAttribute ( 'disabled', 'disabled'); } Else {// Опера <= 12.16 приймає direct stream. // Детальніше про це тут: http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/ var createSrc = window.URL? window.URL.createObjectURL: function (stream) {return stream;}; // Опера <= 12.16 підтримує тільки відео. var audioContext = window.AudioContext || window.webkitAudioContext || null; if (audioContext === null) {document.getElementById ( 'gum-partially-supported'). classList.remove ( 'hidden'); } Document.getElementById ( 'button-play-gum'). AddEventListener ( 'click', function () {// Захоплення аудіо та відео з пристрою користувача navigator.getUserMedia ({video: true, audio: true}, function (stream ) {videoStream = stream; // Stream the data video.src = createSrc (stream); video.play ();}, function (error) {console.log ( "Помилка захоплення відео:", error.code);} );}); document.getElementById ( 'button-stop-gum'). addEventListener ( 'click', function () {// Пауза video.pause (); // Стоп videoStream.stop ();}); } </ Script> </ body> </ html>висновок
У цій статті я познайомив Вас з проектом WebRTC, на мій погляд це один з найцікавіших веб-проектів за останні роки. getUserMedia API призначений для створення зв'язку в реальному часі за допомогою браузера, який відкриває користувачу багато нових можливостей.
У цій статті Ви побачили; що getUserMedia - це простий і дуже легкий API. Він, надає тільки один метод, який дозволяє нам захопити аудіо та потокове відео. Сумісність між браузерами не дуже велика, але вона зростає, і це хороша новина! Щоб краще зрозуміти концепції, викладені в цій статті, експериментуйте з кодом з демонстрації.
URL?