Хочу понять возможности захвата или демонстрации экрана для JS. В сервисе krible.ru реализована следующая возможность:
показывать страницу, которую смотрит оператор
видеть страницу, которую смотрит клиент
перемещать посетителя к выделенной части страницы
можно выделить текст и он будет выделен у клиента
Какими инструментами можно реализовать такие возможности, кто работал с подобным функционалом?
Может быть ссылки на какие-то готовые библиотеки или сайты где можно почитать об этом.
Ответ
У меня для вас две новости: хорошая и плохая.
Начну с плохой: полностью готовых открытых решений не существует (как минимум они мне не известны).
А хорошая новость заключается в том, что существующих свободных инструментов достаточно, чтобы построить необходимое вам решение.
Расскажу, как я решал подобную задачу, возможно мой опыт вам чем-то поможет.
Итак, из всех очевидных решений, я предпочел использовать передачу DOM дерева от клиента к оператору и трансляцию сообщений мутаций дерева и пользовательских действий. Этот подход позволяет абстрагироваться от сложности целевого сайта и сделать решение максимально гибким и универсальным.
Всю задачу можно условно разбить на несколько частей:
Получить дерево DOM на клиенте и сериализовать его
Передать его оператору
Восстановить дерево у оператора
Подхватывать мутации дерева у клиента и передавать их оператору
(Опционально) Передавать пользовательские события (прокрутка, навигация, нажатие клавиш и прочее) от клиента оператору
(Опционально) Передавать выделение текста от оператора клиенту
1. Получение дерева DOM и его сериализация:
Получение самого дерева - тривиальная задача. Для этого можете использовать стандартный JS DOM API. Начать можно с корневого узла:
var root = document;
Обходя дочерние элементы этого узла, и выкидывая потенциально проблемные/бесполезные узлы (вроде