SKYnv Mar 16 2011 at 13:40

Первая реализация элементов device и orientation events

4 min

1.1K

Translation

На днях мы показали прототип opera mobile для системы andriod с поддержкой двух элементов html, device и orientation events предложеный W3C.

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

этот код отобразит следующее

Наша реализация.

В данный момент событие 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>

Этот код отобразит следующее

Планы

Мы еще в самом начале долгого пути, связанного с повсеместной поддержкой веб-стандартов для доступа из браузера к пользовательской камере и микрофону. В ближайшее время мы планируем продолжать разрабатывать и реализовывать обновления, связанные с данными технологиями.

Мы планируем:

Выпустить публичную Android сборку для разработчиков.
Добавить поддержку для других крупных мобильных и настольных систем.
Продолжать активно участвовать во всем, что связанно со стандартами, чтобы можно было обеспечить эту функциональность во всем Вебе и во всех браузерах.
Сделать поддержку микрофона и разрешить использовать звуковой поток в элементе audio.
Создать пользовательский интерфейс и для мобильных, и для настольных систем, который позволит опционально включать или выключать доступ к своей веб-камере веб-странице.
Экспериментировать с авторизованным доступом к пользовательской веб-камере путем открытых JavaScript API или в качестве элемента HTML device.
Активно участвовать в W3C RTC-Web Activity для предоставления потоковых данных веб-камеры и микрофона через веб.
Экспериментировать над открытием других видов доступа к локальным устройствам безопасным путем (например, монтирование файловой системы) для конечных пользователей.

Наш текущий прототип демонстрирует один прекрасный метод доступа к веб-камере, хотя конечно методы используемые для доступа к функциям устройства (по меньшей мере ориентационные события) еще будут меняться, прежде чем станут утвержденными веб-стандартами.

В ближайшее время должна выйти сборка.
Пожалуйста, не забывайте высказывать ваши мнения и оставлять комментарии!

Tags:

Hubs:

Opera