Отправляет email-рассылки с помощью сервиса Sendsay

Хakep_daily

  Все выпуски  

Microsoft предлагает анлим на облачный хостинг OneDrive *


PDA   подписка    wiki   bugtrack   статьи    видео   блог   форум   поиск    друзья   






Знакомимся с особенностями разработки под Smart TV и учимся делать приложение для телевизора
2014-10-26 19:14 Джон Сноу

Разговоры про Smart TV в последнее время участились, продаются умные телевизоры чаще, чем обычные, их аудитория постоянно растет, но вот магазины приложений пустуют. Почему так? Ведь, казалось бы, разработка под Smart TV не отличается от front-end’а: привычные JavaScript, HTML, CSS и браузер. Все дело в том, что кодинг под Smart TV имеет свои специфические особенности, о которых лучше знать еще при проектировании приложения.

Что такое Smart TV и зачем нужны приложения в телевизорах?

Представь, что ты заходишь на кухню. Холодильник сообщает, что можно приготовить из имеющихся продуктов, а затем перекидывает выбранный рецепт на мультиварку. Безумие? Таким же безумием казались приложения в телевизорах еще лет двадцать назад.

Что же такое Smart TV? Это интернет и интерактивные сервисы в телевизоре или телевизионном ресивере, или, вкратце, компьютер в форм-факторе «зомбоящика». Первую попытку реализовать подобие Smart TV предприняла компания Microsoft в далеком 1997 году, но идея провалилась из-за dial-up-соединения и CRT-телевизоров. Позднее возник другой способ сделать телевизор «умным»: в 2000 году стали появляться устройства Set Top Box (STB) различных производителей, расширяющие функционал стандартного (кабельного, спутникового) ТВ. STB — это обычная телевизионная приставка, принимающая сигнал цифрового телевидения, декодирующая и преобразующая его в аналоговый сигнал для вывода через разъемы RCA или SCART либо выводящая сигнал через разъем HDMI на телевизор. Но с ростом скорости соединения и новыми технологиями экранов стали появляться телевизоры со встроенным функционалом Smart TV, и с 2009 года началась сертификация таких устройств. В настоящий момент технология Smart TV внедряется в различные устройства: телевизоры, ресиверы цифрового телевидения, Blu-ray-проигрыватели, игровые консоли и аналогичные им девайсы.

Приложения умного ТВ позволяют просматривать различный видеоконтент: фильмы, сериалы, записи и трансляции передач и спортивных событий, музыкальные клипы, видеоролики; дают возможность читать новости, просматривать социальные сети и общаться по Skype или другому VoIP. Существуют развивающие приложения для детей и игры.

AuraInt 3

Если ты знаком с front-end-разработкой, то уже можешь приступать к созданию приложения, ничего нового учить не придется. Правда, необходимо учитывать особенности телевизоров:

  • Если планируешь разработку для моделей 2011 года и старше, то не рассчитывай на помощь CSS3. Вспоминай, как делать спрайты, и приготовься к интересным особенностям CSS, которые не встречаются в браузерах на компьютере и редко поддаются логичному объяснению.
  • Мощность вычислительного модуля телевизора в разы слабее компьютера, не удивляйся, что анимации в старых моделях будут отнюдь не плавными, а при измерении скорости исполнения кода окажется, что он в десятки и сотни раз медленнее, чем в браузере.
  • Слабая документация у некоторых производителей, а иногда и полное ее отсутствие могут привести тебя в отчаяние и заставят проводить часы на форумах разработчиков.
  • Для тестирования придется использовать реальные телевизоры. Эмуляторы не повторяют полного функционала устройств и часто содержат свои собственные, не возникающие на реальных устройствах баги.
  • В телевизорах полностью отсутствуют средства отладки, придется использовать свои «велосипеды» при разработке.
  • Непривычное взаимодействие пользователя с приложением. Учитывай, что, скорее всего, передвигаться по приложению тебе придется с помощью одного пальца руки, нажимая на кнопки пульта управления (правда, можно еще управлять голосом, жестами и гироскопическим пультом, как, например, у LG, но такое встречается далеко не во всех моделях и не у каждого производителя). На этапе проектирования приложения необходимо учитывать не только навигацию внутри приложения, но и ввод данных в инпуты.
  • Необходимо прорабатывать ситуацию потери соединения. Небольшая подсказка: тестировщики Samsung в процессе премодерации для своего магазина любят при проигрывании видео отключить сетевой кабель из разъема и смотреть, как эта ситуация отрабатывается в приложении :).
  • Разнообразие JavaScript API платформ усложнит кросс-платформенную разработку в разы, каждый производитель предоставляет свой API для взаимодействия с внутренним функционалом (проигрывание видео, отображение клавиатуры и прочее).

Ниже краткое описание популярных платформ, чтобы ты знал, с чем придется работать.

Samsung

Сайт для разработчиков

Samsung сейчас занимает наибольшую долю среди всех телевизоров с поддержкой технологии Smart TV. В моделях 2010 и 2011 года в качестве движка браузера используется MAPLE — сильно измененная версия Gecko, который был в Firefox 3.0. К счастью разработчиков, компания отказалась продолжать изобретать свой велосипед и с 2012 года в телевизорах Samsung Smart TV используется WebKit.

Помимо управления с пульта ДУ, в этой платформе можно использовать управление голосом и жестами (начиная с моделей 2012 года), а также подключать привычную мышь и клавиатуру.

Для разработчиков Samsung предоставляет SDK с эмуляторами и своей средой разработки на базе Eclipse. На сайте есть документация с множеством примеров и возможность удаленного тестирования на реальных устройствах модельного ряда 2013-го и выпущенных позднее (очень полезная для тестирования возможность). Есть недокументированный функционал, поэтому ответ порой придется искать на форуме, к счастью русскоязычном.

Ключевые возможности API: управление звуком из приложения, получение данных сети и модели, широкие возможности управления плеером.

samsung 

LG

Сайт для разработчиков

Отличительная черта этой платформы — возможность использовать Magic Remote, гироскопический анатомический пульт управления. Движение пульта в пространстве сопровождается движением курсора на экране, что очень сильно упрощает навигацию внутри приложений.

Из других способов управления — многокнопочный пульт и распознавание голоса. Во всех моделях LG Smart TV используется WebKit, что значительно сокращает количество «специфичных» багов.

LG предоставляет для разработчиков подробную документацию и SDK с эмуляторами и средой разработки, построенной на основе Eclipse. У платформы LG есть еще одна особенность — приложение необходимо зашифровать на сайте перед выгрузкой на устройство.

Компания LG является учредителем Smart TV Alliance — это проект, созданный в 2012 году совместными усилиями с TP Vision (компанией, производящей телевизоры под брендом Philips) в целях создания унифицированной платформы приложений для умных телевизоров.

untitled 

Philips

Сайт для разработчика

Достаточно своеобразная платформа. Вторая по объемам продаж в России, но, несмотря на это, разработка для Philips конкретно прокачивает навыки логического мышления, так как документация невероятно скудная :).

Вот что известно про эту платформу:

  • До моделей 2012 года вместо HTML необходимо было использовать CE-HTML (специально разработанный стандарт для телевизоров и мобильных устройств на основе XHTML).
  • Нет структурированной документации, зато есть примеры и немного статей, из которых можно крупицами собирать информацию.
  • Очень плохой эмулятор и отсутствие возможности запустить приложение полноценно в телевизоре. Для тестирования приходится открывать приложение во встроенном в устройство браузере.

40PFL8007T_12_smarty+ 

Разработка кросс-платформенного приложения при помощи Smartbox

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

  • возможность написать абстрактный код, основываясь на API библиотеки, а не каждого TV или приставки;
  • добавление новой поддерживаемой платформы без изменения кода самого приложения;
  • плагин навигации, позволяющий переключать фокус внутри приложения без лишних проблем;
  • инпуты и виртуальная мультиязычная клавиатура;
  • плагин для использования возможности управления голосом;
  • плагин легенды (подсказки по клавишам внизу экрана);
  • абстракция LocalStorage — хранение данных на конечных устройствах;
  • абстракция над функциями плеера;
  • удобная замена console.log в телевизоре.

На данный момент библиотека позволяет запускать приложение на трех мажорных платформах:

  • Samsung;
  • LG;
  • Philips.

Кроме того, Smartbox без проблем запускается и на приставке STB Mag 200/250.

INFO

Добавить новую платформу в Smartbox не составит труда, в репозитории ты сможешь найти документацию, как это сделать. Код библиотеки мы выложили на GitHub.

