10

Хочу понять возможности захвата или демонстрации экрана для JS. В сервисе krible.ru реализована следующая возможность:

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

Какими инструментами можно реализовать такие возможности, кто работал с подобным функционалом?
Может быть ссылки на какие-то готовые библиотеки или сайты где можно почитать об этом.

7

2 ответа 2

10
+50

У меня для вас две новости: хорошая и плохая.

Начну с плохой: полностью готовых открытых решений не существует (как минимум они мне не известны).

А хорошая новость заключается в том, что существующих свободных инструментов достаточно, чтобы построить необходимое вам решение.


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

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

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

  1. Получить дерево DOM на клиенте и сериализовать его
  2. Передать его оператору
  3. Восстановить дерево у оператора
  4. Подхватывать мутации дерева у клиента и передавать их оператору
  5. (Опционально) Передавать пользовательские события (прокрутка, навигация, нажатие клавиш и прочее) от клиента оператору
  6. (Опционально) Передавать выделение текста от оператора клиенту

1. Получение дерева DOM и его сериализация:

Получение самого дерева - тривиальная задача. Для этого можете использовать стандартный JS DOM API. Начать можно с корневого узла:

var root = document;

Обходя дочерние элементы этого узла, и выкидывая потенциально проблемные/бесполезные узлы (вроде <script> и <object>) вы получите подмножество дерева, которое нужно сериализовывать для получения эквивалентной картинки у оператора и клиента.

А вот тут начинается магия: страница с одной и той же разметкой приводи к построению разного объектного дерева DOM в разных браузерах. Круче всего ведет себя IE8, создающий по дополнительному текстовому узлу для каждого перевода строки между тегами... Но с этой проблемой тоже можно справится. Как именно, рассказывать не буду, проблема довольно обширная.

Как только вы получили подмножество дерева DOM - его нужно сериализовать. Если для каждого узла сохранять его тип, имя а так же атрибуты (если они есть и если тип узла может их содержать) вы можете получить обычный древовидный JSON.

2. Передача сериализованного дерева оператору

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

3. Восстановить дерево у оператора

JS позволяет динамически создавать пустые iframe'ы (без атрибутов src) и динамически работать с их содержимым. Имея должным образом сериализованое в JSON дерево восстановить из него объектное дерево DOM - не составляет проблем.

4. Подхватывать мутации дерева у клиента и передавать их оператору

Не многие знаю, но в DOM API существует вещь под названием MutationObserver. Используя его API вы можете динамически подхватывать мутации дерева и передавать его (средствами Socket.io можно делать это в реалтайме) оператору. Опять же, существует отдельная задача сериализации/десериализации изменений, но эту задачу я доверяю вам решить самостоятельно :)

5. (Опционально) Передавать пользовательские события от клиента оператору

JS позволяет подвязываться к произвольным событиям окна. Транслировать эти события (умея транслировать координаты узлов) - задача тривиальная.

6. (Опционально) Передавать выделение текста от оператора клиенту

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


Как вы уже могли понять, эта тема очень и очень обширна и она ну совсем не вписывается в формат QA продвигаемый StackOverflow. Тем не менее, вопрос очень интересен, думаю если у вас появятся конкретные вопросы, по технологиям упомянутым выше, не стесняйтесь оформлять их отдельными вопросами.

1
  • 3
    Как раз на счёт MutationObserver я не слышал, а в данном случае он нужен как никто другой.) На счёт передачи данных я то же смотрел в сторону веб-сокетов т.к. это самое производительное и простое решение которое мне известно в данный момент.
    – Vayas
    30 авг 2016 в 4:24
0

Ну как-то так:

function startCapture(displayMediaOptions) {
 let captureStream = null;

 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch(err => { console.error("Error:" + err); return null; });
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.