Веб-сайт Screencast с Socket.IO и Node.JS

Question

Я пытаюсь реализовать скринкаст веб-сайта без какого-либо программного обеспечения, кроме браузера. Не обязательно действительно показывать веб-сайт. Возможно, это было бы хорошим решением для «перестроения» веб-сайта с информацией, такой как браузер, разрешение окна просмотра, прокрученный пиксель, ... Это только для объяснения тура на веб-сайте, и он функционирует.

Мое текущее решение: Сценарий создает «скриншоты» на сайте с html2canvas (http://html2canvas.hertzen.com/). Затем я переношу скриншот в виде png-данных с base64 в приемники. Они декодируют его и рисуют на нем.

Но html2canvas требуется около 1 секунды, чтобы создать холст (только с текстом). Для создания веб-сайтов с изображениями потребуется около 5-10 секунд. Это долго.

Есть ли у вас идеи для других подходов?

Answer 1

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

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

[ 'click', 'change', 'keypress', 'select', 'submit', 'mousedown'].forEach(function(event_name){ 
    document.documentElement.addEventListener(event_name, function(e){ 
     // send event to the other side using Socket.IO or web sockets 
     console.log(getSelector(e.target), e.type); 
    }, true); 
}); 

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

https://github.com/ebrehault/resurrectio/blob/master/recorder.js#L367

Answer 2

Что вы могли бы рассмотреть, чтобы захватить события ввода пользователя на одном конце, а затем имитировать его на другом конце. Это можно сделать вживую - переведите мышь и ключевые события в поток - затем отправьте его на симулятор клиента. См. Эту статью: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

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

Для моделирования должно быть несколько библиотек (я думаю, jQuery также может работать). например http://yuilibrary.com/yui/docs/event/simulate.html