LET’S GO!

Но довольно теории, давай попробуем написать кросс-платформенное приложение для ТВ, используя Smartbox. Наше приложение будет иметь меню, список видео из внешнего файла, демонстрацию навигации и примеры полей ввода с виртуальной клавиатурой. Приложение будет в трендовом Flat-дизайне.

demo

Накидаем HTML для меню:

<div class="menu">
  <div class="logo"></div>
  <ul class="menu-items" data-nav_type="vbox" data-nav_loop="true">
    <li data-content='video' class="menu-item menu-item_green nav-item">Videos</li>
    <li data-content='input' class="menu-item menu-item_blue nav-item">Inputs</li>
    <li data-content='navigation' class="menu-item menu-item_red nav-item">Navigation</li>
  </ul>
</div>

Самое важное, что стоит тут отметить, — атрибуты data-* и класс nav-item. Атрибут data-nav_type="vbox" служит для оптимизации навигации, при его использовании фокус начинает перемещаться от одного sibling-элемента к другому. Атрибут data-nav_loop="true"позволяет зацикливать навигацию в рамках своего элемента. Все видимые элементы с классом nav-item могут получить на себя фокус и позже инициировать события (focus, click, etc). Атрибут data-content будем использовать для отображения сцен приложения.

Добавим HTML для сцен.

<div class="scenes-wrapper">
  <!—- Список видео будем генерировать из внешнего файла -->
  <div class="scene scene_video js-scene-video" data-nav_type="vbox" data-nav_loop="true"></div>

  <!—- Сцена для демонстрации инпутов -->
  <div class="scene scene_input js-scene-input">
    <div class="input-example">
      <h2>Standart input</h2>
      <input class="input-item js-input-1 nav-item"/>

      <div class="input-val">
        Input value: <span class="js-input-1-val"></span>
      </div>
    </div>
    <div class="input-example">
        <h2>Input with email keyboard</h2>
        <input class="input-item js-input-2 nav-item"/>
    </div>
    <div class="input-example">
        <h2>Input with num keyboard and maximum 4 signs</h2>
        <input class="input-item js-input-3 nav-item"/>
    </div>
  </div>

  <!—- Сцена для демонстрации навигации -->
  <div class="scene js-scene-navigation">
    <ul class="navigation-items">
      <li class="navigation-item nav-item">1</li>
      //...
      <li class="navigation-item nav-item">8</li>
    </ul>
    <p class="navigation-info"></p>
  </div>
</div>

Теперь HTML нашего приложения готов, приступим к написанию главного JS-файла приложения app.js. После инициализации самого Smartbox происходит старт приложения.

  //     SB() — главная функция Smartbox, вызывается после инициализации всех плагинов и запуска платформы
  SB(function(){
        App.initialize();
    });

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

App.initialize = function () {
  this.$wrap = $('.wrap');

  // Показываем легенду
  $$legend.show();

  this.setEvents();

  // Запускаем навигацию (в фокусе будет первый видимый элемент с классом nav-item)
  $$nav.on();
};

App.setEvents = function () {
  var self = this;

  // Отображаем сцену при клике на элементе меню
  $('.menu').on('click', '.menu-item', function ( e ) {

    // Именно здесь и нужен атрибут data-content
    var scene = e.currentTarget.getAttribute('data-content');
    self.showContent(scene);
  });

  $(document.body).on({
    // Скрываем/отображаем интерфейс при клике по синей кнопке пульта или клавише D на клавиатуре
    'nav_key:blue': function() {
      self.toggleView();
        },
    // remote events
    'nav_key:stop': function () {
      Player.stop();
    },
    'nav_key:pause': function () {
      Player.togglePause();
    },
    'nav_key:exit': function(){
      SB.exit();
    }
  });
};

Метод showContent будет скрывать текущую сцену и отображать новую. Каждая сцена будет иметь три метода — init для разовой инициализации и show/hide для управления отображением. Реализация методов отображения будет одинаковой во всех сценах:

show: function () {
  if (!_inited) {
    // Отложенная инициализация сцены
    this.init();
    _inited = true;
  }
  this.$el.show();
},
hide: function () {
  this.$el.hide();
}

Ну а теперь приступаем к реализации сцен, я буду приводить код без методов show/hide. Но для начала вынесем список видео в отдельный файл:

window.App.videos = [
  {
      title: 'Elephants Dream',
      url: 'https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4',
      type: 'vod'
  },
  {
      title: 'Redbull',
      url: 'http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8',
      type: 'hls'
  },
  //...
];

Можно приступать к реализации сцены со списком видео.

Сцена со списком видео

Сцена со списком видео

init: function () {
  // В this.$el сохраняем элемент сцены 
  this.$el = $('.js-scene-video');

  // Устанавливаем обработчик для клика по элементу списка
  this.$el.on('click', '.video-item', this.onItemClick);


  this.renderItems(App.videos);
},

// Генерация списка видео
renderItems: function (items) {
  var html = '',
      itemHtml = _.template('<div class="video-item nav-item">{{title}}</div>');

   // console.log(items, itemHtml.toString())
  for ( var i = 0, len = items.length; i < len; i++ ) {
    html += itemHtml(items[i]);
  }

  this.$el
    .empty()
    .html(html);
},

// Обработчик клика по элементу
onItemClick: function (e) {
  var index=$(e.currentTarget).index();

  // window.Player — плагин Smartbox. Видео запускается передачей объекта c URL и type в метод play
  Player.play(App.videos[index]);
},

Сцена со списком готова, можно запускать видео и добавлять новые элементы. Создадим возможность использовать инпуты в Smart TV, в методе init сцены с полями ввода впишем код:

init: function () {
  this.$el = $('.js-scene-input');

  var $valueText = this.$el.find('.js-input-1-val');

  this.$el.find('.js-input-1')
    // text_change — событие плагина SBInput, вызывается при изменении текста инпута
    .on('text_change',function () {
      $valueText.html(this.value);
    })
    // Плагин SBInput — обычный плагин jQuery
    .SBInput({
      keyboard: {
        // Для первого инпута клавиатура будет русская с возможностью отображения цифр
        type: 'fulltext_ru_nums'
      }
    });

  this.$el.find('.js-input-2').SBInput({
    keyboard: {
      // Специальный layout клавиатуры для ввода электронной почты
      type: 'email'
    }
  });

  this.$el.find('.js-input-3').SBInput({
    keyboard: {
      // layout только с девятью цифрами
      type: 'num'
    },
    // Максимальное количество символов в инпуте
    max: 4
  });
}
input

Сцена с инпутами и виртуальной клавиатурой

Теперь можно вводить данные в поля ввода, отображать и скрывать клавиатуру. Остается добавить код для сцены с примером навигации. На элементе с классом nav-item вызывается событие nav_focus при попадании фокуса на него и nav_blur при потере фокуса. Добавим обработчики для этих событий в сцене.

init: function () {
  var $info;

  this.$el = $('.js-scene-navigation');

  $info = this.$el.find('.navigation-info');

  this.$el
    .find('.navigation-item')
      .on(
      {
        // Отображаем информацию при попадании фокуса на элемент
        'nav_focus': function () {
          $info.html('Item with text "' + this.innerHTML + '" focused');
        },
        // Чистим строку информации при потере фокуса
        'nav_blur': function () {
          $info.html('');
        }
      });
}
Сцена с примером навигации

Сцена с примером навигации

Основной код для сцен готов, приложение функционирует, остается только добавить подсказки для клавиш в плагине легенды. Все возможные кнопки в легенде представлены на рис. 1, а пользоваться клавишами несложно:

$('.menu-item').on({
  'nav_focus': function () {
    // Отображаем в легенде Enter 
    $$legend.keys.enter('Show content')
  },
  'nav_blur': function () {
    // Скрываем Enter из легенды
    $$legend.keys.enter('')
  }
});
Рис. 1. Возможные подсказки плагина легенды

Рис. 1. Возможные подсказки плагина легенды

Готовый код приложения ты можешь найти тут. Также можешь посмотреть на приложение в действии. В браузере навигация осуществляется с помощью мыши или стрелок клавиатуры, а кнопки пульта RED, YELLOW, GREEN, BLUE заменяются на клавиши A, B, C, D.

Заключение

Теперь ты подготовлен к встрече со Smart TV в боевых условиях разработки. Надеюсь, наша библиотека поможет избежать хождения по граблям и ты сможешь быстро разработать и выложить свое творение в магазин приложений на телевизорах.

Если хочешь поучаствовать в разработке Smartbox — мы всегда рады pull request’ам на GitHub. А если возникли вопросы по разработке под Smart TV — пиши мне.

Хороших идей и отличных приложений!

 



Комфортный шелл — это как?
2014-10-27 10:00 Степа Ильин

В последнее время мне довольно много приходится работать в консоли с удаленными серверами. Поймал себя на мысли, что, несмотря на 2014 год, ощущения от работы по SSH напоминают времена, когда был только Telnet. Но после некоторых экспериментов жизнь стала заметно лучше.

Требования

Что меня раздражает больше всего, так это что после любого обрыва соединения или выключения (фактически засыпания) ноутбука нужно заново подключаться (хорошо, если с той стороны есть screen). Поэтому первое требование простое — нужно, чтобы шелл работал без потери контекста после перезагрузки или восстановления из сна, при изменении маршрутизации (например, переключение между Wi-Fi-сетями или после подключения к VPN) или в случае каких-то временных проблем с сетью. Дальше требования попроще: сохранение цветов, нормальная работа copy-paste, поддержка цветовых схем, беспроблемная работа скроллинга. Мне кажется, не так много я и хочу.

Конфигурация

90% времени я работаю под OS X, поэтому буду рассказывать о своем конфиге. В принципе, от системы к системе ничего не меняется, кроме непосредственно терминала. На серверах в основном у меня Debian и Ubuntu, но это вообще не имеет значения. Итак, конфиг, с которым в последнее время я живу, — iTerm2 + mosh + tmux.

iTerm2

Собственно, iTerm — это один из самых известных терминалов под OS X. Он уже из коробки неплохо приготовлен, но единственное — нужно не забыть включить цветовые схемы и поддержку скроллинга. Для этого в настройках надо выставить Terminal Type в xterm-256color и убедиться, что опция Enable xterm mouse reporting активирована. Вообще, рекомендую познакомиться со всеми фишками программы (разделение на панели, autocomplete, поддержка Growl и прочее) — я открыл для себя много полезного.

tmux

Менеджер сессий, без него никак. Если ты когда-то работал со screen, то tmux — это тот же screen, но на стероидах. Правда, из всех его функций я использую только возможность сохранить мою сессию на удаленном сервере. Идея простая: когда я подключаюсь, я всегда начинаю с того места, где закончил, — например, работе над каким-нибудь скриптом в Vim’е. Состояние сохраняется. Да, screen делает то же самое, но давно не развивается — поэтому tmux выигрывает во множестве мелочей.

Tmux без проблем устанавливается на удаленном сервере, в конфиг стоит добавить что-то вроде:

  new-session
  set-window-option -g mode-mouse on
  set -g history-limit 25000

Объясняю, в чем смысл. Если активной сессии нет и при этом выполняется попытка подключения (attack), то tmux создаст новую сессию — это делает первая строчка конфига. Вторая включает поддержку мыши. Третья определяет размер истории.

Шпаргалка по tmux

Шпаргалка по tmux

mosh

Мы уже как-то писали про mosh. Это очень полезная утилита, которая выступает чем-то вроде коннектора между сервером и клиентом. Даже если соединение обрывается (а обрывается оно постоянно банально из-за перемещения из дома на работу, я работаю на ноуте), она терпеливо подождет, пока все станет ОК, и без всяких проблем позволит вернуться к работе. «Ни единого обрыва», как в случае с SSH :).

Нужную версию лучше взять из Git’а, тогда она стопроцентно будет поддерживать мышь и скроллинг:

  git clone https://github.com/keithw/mosh.git
  cd mosh/
  sudo apt-get build-dep mosh
  ./autogen.sh && ./configure && make
  sudo make install

Соответственно, клиентская часть в OS X устанавливается через HomeBrew:

brew install --HEAD mobile-shell

Mosh — SSH без обрывов

Mosh — SSH без обрывов

Как этим пользоваться

На выходе все очень просто. Мне достаточно набрать команду

mosh HOST -- tmux a

и я всегда получаю доступ к шеллу в том месте, где я закончил. Tmux сохраняет сессию на удаленном хосте, mesh позволяет не переподключаться сто раз на дню, а iTerm — комфортно работать с шеллом. Можно, конечно прокачивать систему еще дальше и, к примеру, установить на удаленном хосте zsh, но это уже детали.

 



Юзаем WebRTC + сокеты для звонков из чистого браузера
2014-10-27 12:00 Mihoel Pikovsky

Технологиям для звонков из браузера уже много лет: Java, ActiveX, Adobe Flash… В последние несколько лет стало ясно, что плагины и левые виртуальные машины не блещут удобством (зачем мне вообще что-то устанавливать?) и, самое главное, безопасностью. Что же делать? Выход есть!

До последнего времени в IP-сетях использовалось несколько протоколов для IP-телефонии или видео: SIP, наиболее распространенный протокол, сходящие со сцены H.323 и MGCP, Jabber/Jingle (используемый в Gtalk), полуоткрытые Adobe RTMP* и, конечно, закрытый Skype. Проект WebRTC, инициированный Google, пытается перевернуть положение дел в мире IP- и веб-телефонии, сделав ненужными все программные телефоны, включая Skype. WebRTC не просто реализует все коммуникационные возможности непосредственно внутри браузера, установленного сейчас практически на каждом устройстве, но пытается одновременно решить более общую задачу коммуникаций между пользователями браузеров (обмен различными данными, трансляция экранов, совместная работа с документами и многое другое).

WebRTC со стороны веб-разработчика

С точки зрения веб-разработчика WebRTC состоит из двух основных частей:

  • управление медиапотоками от локальных ресурсов (камеры, микрофона или экрана локального компьютера) реализуется методом navigator.getUserMedia, возвращающим объект MediaStream;
  • peer-to-peer коммуникации между устройствами, генерирующими медиапотоки, включая определение способов связи и непосредственно их передачу — объекты RTCPeerConnection (для отправки и получения аудио- и видеопотоков) и RTCDataChannel (для отправки и получения данных из браузера).

Что будем делать?

Мы разберемся, как организовать простейший многопользовательский видеочат между браузерами на основе WebRTC с использованием веб-сокетов. Экспериментировать начнем в Chrome/Chromium, как наиболее продвинутых в плане WebRTC браузерах, хотя вышедший 24 июня Firefox 22 почти их догнал. Нужно сказать, что стандарт еще не принят, и от версии к версии API может меняться. Все примеры проверялись в Chromium 28. Для простоты не будем следить за чистотой кода и кросс-браузерностью.

MediaStream

Первый и самый простой компонент WebRTC — MediaStream. Он предоставляет браузеру доступ к медиапотокам с камеры и микрофона локального компьютера. В Chrome для этого необходимо вызвать функцию navigator.webkitGetUserMedia() (так как стандарт еще не завершен, все функции идут с префиксом, и в Firefox эта же функция называется navigator.mozGetUserMedia()). При ее вызове пользователю будет выведен запрос о разрешении доступа к камере и микрофону. Продолжить звонок можно будет только после того, как пользователь даст свое согласие. В качестве параметров этой функции передаются параметры требуемого медиапотока и две callback-функции: первая будет вызвана в случае успешного получения доступа к камере/микрофону, вторая — в случае ошибки. Для начала создадим HTML-файл rtctest1.html с кнопкой и элементом <video> :

<!DOCTYPE html>
<html>
<head><title>WebRTC - первое знакомство</title>
  <style>
    video { height: 240px; width: 320px; border: 1px solid grey; }
  </style>
</head>
<body>
  <button id="btn_getUserMedia" onclick="getUserMedia_click()">getUserMedia</button>
  <br>
  <video id="localVideo1" autoplay="true"></video>
  <script>

  </script>
</body>
</html>

Microsoft CU-RTC-Web

Microsoft не была бы Microsoft, если бы в ответ на инициативу Google не выпустила немедленно свой собственный несовместимый нестандартный вариант под названием CU-RTC-Web (html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htm). Хотя доля IE, и так небольшая, продолжает сокращаться, количество пользователей Skype дает Microsoft надежду потеснить Google, и можно предположить, что именно этот стандарт будет использоваться в браузерной версии Skype. Стандарт Google ориентирован в первую очередь на коммуникации между браузерами; в то же время основная часть голосового трафика по-прежнему остается в обычной телефонной сети, и шлюзы между ней и IP-сетями необходимы не только для удобства использования или более быстрого распространения, но и в качестве средства монетизации, которое позволит большему числу игроков их развивать. Появление еще одного стандарта может не только привести к неприятной необходимости разработчикам поддерживать сразу две несовместимых технологии, но и в перспективе дать пользователю более широкий выбор возможного функционала и доступных технических решений. Поживем — увидим.

Включение локального потока

Внутри тегов <script> </script> нашего HTML-файла объявим глобальную переменную для медиапотока:

var localStream = null;

Первым параметром методу getUserMedia необходимо указать параметры запрашиваемого медиапотока — например просто включить аудио или видео:

var streamConstraints = { "audio": true, "video": true }; // Запрашиваем доступ и к аудио, и к видео

Либо указать дополнительные параметры:

var streamConstraints = {
    "audio": true,
    "video": {
      "mandatory": { "maxWidth": "320", "maxHeight": "240", "maxFrameRate": "5" },
      "optional": []
  }
};

Вторым параметром методу getUserMedia необходимо передать callback-функцию, которая будет вызвана в случае его успешного выполнения:

function getUserMedia_success(stream) {
  console.log("getUserMedia_success():", stream);
  localVideo1.src = URL.createObjectURL(stream); // Подключаем медиапоток к HTML-элементу <video>
  localStream = stream; // и сохраняем в глобальной переменной для дальнейшего использования
}

Третий параметр — callback-функция обработчик ошибки, который будет вызван в случае ошибки

function getUserMedia_error(error) {
  console.log("getUserMedia_error():", error);
}

Собственно вызов метода getUserMedia — запрос доступа к микрофону и камере при нажатии на первую кнопку

function getUserMedia_click() {
  console.log("getUserMedia_click()");
  navigator.webkitGetUserMedia(
    streamConstraints,
    getUserMedia_success,
    getUserMedia_error
  );
}

Получить доступ к медиапотоку из файла, открытого локально, невозможно. Если попытаться так сделать, получим ошибку:

NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}"

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

Запрос на доступ к камере и микрофону

Запрос на доступ к камере и микрофону

Выбрать устройства, к которым получит доступ Chrome, можно в Settings («Настройки»), линк Show advanced settings («Показать дополнительные настройки»), раздел Privacy («Личные данные»), кнопка Content («Настройки контента»). В браузерах Firefox и Opera выбор устройств осуществляется из выпадающего списка непосредственно при разрешении доступа.

При использовании протокола HTTP разрешение будет запрашиваться каждый раз при получении доступа к медиапотоку после загрузки страницы. Переход на HTTPS позволит выводить запрос однократно, только при самом первом доступе к медиапотоку.

Обрати внимание на пульсирующий кружок в иконке на закладке и значок камеры в правой части адресной строки:

RTCMediaConnection

RTCMediaConnection — объект, предназначенный для установления и передачи медиапотоков по сети между участниками. Кроме того, этот объект отвечает за формирование описания медиасессии (SDP), получение информации об ICE-кандидатах для прохождения через NAT или сетевые экраны (локальные и с помощью STUN) и взаимодействие с TURN-сервером. У каждого участника должно быть по одному RTCMediaConnection на каждое соединение. Медиапотоки передаются по шифрованному протоколу SRTP.

TURN-серверы

ICE-кандидаты бывают трех типов: host, srflx и relay. Host содержат информацию, полученную локально, srflx — то, как узел выглядит для внешнего сервера (STUN), и relay — информация для проксирования трафика через TURN-сервер. Если наш узел находится за NAT’ом, то host-кандидаты будут содержать локальные адреса и будут бесполезны, кандидаты srflx помогут только при определенных видах NAT и relay будут последней надеждой пропустить трафик через промежуточный сервер.

Пример ICE-кандидата типа host, с адресом 192.168.1.37 и портом udp/34022:

a=candidate:337499441 2 udp 2113937151 192.168.1.37 34022 typ host generation 0

Общий формат для задания STUN/TURN-серверов:

var servers = { "iceServers": [
  { "url": "stun:stun.stunprotocol.org:3478" },
  { "url": "turn:user@host:port", "credential": "password" }
]};

Публичных STUN-серверов в интернете много. Большой список, например, есть здесь. К сожалению, решают они слишком малую часть проблем. Публичных же TURN-серверов, в отличие от STUN, практически нет. Связано это с тем, что TURN-сервер пропускает через себя медиапотоки, которые могут значительно загружать и сетевой канал, и сам сервер. Поэтому самый простой способ подключиться к TURN-серверам — установить его самому (понятно, что потребуется публичный IP). Из всех серверов, на мой взгляд, наилучший rfc5766-turn-server. Под него есть даже готовый образ для Amazon EC2.

С TURN пока не все так хорошо, как хотелось бы, но идет активная разработка, и хочется надеяться, через какое-то время WebRTC если не сравняется со Skype по качеству прохождения через трансляцию адресов (NAT) и сетевые экраны, то по крайней мере заметно приблизится.

Для RTCMediaConnection необходим дополнительный механизм обмена управляющей информацией для установления соединения — хотя он и формирует эти данные, но не передает их, и передачу другим участниками необходимо реализовывать отдельно.

Взаимодействие RTCPeerConnection

Взаимодействие RTCPeerConnection

Выбор способа передачи возлагается на разработчика — хоть вручную. Как только обмен необходимыми данными пройдет, RTCMediaConnection установит медиапотоки автоматически (если получится, конечно).

Модель offer-answer

Для установления и изменения медиапотоков используется модель offer/answer (предложение/ответ; описана в RFC3264) и протокол SDP (Session Description Protocol). Они же используются и протоколом SIP. В этой модели выделяется два агента: Offerer — тот, кто генерирует SDP-описание сессии для создания новой или модификации существующей (Offer SDP), и Answerer — тот, кто получает SDP-описание сессии от другого агента и отвечает ему собственным описанием сессии (Answer SDP). При этом в спецификации требуется наличие протокола более высокого уровня (например, SIP или собственного поверх веб-сокетов, как в нашем случае), отвечающего за передачу SDP между агентами.

Какие данные необходимо передать между двумя RTCMediaConnection, чтобы они смогли успешно установить медиапотоки:

  • Первый участник, инициирующий соединение, формирует Offer, в котором передает структуру данных SDP (этот же протокол для той же цели используется в SIP), описывающую возможные характеристики медиапотока, который он собирается начать передавать. Этот блок данных необходимо передать второму участнику. Второй участник формирует Answer, со своим SDP и пересылает его первому.
  • И первый и второй участники выполняют процедуру определения возможных ICE-кандидатов, с помощью которых к ним сможет передать медиапоток второй участник. По мере определения кандидатов информация о них должна передаваться другому участнику.
Последовательность обмена RTCPeerConnection

Последовательность обмена RTCPeerConnection

Формирование Offer

Для формирования Offer нам понадобятся две функции. Первая будет вызываться в случае его успешного формирования. Второй параметр метода createOffer() — callback-функция, вызываемая в случае ошибки при его выполнении (при условии, что локальный поток уже доступен).

Дополнительно понадобятся два обработчика событий: onicecandidate при определении нового ICE-кандидата и onaddstream при подключении медиапотока от дальней стороны. Вернемся к нашему файлу. Добавим в HTML после строк с элементами <button> еще одну:

<button id="btn_createOffer" onclick="createOffer_click()">createOffer</button>

И после строки с элементом <video>  (на будущее):

<br>
<video id="remoteVideo1" autoplay=true></video>

Также в начале JavaScript-кода объявим глобальную переменную для RTCPeerConnection:

var pc1;

При вызове конструктора RTCPeerConnection необходимо указать STUN/TURN-серверы. Подробнее о них см. врезку; пока все участники находятся в одной сети, они не требуются.

var servers = null;

Параметры для подготовки Offer SDP

var offerConstraints = {};

Первый параметр метода createOffer() — callback-функция, вызываемая при успешном формировании Offer

function pc1_createOffer_success(desc) {
  console.log("pc1_createOffer_success(): \ndesc.sdp:\n"+desc.sdp+"desc:", desc);
  pc1.setLocalDescription(desc);  // Зададим RTCPeerConnection, сформированный Offer SDP методом setLocalDescription. 
  // Когда дальняя сторона пришлет свой Answer SDP, его нужно будет задать методом setRemoteDescription 
  // Пока вторая сторона не реализована, ничего не делаем
  // pc2_receivedOffer(desc);
}

Второй параметр — callback-функция, которая будет вызвана в случае ошибки

function pc1_createOffer_error(error){
  console.log("pc1_createOffer_success_error(): error:", error);
}

И объявим callback-функцию, которой будут передаваться ICE-кандидаты по мере их определения:

