В последних спецификациях 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 пока не доступны ни в одном браузере и они могут поменятся до появления браузера. В любом случае, пока код выглядит так:

<p>Select device: <device type="audio_capture" id="media_device"></p>
<input type="button" id="record_ctl_but" value="Record" disabled></input>

В разметке страницы содержится ссылка на устройство, указанная при помощи тега 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 открыт для добавления новых устройств, доступ к которым будет возможен с использованием плагинов в браузере. Браузер становится мощной платформой, тем временем имея преимущество лучшей портативности приложения. С нетерпением ожидаем развития спецификации.