Захват и демонстрация экрана JS

#javascript

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


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


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

Ответы

Ответ 1

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

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

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



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

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

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


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


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

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

var root = document;


Обходя дочерние элементы этого узла, и выкидывая потенциально проблемные/бесполезные
узлы (вроде