function pc1_onicecandidate(event){
  if (event.candidate) {
    console.log("pc1_onicecandidate():\n"+ event.candidate.candidate.replace("\r\n", ""), event.candidate);
    // Пока вторая сторона не реализована, ничего не делаем
    // pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
  }
}

А также callback-функцию для добавления медиапотока от дальней стороны (на будущее, так как пока у нас только один RTCPeerConnection):

function pc1_onaddstream(event) {
    console.log("pc_onaddstream()");
    remoteVideo1.src = URL.createObjectURL(event.stream);
  }

При нажатии на кнопку «createOffer» создадим RTCPeerConnection, зададим методы onicecandidate и onaddstream и запросим формирование Offer SDP, вызвав метод createOffer():

function createOffer_click() {
  console.log("createOffer_click()");
  pc1 = new webkitRTCPeerConnection(servers); // Создаем RTCPeerConnection
  pc1.onicecandidate = pc1_onicecandidate;    // Callback-функция для обработки ICE-кандидатов
  pc1.onaddstream = pc1_onaddstream;          // Callback-функция, вызываемая при появлении медиапотока от дальней стороны. Пока что его нет
  pc1.addStream(localStream); // Передадим локальный медиапоток (предполагаем, что он уже получен)
  pc1.createOffer(            // И собственно запрашиваем формирование Offer
    pc1_createOffer_success,
    pc1_createOffer_error,
    offerConstraints
  );
}

Сохраним файл как rtctest2.html, выложим его на сервер, откроем в браузере и посмотрим в консоли, какие данные формируются во время его работы. Второе видео пока не появится, так как участник всего один. Напомним, SDP — описание параметров медиасессии, доступные кодеки, медиапотоки, а ICE-кандидаты — возможные варианты подключения к данному участнику.

Формирование Answer SDP и обмен ICE-кандидатами

И Offer SDP, и каждого из ICE-кандидатов необходимо передать другой стороне и там после их получения у RTCPeerConnection вызвать методы setRemoteDescription для Offer SDP и addIceCandidate для каждого ICE-кандидата, полученного от дальней стороны; аналогично в обратную сторону для Answer SDP и удаленных ICE-кандидатов. Сам Answer SDP формируется аналогично Offer; разница в том, что вызывается не метод createOffer, а метод createAnswer и перед этим RTCPeerConnection методом setRemoteDescription передается Offer SDP, полученный от вызывающей стороны.

Добавим еще один видеоэлемент в HTML:

<video id="remoteVideo2" autoplay=true></video>

И глобальную переменную для второго RTCPeerConnection под объявлением первой:

var pc2; 

Обработка Offer и Answer SDP

Формирование Answer SDP очень похоже на Offer. В callback-функции, вызываемой при успешном формировании Answer, аналогично Offer, отдадим локальное описание и передадим полученный Answer SDP первому участнику:

function pc2_createAnswer_success(desc) {  
  pc2.setLocalDescription(desc);
  console.log("pc2_createAnswer_success()", desc.sdp);
  pc1.setRemoteDescription(desc);
}

Callback-функция, вызываемая в случае ошибки при формировании Answer, полностью аналогична Offer:

function pc2_createAnswer_error(error) {
  console.log('pc2_createAnswer_error():', error);
}

Параметры для формирования Answer SDP:

var answerConstraints = { 
  'mandatory': { 'OfferToReceiveAudio':true, 'OfferToReceiveVideo':true } 
};

При получении Offer вторым участником создадим RTCPeerConnection и сформируем Answer аналогично Offer:

function pc2_receivedOffer(desc) {
  console.log("pc2_receiveOffer()", desc);
  // Создаем объект RTCPeerConnection для второго участника аналогично первому
  pc2 = new webkitRTCPeerConnection(servers);
  pc2.onicecandidate = pc2_onicecandidate; // Задаем обработчик события при появлении ICE-кандидата
  pc2.onaddstream = pc_onaddstream; // При появлении потока подключим его к HTML <video>
  pc2.addStream(localStream); // Передадим локальный медиапоток (в нашем примере у второго участника он тот же, что и у первого)
  // Теперь, когда второй RTCPeerConnection готов, передадим ему полученный Offer SDP (первому мы передавали локальный поток)
   pc2.setRemoteDescription( new RTCSessionDescription(desc) );
  // Запросим у второго соединения формирование данных для сообщения Answer
  pc2.createAnswer( 
    pc2_createAnswer_success,
    pc2_createAnswer_error,
    answerConstraints
  );
}

Для того чтобы в рамках нашего примера передать Offer SDP от первого участника ко второму, раскомментируем в функции pc1createOffersuccess() строку вызова:

pc2_receivedOffer(desc);

Чтобы реализовать обработку ICE-кандидатов, раскомментируем в обработчике события готовности ICE-кандидатов первого участника pc1_onicecandidate() его передачу второму:

pc2.addIceCandidate(new RTCIceCandidate(event.candidate));

Обработчик события готовности ICE-кандидатов второго участника зеркально подобен первому:

function pc2_onicecandidate(event) {
  if (event.candidate) {
    console.log("pc2_onicecandidate():", event.candidate.candidate);
    pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
  }
}

Сallback-функцию для добавления медиапотока от первого участника:

function pc2_onaddstream(event) {
  console.log("pc_onaddstream()");
  remoteVideo2.src = URL.createObjectURL(event.stream);
}

Завершение соединения

Добавим еще одну кнопку в HTML

<button id="btnHangup" onclick="btnHangupClick()">Hang Up</button>

И функцию для завершения соединения

function btnHangupClick() {
  // Отключаем локальное видео от HTML-элементов <video>, останавливаем локальный медиапоток, устанавливаем = null
  localVideo1.src = ""; localStream.stop(); localStream = null;
  // Для каждого из участников отключаем видео от HTML-элементов <video>, закрываем соединение, устанавливаем указатель = null
  remoteVideo1.src = ""; pc1.close(); pc1 = null;
  remoteVideo2.src = ""; pc2.close(); pc2 = null; 
}

Сохраним как rtctest3.html, выложим на сервер и откроем в браузере. В этом примере реализована двусторонняя передача медиапотоков между двумя RTCPeerConnection в рамках одной закладки браузера. Чтобы организовать через сеть обмен Offer и Answer SDP, ICE-кандидатами между участниками и другой информацией, потребуется вместо прямого вызова процедур реализовать обмен между участниками с помощью какого-либо транспорта, в нашем случае — веб-сокетов.

Трансляция экрана

Функцией getUserMedia можно также захватить экран и транслировать как MediaStream, указав следующие параметры:

var mediaStreamConstraints = {
    audio: false, 
    video: {
      mandatory: { chromeMediaSource: 'screen'  },
      optional: []
    }
};

Для успешного доступа к экрану должно выполняться несколько условий:

  • включить флаг снимка экрана в getUserMedia() в chrome://flags/,chrome://flags/;
  • исходный файл должен быть загружен по HTTPS (SSL origin);
  • аудиопоток не должен запрашиваться;
  • не должно выполняться несколько запросов в одной закладке браузера.

Библиотеки для WebRTC

Хотя WebRTC еще и не закончен, уже появилось несколько базирующихся на нем библиотек. JsSIP предназначена для создания браузерных софтфонов, работающих с SIP-коммутаторами, такими как Asterisk и Camalio. PeerJS упростит создание P2P-сетей для обмена данными, а Holla сократит объем разработки, необходимый для P2P-связи из браузеров.

Node.js и socket.io

Для того чтобы организовать обмен SDP и ICE-кандидатами между двумя RTCPeerConnection через сеть, используем Node.js с модулем socket.io.

Установка последней стабильной версии Node.js (для Debian/Ubuntu) описана здесь

$ sudo apt-get install python-software-properties python g++ make
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs

Установка под другие операционные системы описана здесь

Проверим:

$ echo "sys=require('util'); sys.puts('Test message');" > nodetest1.js $ nodejs nodetest1.js

С помощью npm (Node Package Manager) установим socket.io и дополнительный модуль express:

$ npm install socket.io express

Проверим, создав файл nodetest2.js для серверной части:

$ nano nodetest2.js 
var app = require('express')()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);
server.listen(80); // Если порт 80 свободен
app.get('/', function (req, res) { // При обращении к корневой странице
  res.sendfile(__dirname + '/nodetest2.html'); // отдадим HTML-файл
});
io.sockets.on('connection', function (socket) {    // При подключении
  socket.emit('server event', { hello: 'world' }); // отправим сообщение
  socket.on('client event', function (data) {      // и объявим обработчик события при поступлении сообщения от клиента
    console.log(data);
  });
});

