Отслеживание действий пользователя в реальном времени?

Question

[melnikov_m]

Как отслеживать действия пользователя в реальном времени (аля просмотр экрана через teamviewer) через браузер, вообще на каких технологиях это основывается?

Видел, что такое реализовано, вот на этом проекте
https://www.figma.com

То, ест там ты в реальном времени видишь, как дизайнер ходит по макету, создает слои, видишь его курсор и т.д.

UPD: Имеется ввиду просматривать через браузер не рабочий стол пользователя, а сайт по которому ходит клиент...

Answer 1

[Александр Таратин]

Отслеживаем изменения dom на странице через
https://developer.mozilla.org/ru/docs/Web/API/Muta...
посылаем их (а также позицию курсора, текущий элемент в фокусе, текущую прокрутку, и наверное еще чего нибудь, что сразу в голову не приходит) через webrtc
https://github.com/feross/simple-peer
https://github.com/peers/peerjs
Если объем пакета данных получается слишком большой, можно попробовать жать их через https://github.com/nodeca/pako

Answer 2

[Philipp]

Отслеживается это следующим образом - создается DOM-снимок, затем просто отслеживаются движения мышью, они отправляются на сервер с помощью Ajax или его аналогов. Веб-визор в Яндекс.Метрике так работает.

Answer 3

[res2001]

На винде это можно делать через RDP и shadow.
По моему, в браузере это так же работает.

Comments

[melnikov_m]

а по подробнее? что за библиотеки? язык (php, pyton)?...

[res2001]

melnikov_m, WinAPI и Си точно поддреживается :-)
Про остальное не знаю. RDP - технология удаленных рабочих столов встроенная в винду, shadow - одна из плюшек RDP.

[res2001]

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

[melnikov_m]

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

[res2001]

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

Answer 4

[Flur]

Через AJAX - запросы, полагаю

Comments

[melnikov_m]

Не думаю, что все так просто ))

Answer 5

[Кирилл Горелов]

Я как понимаю на вашем сайте это нужно делать?
Если да, то я бы оттолкнулся от более простого решения, чем вы привели в примере сайт.

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

Конечно тут есть минус, в то что места на вашем сервере будет уходить огромное количество.
Но это самый простой вариант, хоть и не самый удачный.