html5 device – аудио capture в браузерах

В последних спецификациях html есть много интересных плюшек и одна из них, о которой, пока, никто не говорит — это элемент device. Он предоставляет доступ к таким устройствам, как камера или микрофон. И, хотя этот элемент ещё не поддерживается ни одним из браузером — это будущее веб-разработки.
interface HTMLDeviceElement : HTMLElement {
attribute DOMString type;
readonly attribute any data;
};



HTML5 – стандарт нового поколения для браузеров, последняя разработка WHATWG и на сегодняшний день реализован разработчиками браузера. На разработку спецификации ушло более пяти лет и она до сих пор находится на стадии разработки. HTML5 сделал большой шаг в превращении браузера в более сильную платформу для приложений с помощью некоторых новых функций. WebSockets и Server-sent events открыты для гибких сетевых приложений, а media elements и canvas element могут быть использованы для seamlessly embed новых типов контента на веб-страницах. Каков же будет следующий шаг в HTML?

Ответ на вышезаданный вопрос даст возможность контролировать новые типы устройств ввода. Html-элемент device предоставляет доступ к устройству, который предоставляет доступ к таким устройсвам, как микрофон или веб-камера. Фрагмент кода приведённого ниже демонстрирует как элемент устройства и Stream API могут быть использованы для записи короткого аудио-клипа. Обратите внимание, что элемент устройства и связанные с ним API пока не доступны ни в одном браузере и они могут поменятся до появления браузера. В любом случае, пока код выглядит так:

Select device:

В разметке страницы содержится ссылка на устройство, указанная при помощи тега device и кнопка. Атрибут тега device «type» указан как «audio_capture» с целью выбрать устройство для записи аудио.

// in window.onload
document.getElementById("media_device").onchange = function () {
// ready to record
audioStream = this.data;
recordCtlBut.disabled = false;
};

Когда устройство выбрано, то вызывается событие change, на которое можно повесить коллбек для реакции на изменения. Свойство data — это объект Stream, который представляет выбранное устройство.

// in window.onload
recordCtlBut = document.getElementById("record_ctl_but");

recordCtlBut.onclick = function () {
if (!recorder) {
// start recording
recordCtlBut.value = "Stop";
recorder = audioStream.record();
// set the maximum audio clip length to 10 seconds
recordTimer = setTimeout(stopRecording, 10000);
} else
stopRecording();
};

Кнопка используется и для старта, и для окончания записи, и нажимая на неё мы меняем надпись с play на pause и наоборот. Когда мы вызываем метод record, объект Stream начинается запись и возврат объект StreamRecorder. С помощью таймера мы ограничиваем длину записи 10 секундами.

function stopRecording() {
clearTimeout(recordTimer);
var audioFile = recorder.stop();
useAudioFile(audioFile);

// reset to allow new recording session
recorder = null;
recordCtlBut.value = "Record";
}

Запись останавливается когда нажата кнопка «stop» или прошло 10 секунд. Записанные аудио-данные извлекаются из объекта StreamRecorder вызыванием метода «stop». Записанные аудио-данные представляются в виде File объекта (W3C File API). Теперь выбор за вами что делать с записанным клипом, возможно, вы опубликуете его на веб-сервере.

Как уже упоминалось выше, элементов device для аудио устройства эможет быть неограниченное количество. Аналогичным способом это может быть использовано для выбора других типов устройств, таких как веб-камера, в этом случае будет использоваться видео-элемент для отображения того, что она видит. Потом вы можете сделать онлайн-конференцию основанную на новых модных тегах.
В заключение, я хочу сказать, элемент device и связанные с ним API открыт для добавления новых устройств, доступ к которым будет возможен с использованием плагинов в браузере. Браузер становится мощной платформой, тем временем имея преимущество лучшей портативности приложения. С нетерпением ожидаем развития спецификации.