И nodetest2.html для клиентской части:

$ nano nodetest2.html 
<script src="/socket.io/socket.io.js?2bdec0"></script>
<script>
  var socket = io.connect('/'); // URL сервера веб-сокетов (корневая страница сервера, с которого была загружена страница)
  socket.on('server event', function (data) {
    console.log(data);
    socket.emit('client event', { 'name': 'value' });
  });
</script>

Запустим сервер:

$ sudo nodejs nodetest2.js

и откроем страницу http://localhost:80 (если запущен локально на 80-м порту) в браузере. Если все успешно, в консоли JavaScript браузера мы увидим обмен событиями между браузером и сервером при подключении.

Обмен информацией между RTCPeerConnection через веб-сокеты

Клиентская часть

Сохраним наш основной пример (rtcdemo3.html) под новым именем rtcdemo4.html. Подключим в элементе библиотеку socket.io:

<script src="/socket.io/socket.io.js?2bdec0"></script>

И в начале сценария JavaScript — подключение к веб-сокетам:

var socket = io.connect('http://localhost');

Заменим прямой вызов функций другого участника отправкой ему сообщения через веб-сокеты:

function createOffer_success(desc) {
  ...
  // pc2_receivedOffer(desc);
  socket.emit('offer', desc);
  ...
}
function pc2_createAnswer_success(desc) {  
  ...
  // pc1.setRemoteDescription(desc);
  socket.emit('answer', desc );
}
function pc1_onicecandidate(event)  {
    ...
    // pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
    socket.emit('ice1', event.candidate);
    ...
}
function pc2_onicecandidate(event)  {
    ...
    // pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
    socket.emit('ice2', event.candidate);
    ...
}

В функции hangup() вместо прямого вызова функций второго участника передадим сообщение через веб-сокеты:

function btnHangupClick() {
  ...
  // remoteVideo2.src = ""; pc2.close(); pc2 = null; 
  socket.emit('hangup', {});
}

И добавим обработчики получения сообщения:

socket.on('offer', function (data) {
  console.log("socket.on('offer'):", data);
  pc2_receivedOffer(data);
});

socket.on('answer', function (data) {е
  console.log("socket.on('answer'):", data);
  pc1.setRemoteDescription( new RTCSessionDescription(data) );
});

socket.on('ice1', function (data) {
  console.log("socket.on('ice1'):", data);
  pc2.addIceCandidate(new RTCIceCandidate(data));
});

socket.on('ice2', function (data) {
  console.log("socket.on('ice2'):", data);
  pc1.addIceCandidate(new RTCIceCandidate(data));
});

socket.on('hangup', function (data) {
  console.log("socket.on('hangup'):", data);
  remoteVideo2.src = ""; pc2.close(); pc2 = null; 
});

Серверная часть

На серверной стороне сохраним файл nodetest2 под новым именем rtctest4.js и внутри функции io.sockets.on(‘connection’, function (socket) { … } добавим прием и отправку сообщений клиентов:

socket.on('offer', function (data) { // При получении сообщения 'offer',
  // так как клиентское соединение в данном примере всего одно,
  // отправим сообщение обратно через тот же сокет
  socket.emit('offer', data); 
  // Если бы было необходимо переслать сообщение по всем соединениям, 
  // кроме отправителя:
  // soket.broadcast.emit('offer', data);
});
socket.on('answer', function (data) {
  socket.emit('answer', data);
});
socket.on('ice1', function (data) {
  socket.emit('ice1', data);
});
socket.on('ice2', function (data) {
  socket.emit('ice2', data);
});
socket.on('hangup', function (data) {
  socket.emit('hangup', data);
});

Кроме этого, изменим имя HTML-файла:

  // res.sendfile(__dirname + '/nodetest2.html'); // Отдадим HTML-файл
  res.sendfile(__dirname + '/rtctest4.html'); 

Запуск сервера:

$ sudo nodejs nodetest2.js

Несмотря на то что код обоих клиентов выполняется в пределах одной и той же закладки браузера, все взаимодействие между участниками в нашем примере полностью осуществляется через сеть и «разнести» участников уже не требует особых сложностей. Впрочем, то, что мы делали, тоже было очень простым — эти технологии и хороши своей простотой в использовании. Пусть иногда и обманчивой. В частности, не будем забывать, что без STUN/TURN-серверов наш пример не сможет работать в присутствии трансляции адресов и сетевых экранов.

Заключение

Получившийся пример очень условен, но если немного универсализировать обработчики событий, чтобы они не различались у вызывающей и вызываемой стороны, вместо двух объектов pc1 и pc2 сделать массив RTCPeerConnection и реализовать динамическое создание и удаление элементов <video> ,то получится вполне пригодный для использования видеочат. В этом уже нет особой специфики, связанной с WebRTC, и пример простейшего видеочата на несколько участников (как и тексты всех примеров статьи) есть на диске, идущем с журналом. Впрочем, и в интернете можно найти уже немало хороших примеров. В частности, при подготовке статьи использовались: simpl.info getUserMedia, simpl.info RTCPeerConnection,WebRTC Reference App.

Можно предположить, что совсем скоро благодаря WebRTC произойдет переворот не только в нашем представлении о голосовой и видеосвязи, но и в том, как мы воспринимаем интернет в целом. WebRTC позиционируется не только как технология для звонков из браузера в браузер, но и как технология коммуникаций реального времени. Видеосвязь, которую мы разобрали, лишь небольшая часть возможных вариантов его использования. Уже есть примеры трансляции экрана (скриншаринга), и совместной работы, и даже P2P-сеть доставки контента на основе браузеров с помощью RTCDataChannel.



Сравнение производительности клиентов для синхронизации
2014-10-27 12:37 Denis Mirkov

Компания BitTorrent решила доказать, что её клиент для синхронизации BitTorrent Sync работает быстрее, чем все конкуренты. Для этого она провела сравнительное тестирование, в котором BitTorrent Sync камня на камня не оставил от Google Drive, Microsoft OneDrive и Dropbox.

Во время тестирования передавался файл MP4 размером 1,36 ГБ между двумя компьютерами Apple MacBook Pro при использовании гигабитных Ethernet-адаптеров Thunderbolt. Таймер запускался в момент начала передачи данных и останавливался в момент завершения передачи.

Как показал опыт, BitTorrent Sync синхронизирует файлы в 8 раз быстрее, чем Google Drive, в 11 раз быстрее OneDrive и в 16 раз быстрее Dropbox.

003

Для каждого из сервисов было проведено три теста (утром, днём и вечером), так что результаты можно считать достаточно достоверными.



Распознавание образов на квантовом компьютере
2014-10-27 14:00 Denis Mirkov

Группа китайских физиков впервые в мире провела эксперимент с распознаванием образов на квантовом компьютере. Во время опыта компьютер успешно распознал рукописные символы.

Теоретически, квантовые компьютеры намного превосходят в производительности обычные ПК благодаря использованию кубитов — наименьшего элемента для хранения информации. В отличие от бита, кубит может принимать значения не только 0 и 1, но и промежуточные значения, то есть находиться в суперпозиции. Это увеличивает возможности по проведению вычислений, так что общая производительность компьютера возрастает.

Раньше учёным удавалось проводить только весьма ограниченный набор операций на квантовом компьютере. Ничего подобного распознаванию образов никто не мог продемонстрировать. Поэтому достижение исследователей из Китайского университета науки и техники в Хэфее считается таким важным. По словам авторов научной работы, это первая в мире демонстрация квантового искусственного интеллекта.

В частности, исследователи научили компьютер различать рукописные символы “6” и “9”.

003

Китайский квантовый компьютер представляет собой молекулу из двух атомов углерода, трёх атомов фтора и одного атома йода. При этом, один из атомов углерода представляет собой изотоп углерод-13.

004

На иллюстрации внизу показан результат считывания сигнала для каждого изображения во время эксперимента китайских физиков.

005



Компания-резидент Фонда «Сколково» получит 44 миллиона рублей на жалобы
2014-10-27 14:34 Anna Yakovleva

Компания «Интеллектуальные социальные системы» (резидент кластера информационных технологий Фонда «Сколково»), создающая проект «Сердитый гражданин», получит 44 млн рублей инвестиций от Фонда развития интернет- инициатив (ФРИИ).

Компания «Интеллектуальные социальные системы» создает IT-проекты для эффективного взаимодействия граждан с органами власти и коммерческими организациями. Первым был создан «Сердитый гражданин» —независимый онлайн-ресурс для обработки жалоб и поиска решения проблем жителей России. Этот проект лег в основу коммерческого проекта компании — системы «Довольный гражданин», созданной для автоматизации обработки обращений, сокращения их количества, управления информационным полем; среди заказчиков — Министерство образования и науки РФ, Федеральная служба по труду и занятости, Главное управление дорожного хозяйства Московской области, Московский физико-технический институт и другие. Еще один проект компании — «Лига качества», сервис по сбору и обработке претензий клиентов для небольших компаний. Ранее компания привлекала посевные инвестиции от бизнес-ангела и венчурного фонда Runa Capital.

Дмитрий Кох, основатель компании «Интеллектуальные социальные системы»:

«Мы гордимся нашими продуктами, поскольку развиваем их в непростой нише социального предпринимательства, что позволяет нам с помощью коммерциализации наших разработок улучшать качество жизни людей. Поддержка от ФРИИ поможет нам более динамично развивать наши продукты на российском рынке и в дальнейшем выйти на зарубежные страны».

Иван Киреев, Старший проектный менеджер Кластера информационных технологий Фонда «Сколково»:

«ООО “Интеллектуальные Социальные системы” – молодая перспективная компания, недавно пополнившая список резидентов IT-Кластера. Синергия инновационных технологических решений (уникальные алгоритмы машинного обучения, BI сервисы) и ярко выраженная социальная направленность –  залог успеха данного проекта. Предложенный сервис – это новое технологическое направление, обеспечивающее двустороннюю связь между органами власти и обычными гражданами».

По итогам Форума «Интернет-предпринимательство в России» компания наладила сотрудничество с Администрацией Президента РФ, в том числе в решении одной из важных задач последней – обеспечении своевременного и всестороннего рассмотрения обращений граждан, анализ этих обращений, а также результатов их рассмотрения и принятых по ним мер. Теперь из числа приходящих на сайт «Сердитого гражданина» жалоб будут отбираться наиболее значимые обращения и выявляться случаи, вызывающие общественный резонанс, после чего соответствующая информация будет направляться непосредственно в Администрацию Президента. Дополнительно будут предоставляться статистические и аналитические данные. Это поможет оперативно выявлять проблемные вопросы и своевременно реагировать на острые ситуации.

Кроме того, на днях портал «Сердитый гражданин» подписал соглашение о сотрудничестве с порталом «Спутник». На www.sputnik.ru открыт новый сервис, с помощью которого пользователи смогу донести свои претензии до государственных организаций и ведомств: пожаловаться на неправильную парковку, обман в магазине, задержку зарплаты или отсутствие отопления в квартире. Помочь пользователю и принять меры будут готовы и обязаны более 1400 организаций по всей России, включая надзорные органы и инспекции, региональные органы исполнительной власти, прокуратуру и другие ведомства. Жалобная книга встроена прямо в поиск — когда система из запроса пользователя понимает, что ему нужна помощь — она прямо в результатах поиска предложит ему заполнить соответствующую форму и описать свои претензии.



Свободный клон Age of Empires II
2014-10-27 15:20 Denis Mirkov

У поклонников игры Age of Empires II большой праздник. Вышла свободная версия игры, с нуля написанная на C++, под лицензией GPLv3+. Разработчики использовали современные технологии, такие как OpenGL и GLSL, и постарались сделать точную копию оригинальной версии, применив оригинальные медиафайлы, в том числе звук и графику. Однако, из-за ограничений на права интеллектуальной собственности эти файлы не поставляются вместе с игрой, так что требуется предварительная установка оригинальной версии Age of Empires II.

Свободный клон Age of Empires II работает под Linux. Поскольку никто из разработчиков не использует Windows, нормальная работа под этой операционной системой не гарантируется. Однако, в игре используются кроссплатформенные библиотеки, так что портирование под Windows не должно представлять проблему.

Авторы постарались в точности скопировать геймплей оригинальной версии, а кое-где даже улучшить его.

Исходный код опубликован на Github: https://github.com/SFTtech/openage.

Пообщаться с разработчиками и поделиться советами предлагается на IRC-канале (sfttech on freenode.org) или по XMPP (openage@chat.sft.mx).



Navigation Layer — управление жестами для Android
2014-10-27 16:40 LifeHacker

Несмотря на то, что диагональ экрана смартфона всё увеличивается, пользоваться им во многих случаях по-прежнему неудобно. Попасть на ходу в какую-нибудь мелкую кнопочку получается не у всех и не всегда, так что поиск альтернативных способов управления продолжается. Одним из таких способов является управление с помощью жестов. Программа Navigation Layer поможет тебе начать его использовать на своём Android.

Navigation Layer — это приложение для мобильных устройств под управлением Android, которое позволит управлять ими с помощью специальных жестов. Главное достоинство этой программы состоит в том, что её можно использовать независимо от того, какое приложение в данный момент запущено на переднем плане, то есть в любой момент времени.

003

Для полноценной работы программы тебе придётся выполнить некоторые настройки. Прежде всего убедись, что соответствующий сервис работает в фоновом режиме, а затем разреши Navigation Layer показывать уведомление, чтобы различные очистители памяти его не убивали. Отметь также опцию автоматической загрузки, чтобы не запускать программу каждый раз после перезагрузки устройства.

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

004

После этого можно приступить непосредственно к настройке жестов. Они, кстати, могут быть следующими: двойной тап, длинный тап, свайп влево, вправо, вверх или вниз. К этим движениям ты можешь привязать необходимые действия, список которых довольно обширен. Здесь есть закрытие программ, вызов списка недавних приложений, переход на домашний экран или просто назад, управление мультимедиа и так далее. Обрати внимание, что некоторые функции требуют наличия прав суперпользователя.

005

Таким образом, мы получаем удобную и быструю возможность взаимодействия со своим гаджетом с помощью простых жестов. Navigation Layer отлично подойдёт всем пользователям, которым надоело целиться в мелкие кнопочки интерфейса операционной системы каждый раз, когда нужно переключить трек, включить беспроводной интерфейс или запустить нужную программу. Теперь ты сможешь сделать это буквально одним росчерком пальца.



255 терабит/c по оптоволокну
2014-10-27 18:00 Denis Mirkov

Группа учёных из Технологического университета Эйндховена и университета Центральной Флориды опубликовала научную статью с результатами эксперимента по рекордной скорости передачи данных по оптоволоконному кабелю. Используя новый тип оптоволокна, им удалось зарегистрировать скорость 255 терабит в секунду, что является рекордным показателем на сегодняшний день.

Новое оптоволокно содержит семь различных кабелей для передачи информации, тогда как обычное оптоволокно содержит всего один кабель. Именно благодаря этому удалось существенно увеличить скорость. Кроме того, для каждого канала исследователи внедрили два дополнительных ортогональных измерения для передачи данных, то есть по каждому каналу скорость передачи выросла втрое. За счёт всех этих улучшений удалось повысить скорость до 255 терабит/с, что в 20 раз больше, чем действующие сейчас нормы для оптоволокна 4-8 терабит/с.

Диаметр разработанного оптоволокна составляет 200 микрон, так что весь кабель ненамного больше, чем используемые сейчас. В то же время можно значительно увеличить пропускную способность каналов связи.

Статья с результатами исследования опубликована 26 октября в журнале Nature Photonics.



Вредоносный узел Tor нашли в России
2014-10-27 19:20 Denis Mirkov

Специалисты из компании Leviathan Security Group обнаружили вредоносный узел Tor на территории России. Он дописывает бинарный код в конец файлов, которые пользователь скачивает из интернета. Tor — хороший инструмент для обеспечения анонимного доступа. Но анонимность не означает безопасность.

Исследователи говорят, что такое поведение сервера можно рассматривать как разновидность MiTM-атаки.

Для демонстрации подобной уязвимости разработчики из Leviathan Security Group выпустили программу BDF (Backdoor Factory), которая модифицирует исполняемые файлы, добавляя к ним произвольный код. Автор программы BDF объясняет принцип её работы в демонстрации на видео (выступление записано на хакерской конференции DerbyCon 2014).

О вредоносном российском узле уведомлены координаторы проекта Tor, так что сейчас он помечен как плохой узел (флаг BadExit). Пользователи сети Tor должны принять эту информацию к сведению.

Нужно отметить, что из 1110 выходных узлов в сети Tor это был единственный, который добавлял вредоносный код к бинарникам. Все остальные проверены и не осуществляют ничего подобного. Хотя, это нельзя гарантировать наверняка: узлы могут действовать избирательно и модифицировать только часть файлов, чтобы не проявить себя при проверке.



Firefox OS на Raspberry Pi
2014-10-27 20:40 Denis Mirkov

Разработчики из Mozilla стараются продемонстрировать, что операционная система Firefox OS вполне может нормально работать на Raspberry Pi. С этой целью они выложили в свободный доступ версию Firefox OS, которую можно скачать и установить на мини-компьютер.

Для установки Firefox OS на Raspberry Pi опубликованы инструкции. Требуется, чтобы на компьютере был предварительно установлен дистрибутив Raspbian. На остальных дистрибутивах установка тоже должна пройти нормально, но разработчики не тестировали их, так что не могут ничего гарантировать. Перед установкой ещё следует установить WebIOPi.

Настоятельно рекомендуется также установить sshfs на хосте перед подключением к нему Raspberry Pi.

На Fedora:

sudo yum install fuse-sshfs

На Ubuntu:

sudo apt-get install sshfs

Файлы Firefox OS для Raspberry Pi.

Авторы подчёркивают, что операционная система поставляется в демонстрационной версии, так что не следует ожидать технической поддержки или каких-либо гарантийных обязательств.

За ходом разработки Firefox OS для Raspberry Pi предлагают следить в списке рассылки.



PayPal назвал лучших хакеров России в 2014 году
2014-10-28 11:03 Denis Mirkov

С 25 по 26 октября в Москве в коворкинг-центре DI Telegraph, что в здании Центрального телеграфа, прошел второй ежегодный хак-марафон PayPal BattleHack. По итогам марафона российская команда Brutal Skaters отправится на мировой финал соревнования, который состоится в Кремниевой долине, где российским разработчикам предстоит сразиться с 13 командами из Сан-Франциско, Майами, Берлина, Торонто, Бостона, Варшавы, Чикаго, Лондона и других городов за главный приз в размере 100 тысяч долларов. Команда, занявшая второе место, получила в качестве приза игровые консоли PS4, а третье место — камеры Polaroid.

Перед разработчиками была поставлена задача создать принципиально новое приложение с помощью интерфейсов прикладного программирования PayPal, Braintree API и SDK за 24 часа бессонной работы. В чем же заключалась главная сложность? Необходимо создать приложение, которое бы имело социальную значимость и помогало бы решать проблемы, с которыми могут столкнуться пользователи в таком мегаполисе как Москва.

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

003

004

Все новые продукты, разработанные в течение московского уикенда, предстали на суд требовательного жюри, в которое вошли Константин Савченко (Zvooq & Bookmate), Александр Васильев (Apps4All), Дмитрий Бурковский (xsolla), Диана Молдавская (экс-Zeptolab), Гэри Фаулер (GVA Launch Guru) и непосредственно директор глобальной сети разработчиков PayPal и Braintree Джон Ланн (John Lunn).

В этом году московский раунд выиграла команда Brutal Skaters. Разработчики (Аракчев Артём, Осадчук Павел, Золотарев Павел и Cемион Aлександр, которые познакомились только на самом хакатоне) создали приложение, которое, с помощью небольшого девайса, превращает обычный скейтборд в «умную вещь», записывает все сделанные пользователем трюки и позволяет соревноваться с друзьями и бросать им вызовы. Совмещение работы с железом и кодом впечатлило судей, и теперь команда отправится на финал в Калифорнию, чтобы защитить титул российских программистов как «лучших в мире».

«После победы в прошлом году на российских разработчиков возлагается особая надежда. В этот раз соревнование получило еще больший географический охват, и конкуренция становится еще сильнее, но Россия в очередной раз сумела добиться выдающихся результатов, – говорит Джон Лaнн (John Lunn), директор глобальной сети разработчиков PayPal и один из судей хак-марафона BattleHack. – Сегодня мы увидели несколько великолепных приложений, в том числе сервис для фермеров, желающих продавать свои эко-товары, или сейф, который автоматически делает фотографии тех, кто попытается его вскрыть, а также многих других. Я с нетерпением жду возможности познакомиться с тем, какие приложения представят команды на общемировом финале марафона».

«Я очень рад, что в Москве вновь состоялся хак-марафон PayPal BattleHack, и я горжусь российскими разработчиками, продемонстрировавшими свой недюжинный талант, — сказал Владимир Малюгин, глава PayPal в России. – Компания PayPal сама начинала свою деятельность 15 лет назад с небольшого стартапа, основанного несколькими талантливыми и самоотверженными разработчиками, и вы видите, насколько выросла компания с тех пор. Именно по этой причине мы стремимся поддерживать молодых талантливых разработчиков по всем миру, в том числе и в Москве».

Команда Brutal Skaters теперь присоединится к другим финалистам, которые будут сражаться за звание лучших программистов планеты и приз в размере 100 тысяч долларов на общемировом финале Battlehack в Сан-Хосе в ноябре 2014 года.

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

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



Банковский троян Dridex распространяется через макросы Word
2014-10-28 12:20 Denis Mirkov

Исследователи из Palo Alto Networks сообщили о том, что банковский троян Dridex изменил метод распространения и теперь осуществляет заражение персональных компьютеров, используя макросы Word.

Dridex — последняя версия в линейке банковских троянов Bugat/Feodo/Cridex, она активно используется с июля текущего года. До настоящего времени троян распространялся по электронной почте, но на прошлой неделе организаторы атаки изменили схему, так что теперь они рассылают документы Microsoft Word, содержащие макрос, который скачивает и запускает вредоносную программу.

Как и свои предшественники, Dridex представляет собой типичный банковский троян по образцу Zeus. Его главная функциональность — кража учётных данных для доступа к онлайн-банкингу, так что злоумышленники получают доступ к денежным средствам жертвы и могут перевести их на другой счёт. Dridex использует конфигурационный XML-файл для определения списка сайтов, для которых осуществляется кража учётных данных. Там также перечислены сайты, которые нужно игнорировать.

Исследователи говорят, что схема распространения Dridex изменилась 21 октября. Жертвами атаки являются, преимущественно, пользователи из США.

003

В частности, замечено 9 различных документов Word, с которыми распространяется вредоносный макрос. Макросы скачивают файлы по следующим адресам:

  • http://gpsbah[.]com/images/1.exe
  • http://jvsfiles[.]com/common/1.exe
  • http://jvssys[.]com/js/1.exe
  • http://mirafarm[.]ro/html/js/bin.exe
  • http://palitosdepan[.]com/js/bin.exe
  • http://www.juglarsa.com[.]ar/images/1.exe

Всё это легитимные веб-сайты, которые, видимо, подверглись взлому.

Защититься от атаки можно с помощью отключения макросов Word. Вообще, данный вектор атаки известен уже около 10 лет, так что макросы Word и так должны быть отключены по умолчанию у большинства пользователей.



Microsoft предлагает анлим на облачный хостинг OneDrive
2014-10-28 13:40 Denis Mirkov

Пользователи офисного пакета Microsoft Office 365 теперь могут воспользоваться онлайновым дисковым хранилищем неограниченного размера. Такое решение компании Microsoft является очередным шагом в разгорающейся конкурентной борьбе служб веб-хостинга. Раньше в OneDrive существовали ограничения 1 терабайт на общий объём и 10 гигабайт на размер одного файла. Возможно, ограничение на максимальный размер файла сохранится и в будущем.

Сервис OneDrive работает по образцу Google Drive, позволяя синхронизировать документы и обеспечивая доступ к ним со всех устройств пользователя. При этом возможна и совместная работа над документами.

Среди конкурентов OneDrive — упомянутый Google Drive, а также Dropbox, Box и другие сервисы. Но у всех них объём предоставляемого дискового пространства ограничен даже на самом высоком тарифе, не говоря уже о бесплатном доступе. Среди облачных хостингов, которые предоставляли неограниченный лимит пространства, была Bitcasa, которая прекратила предоставлять такую услугу на прошлой неделе.

Апгрейд хостинга OneDrive осуществляется постепенно для всех пользователей и продлится несколько месяцев. Кто хочет быть в числе первых — добро пожаловать в список ожидания.

Неограниченный объём дискового пространства OneDrive не потребует дополнительных расходов. Пакет Office 365 продаётся по цене от $6,99 в месяц. За эту цену можно работать с офисными приложениями Microsoft и получить анлим на хостинг. По данным Microsoft, подписку уже оформили 7 млн пользователей.




© Copyright Gameland

В избранное