На днях мы показали прототип opera mobile для системы andriod с поддержкой двух элементов html, device и orientation events предложеный W3C.
В нашей первой внутренней сборке, веб-разработчики могли получить доступ к отображению и взаимодействию с пользовательской камерой используя родные средства html.
Элемент device
Разработчики могут запрашивать видео поток с пользовательской камеры в реальном времени. Как результат, это видеопоток может быть отображен на любой веб-странице при помощи атрибута data элемента device в элемент HTML video.
Приведенный ниже простой пример демонстрирует нашу реализацию элемента HTML device, который может использоваться для отображения видеопотока веб-камеры на веб-странице:
этот код отобразит следующее
![image](https://habrastorage.org/r/w1560/storage/habraeffect/c4/77/c4776c0c6e414605b112c4b30d21840c.png)
Наша реализация.
В данный момент событие change элемента срабатывает при загрузке страницы или когда динамичекский HTML элемент device создан в скрипте и используется на странице. В будущем мы хотим рассмотреть различные варианты взаимодействия с пользователь, необходимо это для того, чтобы пользователь в настройках мог разрешать или запрещать доступ к своей веб-камере веб-странице. Из-за отсутствия данной функциональной возможности мы решили отключить доступ к любым потокам пиксельных данных посредством элемента html canvas.
В дополнение к описанным выше ограничениям, следует отметить, что мы упростили предлагаемый Stream интерфейс тем, что не стали реализовывать все предлагаемые им методы и атрибуты. Делая это, мы еще были в состоянии обеспечить основные функциональные возможности элемента device без необходимости открытия URI. Как показано выше, объект Stream напрямую должен быть указан в атрибуте src элемента video. Когда атрибут src элемента video будет назначен, объект Stream и его атрибуты запросят резерв, несмотря на недоступность URI about:streamurl.
Пока мы экспериментировали с device мы выявили несколько проблем с использованием данного HTML элемента. Хотя в нашей первой реализации в данной сборке элемент device не имеет своего собственного интерфейса, конструкция элемента все же требует наличия компонентов пользовательского интерфейса, который будет вставляться в веб-страницу для того, чтобы пользователь мог разрешать или запрещать доступ к своим устройствам. Из опыта работы с элементами формы, нам известно что это будет не очень оптимальным вариантом для дизайнеров, так как они будут ограничены в оформлении элементов управления. Мы считаем, что наилучшим вариантом будет позволить самим пользователям создавать пользовательские интерфейсы и предоставлять необходимые API с аналогичной функциональностью. Поэтому мы приветствуем и будем продолжать экспериментировать с последними изменениями представленными в WHATWG's HTML проекте.
Orientation events
Это простой пример использования ориентационных событий для создания компаса.
Этот код отобразит следующее
![](http://habreffect.ru/files/d0e/da94e307e/coreconcerns-device2.png)
Планы
Мы еще в самом начале долгого пути, связанного с повсеместной поддержкой веб-стандартов для доступа из браузера к пользовательской камере и микрофону. В ближайшее время мы планируем продолжать разрабатывать и реализовывать обновления, связанные с данными технологиями.
Мы планируем:
Наш текущий прототип демонстрирует один прекрасный метод доступа к веб-камере, хотя конечно методы используемые для доступа к функциям устройства (по меньшей мере ориентационные события) еще будут меняться, прежде чем станут утвержденными веб-стандартами.
В ближайшее время должна выйти сборка.
Пожалуйста, не забывайте высказывать ваши мнения и оставлять комментарии!
В нашей первой внутренней сборке, веб-разработчики могли получить доступ к отображению и взаимодействию с пользовательской камерой используя родные средства html.
Элемент device
Разработчики могут запрашивать видео поток с пользовательской камеры в реальном времени. Как результат, это видеопоток может быть отображен на любой веб-странице при помощи атрибута data элемента device в элемент HTML video.
Приведенный ниже простой пример демонстрирует нашу реализацию элемента HTML device, который может использоваться для отображения видеопотока веб-камеры на веб-странице:
<!DOCTYPE html>
<h1>Simple web camera display demo</h1>
<device type="media"/>
<video autoplay></video>
<script type="text/javascript">
var device = document.getElementsByTagName('device')[0],
video = document.getElementsByTagName('video')[0];
device.addEventListener('change', function() {
video.src = device.data;
}, true);
</script>
этот код отобразит следующее
![image](https://habrastorage.org/storage/habraeffect/c4/77/c4776c0c6e414605b112c4b30d21840c.png)
Наша реализация.
В данный момент событие change элемента срабатывает при загрузке страницы или когда динамичекский HTML элемент device создан в скрипте и используется на странице. В будущем мы хотим рассмотреть различные варианты взаимодействия с пользователь, необходимо это для того, чтобы пользователь в настройках мог разрешать или запрещать доступ к своей веб-камере веб-странице. Из-за отсутствия данной функциональной возможности мы решили отключить доступ к любым потокам пиксельных данных посредством элемента html canvas.
В дополнение к описанным выше ограничениям, следует отметить, что мы упростили предлагаемый Stream интерфейс тем, что не стали реализовывать все предлагаемые им методы и атрибуты. Делая это, мы еще были в состоянии обеспечить основные функциональные возможности элемента device без необходимости открытия URI. Как показано выше, объект Stream напрямую должен быть указан в атрибуте src элемента video. Когда атрибут src элемента video будет назначен, объект Stream и его атрибуты запросят резерв, несмотря на недоступность URI about:streamurl.
Пока мы экспериментировали с device мы выявили несколько проблем с использованием данного HTML элемента. Хотя в нашей первой реализации в данной сборке элемент device не имеет своего собственного интерфейса, конструкция элемента все же требует наличия компонентов пользовательского интерфейса, который будет вставляться в веб-страницу для того, чтобы пользователь мог разрешать или запрещать доступ к своим устройствам. Из опыта работы с элементами формы, нам известно что это будет не очень оптимальным вариантом для дизайнеров, так как они будут ограничены в оформлении элементов управления. Мы считаем, что наилучшим вариантом будет позволить самим пользователям создавать пользовательские интерфейсы и предоставлять необходимые API с аналогичной функциональностью. Поэтому мы приветствуем и будем продолжать экспериментировать с последними изменениями представленными в WHATWG's HTML проекте.
Orientation events
Это простой пример использования ориентационных событий для создания компаса.
<!DOCTYPE html>
<h1>Simple compass demo</h1>
<canvas id="arrow" width="480" height="480"></canvas>
<p id='orient'></p>
<script type="text/javascript">
window.addEventListener('deviceorientation', function(evt) {
var arrow = document.getElementById('arrow');
var ctx = arrow.getContext('2d');
ctx.clearRect(0,0,480,480);
alpha = -Math.PI *(evt.alpha/180.0);
var x1 = 240 + Math.round(240.0 * Math.sin(alpha));
var y1 = 240 - Math.round(240.0 * Math.cos(alpha));
var x2 = 240 + Math.round(10.0 * Math.sin(alpha - Math.PI/2));
var y2 = 240 - Math.round(10.0 * Math.cos(alpha - Math.PI/2));
var x3 = 240 + Math.round(10.0 * Math.sin(alpha + Math.PI/2));
var y3 = 240 - Math.round(10.0 * Math.cos(alpha + Math.PI/2));
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.fill();
var orient = document.getElementById('orient');
orient.innerHTML = "(" + evt.alpha + ", " + evt.beta + ", " +
evt.gamma + ")";
}, true);
</script>
Этот код отобразит следующее
![](http://habreffect.ru/files/d0e/da94e307e/coreconcerns-device2.png)
Планы
Мы еще в самом начале долгого пути, связанного с повсеместной поддержкой веб-стандартов для доступа из браузера к пользовательской камере и микрофону. В ближайшее время мы планируем продолжать разрабатывать и реализовывать обновления, связанные с данными технологиями.
Мы планируем:
- Выпустить публичную Android сборку для разработчиков.
- Добавить поддержку для других крупных мобильных и настольных систем.
- Продолжать активно участвовать во всем, что связанно со стандартами, чтобы можно было обеспечить эту функциональность во всем Вебе и во всех браузерах.
- Сделать поддержку микрофона и разрешить использовать звуковой поток в элементе audio.
- Создать пользовательский интерфейс и для мобильных, и для настольных систем, который позволит опционально включать или выключать доступ к своей веб-камере веб-странице.
- Экспериментировать с авторизованным доступом к пользовательской веб-камере путем открытых JavaScript API или в качестве элемента HTML device.
- Активно участвовать в W3C RTC-Web Activity для предоставления потоковых данных веб-камеры и микрофона через веб.
- Экспериментировать над открытием других видов доступа к локальным устройствам безопасным путем (например, монтирование файловой системы) для конечных пользователей.
Наш текущий прототип демонстрирует один прекрасный метод доступа к веб-камере, хотя конечно методы используемые для доступа к функциям устройства (по меньшей мере ориентационные события) еще будут меняться, прежде чем станут утвержденными веб-стандартами.
В ближайшее время должна выйти сборка.
Пожалуйста, не забывайте высказывать ваши мнения и оставлять комментарии!