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

https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
  • Перевод
В последних спецификациях 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 открыт для добавления новых устройств, доступ к которым будет возможен с использованием плагинов в браузере. Браузер становится мощной платформой, тем временем имея преимущество лучшей портативности приложения. С нетерпением ожидаем развития спецификации.
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 17
    +1
    Да, хорошая функция. Хотят заменить много функций Flash обчным html по видимому, и правильно!
      0
      Прозреваю цифровые толпы.
        +1
        В спецификации от W3C его нет. Я сам давно искал хоть что-то об этом тэге, мало чего нашёл. Спасибо вам
        0
        Ох, подозреваю что это не только будущее разработки, а и огромной кучи уязвимостей…
          0
          Возможность, безусловно, интересная. Откроет новые горизонты и смогут развиваться новые приложения без костылей-плагинов. Жаль, что в реальной жизни это появится ой как не скоро.
            0
            > Записанные аудио-данные извлекаются из объекта StreamRecorder вызыванием метода «stop».
            > Записанные аудио-данные представляются в виде File объекта (W3C File API).

            Т.е. онлайн трансляцию сделать нельзя? Данные ведь будут доступны для манипуляций только после остановки записи?
              0
              File API фактически предоставляет поток. Так и тут фактически будет доступен поток с камеры.
                +1
                Эээм.
                «Потом вы можете сделать онлайн-конференцию основанную на новых модных тегах.»
                0
                Media capture на w3.org ещё в состоянии editor's draft:
                <input type="file" accept="image/*;capture=camera" id="capture"> 

                (Упоминание элемента <device> залинковано так же whatwg.org).
                  0
                  Все было бы хорошо но вот только поддерживается это только кастомной сборой веб кита.
                    0
                    То есть где-то уже есть? Дайте ссылку, пожалуйста, на сборку.
                    –2
                    Сайты будут подслушивать?
                      +1
                      имхо будет как и с геолокацией — вылезет окошко с вопросом: «можно ли вас послушать?»
                      0
                      Было бы интереснее подсматривать на порно-сайтах :)))
                        0
                        Когда ориентировочно ждать реализации в браузерах? Конец 2011? 2012? Когда?
                          0
                          Я точно не знаю. Вот кое-какая информация, достаточно свежая (2 фев 2011):
                          There's already people working on this in WebKit. I can't speak about Safari but we're actually discussing different approaches to its implementation. Please take a look at this thread and feel free to contribute: lists.webkit.org/pipermail/webkit-dev/2011-January/015822.html


                          То есть начали работать над ним в этом году. Если ещё нету, то в одной из ночных сборок будет возможность её использовать.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое