Захват аудио & видео в HTML5/webRTC

Введение

Аудио захват / видео было "Святой Грааль" веб-разработки в течение длительного времени. На протяжении многих лет мы были полагаться на плагины браузера (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() является лишь первой волны доступ к новым типам устройств. Я надеюсь, что мы будем продолжать видеть больше в ближайшем будущем!

Дополнительные ресурсы

Демос

 

Добавить комментарий

Обратная связь

Интересуют вопросы реализации алгоритмов, программирования, выбора электроники и прочая информация, постараюсь осветить в отдельных статьях

пишите мне на netdm@mail.ru