Способ записи, редактирования и воссоздания компьютерного сеанса
Изобретение относится к области информационных технологий, а именно к системам записи и воссоздания пользовательского сеанса на компьютере. Технический результат заключается в повышении точности отслеживания пользовательского сеанса на компьютере. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере, включающий: запуск процесса записи пользовательских действий на компьютере, формирование записи пользовательских действий, в которой пользовательские действия хранятся как серия кадров, каждое приложение, с которым взаимодействует пользователь, имеет папку с номерами кадров, а каждый кадр содержит иерархию сохраняемых объектов; сохранение записи в сценарий, присвоение уникальных идентификаторов элементам программного обеспечения; получение исходного состояния программного обеспечения. 22 з.п. ф-лы, 19 ил.
Перекрестные ссылки на родственные заявки
[0001] Настоящая заявка частично продолжает заявку на патент США №15208643, поданную 13 июля 2016 года, которая включена в настоящую заявку посредством ссылки. Предпосылки создания изобретения
Область техники, к которой относится изобретение
[0002] Данное изобретение относится к способу и системе записи действий пользователя, в частности к записи, редактированию и воссозданию пользовательского сеанса браузера, а в более широком смысле - пользовательского сеанса при работе, с приложением на компьютере или ноутбуке.
Предшествующий уровень техники
[0001] Все большее время люди проводят в Интернете, и у них часто возникает потребность в том, чтобы свои действия в Интернете можно было вспомнить позже посредством сохранения своих действий в браузере (или, в более широком смысле, своих действий в приложении на компьютере и/или ноутбуке). Записывая свои действия в Интернете, человек, естественно, рассчитывает на возможность редактирования этой записи с целью последующего описания происходящего или расширения коммуникационных возможностей. Традиционно запись производится посредством захвата видеоизображения с экрана. Однако такой способ не позволяет редактировать записи сеанса браузера с требуемым уровнем детализации. Хотя возможны два вида записи (см. рис. 1), ни одно из существующих средств не может сохранять каждый элемент и действие пользователя на веб-странице и, соответственно, не предоставляет возможности последующего внесения изменений и редактирования перед воспроизведением; при этом для зрителя отсутствует возможность перехода по гиперссылкам во время воспроизведения и изменения любого элемента или события - это то, что не является возможным с записями видеоизображений.
[0002] Предпочтительно иметь возможность заменять любой элемент на веб-странице, удалять или изменять любые действия, допуская внесение неограниченного количества измерений в записанный сеанс браузера. Также предпочтительно иметь возможность хранения записей для их индивидуального воспроизведения по требованию. Пользователь может изъявить желание транслировать записи одновременно большой группе подписчиков или осуществлять прямую трансляцию записей в процессе записи. Перед воспроизведением, или во время прямой трансляции, элементы веб-страницы могут быть заменены на определенные интерактивные элементы, элементы, активируемые щелчком мыши, или рекламные материалы, которые можно персонализировать для групп или отдельных лиц согласно данным, доступным программному обеспечению, используемому для воспроизведения. Однако традиционный способ видеозаписи не обладает такими возможностями.
[0003] Существует несколько программных инструментов для исследования качества взаимодействия с пользователем и удобства пользовательских интерфейсов. Эти традиционные инструменты отслеживают действия пользователя на веб-сайте. Такие инструменты, предназначенные для «управления взаимодействием с потребителем», используются разработчиками веб-сайта для отслеживания использования веб-сайта его посетителями, обычно с целью повышения удобства пользования веб-сайтом и увеличения прибыли от покупок потребителя на веб-сайте. Эти инструменты должны быть установлены разработчиками на собственных веб-сайтах. Некоторые из подобных программных инструментов отслеживают запросы браузера к веб-серверам, а другие - используют API браузера для отслеживания действий пользователя, например щелчков по ссылкам.
[0004] Данные программные инструменты используются для сбора данных о значительном количестве посетителей веб-сайтов, и часто для отображения собранных данных используются так называемые карты пользовательской активности и сводные таблицы. Среди инструментов управления взаимодействием с потребителем существуют инструменты для «воспроизведения сеанса». Воспроизведение сеанса позволяет проиграть всю последовательность действий пользователя на веб-сайте или в веб-приложении. Воспроизведение может включать в себя пользовательское представление (браузер или вывод на экран), пользовательский ввод (ввод с клавиатуры и мыши) и просмотр журналов сетевой активности или консоли браузера. Основная
задача воспроизведения - помощь в улучшении взаимодействия с потребителем посредством анализа удобства и простоты использования веб-сайта и поведения потребителя. Большинство инструментов воспроизведения сеансов задействуют запись видеоизображения сеансов браузера. Некоторые более продвинутые средства используют прикладной программный интерфейс (API) браузера для записи данных о действиях пользователя на веб-странице.
[0005] Инструменты, используемые для управления взаимодействием с потребителем и получающие доступ к API браузера, принципиально различаются между собой как в плане задействуемых способов, так и в плане сферы применений. Во-первых, инструменты, используемые для управления взаимодействием с потребителем, устанавливаются веб-разработчиками только на собственный веб-сайт. Такие инструменты могут быть использованы только для записи и воспроизведения посещений веб-сайта, принадлежащего разработчикам. В то же время желательно записывать и воспроизводить посещения любого веб-сайта. Во-вторых, инструменты, используемые для управления взаимодействием с потребителем, сохраняют данные в виде, предназначенном специально для агрегатного анализа и исследования. В то же время желательно сохранять данные в формате, который позволяет редактировать записанный сеанс браузера перед воспроизведением.
[0006] Традиционные средства не способны осуществлять захват, редактирование и воспроизведение сеанса браузера с желаемым уровнем детализации или взаимодействия. Соответственно, желательно иметь систему и способ, которые позволят осуществлять запись, редактирование и воссоздание сеансов веб-браузера для развлекательных или образовательных целей (а не только для анализа поведения потребителя). Также желательно иметь возможность создания комментирования развлекательного или обучающего характера, используя браузер в качестве материала, передающего информацию, а не создавая видеозапись действий на экране.
Сущность изобретения
[0007] Настоящее изобретение относится к способу и системе записи, редактирования и воссоздания пользовательского сеанса браузера, а в более широком смысле - пользовательского сеанса при работе с приложением на компьютере или ноутбуке. Оно практически лишено одного или нескольких недостатков предшествующего уровня техники.
[0008] Первый вариант осуществления представляет собой способ и систему для записи, редактирования и воспроизведения сеансов браузера, предназначенные для осуществления захвата последовательности посещений пользователем веб-страниц, включая исходное состояние каждой веб-страницы и всех действий пользователя с веб-страницами. Приложение использует стандартный API браузера (Application Programming Interface, «прикладной программный интерфейс») для записи и хранения веб-страниц и действий пользователя в уникальном формате данных (не в видеоформате). В отличие от видеозаписи экрана компьютера, использование стандартного API браузера для записи позволяет редактировать запись пользовательского веб-сеанса способами, недоступными для видеозаписей. Программа записи включает ядро движка, реализованное на JavaScript (стандартный язык программирования браузера, встроенный в него или добавляемый в виде расширения) и различные конфигурации локального или удаленного сервера для воспроизведения. Записи могут быть обучающего или развлекательного характера.
[0009] Дополнительные свойства и преимущества изобретения будут изложены в последующем описании и частично станут очевидными из описания или могут быть изучены в практике осуществления настоящего изобретения. Преимущества изобретения могут быть достигнуты путем реализации изобретения, приведенного в описании, формуле изобретения, а также в приложенных графических материалах.
[0010] Следует понимать, что предшествующее общее описание и последующее полное описание являются примерными и пояснительными и предназначены для более подробного представления заявленного изобретения.
Краткое описание графических материалов
[0011] Сопровождающие графические материалы включены с целью обеспечения более глубокого понимания изобретения и являются неотъемлемой частью этого документа. Они иллюстрируют варианты осуществления изобретения и вместе с описанием служат для объяснения принципов изобретения.
[0012] Описание чертежей
[0013] На рис. 1 показаны традиционные способы записи действий пользователя.
[0014] На рис. 2 показан принцип установки и использования программного обеспечения для записи.
[0015] На рис. 3 изображен пользовательский интерфейс и последовательность процессов в соответствии с примером осуществления.
[0016] На рис. 4 схематически показан уникальный формат данных, используемый в записи сеанса браузера, в соответствии с примером осуществления.
[0017] На рис. 5 показаны файлы, входящие в состав примера осуществления.
[0018] На рис. 6 показана структура примера осуществления.
[0019] На рис. 7 изображена блок-схема способа в соответствии с примером осуществления.
[0020] На рис. 8А показана веб-страница браузера с установленной и работающей программой записи (см. круглую кнопку в правом верхнем углу).
[0021] На рис. 8В показана веб-страница браузера, содержащая окно со списком доступных для воспроизведения записей.
[0022] На рис. 9 показан снимок экрана процесса воспроизведения записанных действий на веб-странице на локальном сервере.
[0023] На рис. 10 показан образец структурной схемы компьютера или сервера, пригодного для осуществления изобретения.
[0024] На рис. 11, 12А, 12В, 13, 14, 15А, 15В и 16 показаны иллюстративные виды снимков экранов, представляющие идеи изобретения, описываемые в данном документе.
Детальное описание предпочтительных вариантов осуществления изобретения
[0025] Далее будут представлены детальные описания предпочтительных вариантов осуществления настоящего изобретения, примеры которых изображены на сопровождающих графических материалах.
[0026] В одном из аспектов изобретения предлагается способ и система записи, последующего редактирования и воссоздания пользовательского сеанса браузера, а в более широком смысле - сеанса работы пользователя с приложением на компьютере или ноутбуке.
[0027] Один из вариантов осуществления представляет собой браузерное расширение (встраиваемый модуль) и локальный веб-сервер, предназначенные для записи и хранения пользовательских действий на веб-странице. Браузерное расширение используется для записи.
Браузерное расширение устанавливается в браузере (например, в Google Chrome™). Пример осуществления также может быть реализован в качестве браузерного расширения для любого другого браузера, такого как Safari, Firefox, Edge, Opera и Internet Explorer. Такое браузерное расширение содержит программный код, написанный на языке программирования JavaScript (в данном примере). Ядро движка захватывает исходное состояние веб-страницы и каждого действия пользователя на веб-странице. Исходное состояние веб-страницы и каждого пользовательского события захватываются в виде данных с временной отметкой в потоке событий. Поток событий хранится в виде файла с уникальным форматом данных. В альтернативном варианте поток данных может быть сохранен в базе данных. Поток событий содержит все необходимые данные для воссоздания на сервере сеанса в браузере пользователя.
[0028] Поток событий хранится в формате обмена данными JSON (JavaScript Object Notation - «нотация объектов JavaScript»). JSON предоставляет общий синтаксис для атрибутов массивов данных. В примере осуществления определен унифицированный формат хранения записей сеансов браузера с помощью JSON. Этот формат данных присущ только данному примеру осуществления. Каждая посещенная во время сеанса браузера веб-страница является элементом JSON-массива. Каждый элемент массива представляет собой объект, содержащий данные об исходном состоянии веб-страницы и массив временных отметок, хранящий последовательность событий с временными отметками.
[0029] В каждом браузере (Google Chrome™, Apple™ Safari™, и пр.) задействован стандарт W3C DOM4, разработанный независимой рабочей группой по технологиям гипертекстовых веб-приложений (W3C Web Hypertext Application Technology Working Group), который определяет объектную модель документа (Document Object Model) и известен как API (Application Program Interface, «интерфейс прикладных программ») браузера. Ядро движка осуществляет захват исходного состояния веб-страницы путем обхода ее DOM-структуры, доступной через API браузера. Перед тем, как программа записи осуществит захват исходного состояния страницы, в результате этого процесса назначается уникальный идентификатор каждому элементу страницы. Затем процесс выполняется для каждого элемента: HTML-код сериализуется в формат, пригодный для сохранения и воссоздания. Сериализованный HTML-код хранится в JSON-массиве и содержит все, что необходимо для воссоздания страницы. Всякий раз, когда
пользователь открывает веб-страницу, программа записи осуществляет захват и сохраняет исходное состояние веб-страницы.
[0030] Типичным примером захвата и сохранения данных веб-страницы является метод «веб-скрапинг» (Web Scraping). Обычно он применяется для извлечения данных из веб-страницы. Когда ядро движка захватывает изначальное состояние веб-страницы, применяется метод веб-скрапинга, но при этом метод используется для хранения и воссоздания веб-страницы как «ключевого кадра» в записи. В этом примере осуществления каждому элементу веб-страницы назначается уникальный идентификатор и сериализованный HTML-код. Он сохраняется в уникальном формате данных, пригодном для воссоздания веб-страницы в процессе воспроизведения записи.
[0031] Когда ядро движка сохраняет исходное состояние веб-страницы, оно использует API браузера для обхода DOM-структуры с помощью метода, близкому к методу веб-скрапинга. Поскольку используется API браузера, результат отличается от обычного веб-скрапинга, потому что программа записи осуществляет захват и сохраняет веб-страницы с целью их последующего воссоздания в процессе воспроизведения записанного сеанса браузера.
[0032] Исходное состояние веб-страницы сохраняется с такими атрибутами, как ширина и высота области отображения, адрес ресурса в сети и полный HTML-код веб-страницы. Оно сохраняется в виде объекта в JSON-массиве. Объект имеет следующие атрибуты:
[0033] - адрес веб-страницы в сети;
[0034] - HTML-код веб-страницы;
[0035] - атрибуты HTML-тега веб-страницы (например, «language» [«язык»]);
[0036] - ширина области отображения браузера;
[0037] - высота области отображения браузера;
[0038] - активный элемент (элемент с установленным фокусом);
[0039] - исходное положение бегунка полосы прокрутки веб-страницы.
[0040] После захвата и сохранения исходного состояния веб-страницы ядро движка входит в режим «прослушивания и наблюдения» для записи каждого действия пользователя на веб-странице. Ядро движка использует API браузера для слежения за пользовательскими событиями. API браузера реализует способы отслеживания событий с помощью JavaScript, в частности
«MutationObserver» и различных прослушивателей событий. Обычно веб-разработчики используют данные способы для реализации на веб-странице дополнительного или интерактивного функционала. В примере осуществления данные JavaScript-методы используются с целью слежения за действиями пользователя; таким образом, программа записи имеет возможность записывать и воссоздавать сеанс браузера.
[0041] События с временными отметками описываются атрибутами «timecode» («код временной отметки»), «type» («тип», например событие передвижения мыши или прокрутки ее колесика) и координатами положения относительно левого и верхнего углов окна браузера. В режиме «прослушивания и наблюдения» ядро движка с помощью прослушивателей событий осуществляет захват следующих действий пользователя:
[0042] - события мыши (движение мыши, нажатие кнопки мыши, отпускание кнопки мыши);
[0043] - события прокрутки содержимого страницы или элемента;
[0044] - ввод текста в поле ввода;
[0045] - изменение значения в поле ввода;
[0046] - установка и потеря фокуса.
[0047] Кроме этих событий, ядро движка отслеживает и записывает изменения узлов DOM-структуры (используя объект типа «MutationObserver» API браузера), в том числе:
[0048] - добавление и удаление дочерних узлов;
[0049] - добавление, удаление и изменение атрибутов;
[0050] - изменения значений дочерних текстовых узлов.
[0051] При помощи прослушивателей событий и объекта типа «MutationObserver», ядро движка осуществляет захват всех действий пользователя в веб-браузере. Каждое действие или изменение состояния веб-страницы сохраняется в виде элемента в массиве временных отметок. Каждому элементу назначается атрибут «time» (время в микросекундах, миллисекундах или иной временной единице измерения), значение которого равно времени, прошедшему после предыдущего события. Пример осуществления использует относительное время для каждого события, а не время на часах, что позволяет упростить запись последовательности событий в процессе редактирования. Каждый элемент временной отметки описывается следующими атрибутами:
[0052] - «Time» («время»);
[0053] - «Туре» («тип», например передвижение мыши или прокрутка ее колесика);
[0054] - «ID» («идентификатор»).
[0055] Если событие представляет собой изменение атрибутов DOM-модели, то ядро движка записывает следующие атрибуты:
[0056] - «Time» («время»);
[0057] - «Туре» («тип», значение - «attributes»);
[0058] - «ID» («идентификатор»);
[0059] - «Attribute name» («название атрибута»);
[0060] - «Attribute value» («значение атрибута»).
[0061] Если событие представляет собой изменение текста в текстовом узле DOM-модели, то ядро движка записывает следующие атрибуты:
[0062] - «Time» («время»);
[0063] - «Туре» («тип», значение - «characterData» [«Данные в виде символов»]);
[0064] - «ID» («идентификатор»);
[0065] - «text» («текст»).
[0066] Если событие представляет собой взаимодействие с видеозаписью на веб-странице, то ядро движка записывает следующие атрибуты:
[0067] - «Time» («время»);
[0068] - «Туре» («тип», значение - «video» [«видеозапись»]);
[0069] - «ID» («идентификатор»);
[0070] - «Timestamp» («временная отметка», текущее время);
[0071] - «Source» («источник», адрес ресурса в сети для источника видеозаписи).
[0072] Ядро движка предназначено для захвата исходного состояния веб-страницы, захвата любых действий пользователя и формирования массива временных отметок в памяти. В простейшем варианте осуществления изобретения ядро движка предоставляет простой API для начала, остановки и перезапуска процесса записи. Функция «getCapture» возвращает JSON-массив, содержащий исходное состояние и временные отметки событий.
[0073] В составе ядра движка присутствуют дополнительные функции, обеспечивающие интеграцию ядра движка с букмарклетом браузера или браузерным расширением. Букмарклет - это небольшой JavaScript-код, устанавливаемый как закладка или элемент списка «Избранное» в браузере, добавляющий кнопку «Record» («Запись») в категорию «Избранное» и предоставляющий простой интерфейс для начала записи сеанса браузера. Браузерное расширение предоставляет полнофункциональный пользовательский интерфейс. Браузерное расширение устанавливает элемент управления (и индикатор) в углу браузера. Сразу после установки элемент управления представляет собой простой кружок серого или черного цвета. Элемент управления одновременно служит индикатором процесса записи сеанса. Для отображения пользовательского интерфейса браузерного расширения пользователь должен щелкнуть по элементу управления (круглой серой кнопке). Локальный сервер должен быть готов к работе для сохранения и воспроизведения записи. Если сервер не запущен, то пользователь получит уведомление «Playback server not running» («Сервер воспроизведения не запущен»). Если сервер запущен, то пользователь получит уведомление «Server available» («Сервер готов»). Пользователь может щелкнуть по кнопке «Start Recording» («Начать запись»). Индикатор (кружок) ненадолго изменяет цвет на желтый, что указывает загрузку программы записи. Затем индикатор меняет цвет на красный. Это означает, что программа начала запись всех событий браузера.
[0074] В процессе записи записывается каждое движение мыши и действие на веб-странице. При щелчке по ссылке для перехода на другую страницу во время ее загрузки индикатор меняет цвет на желтый. Это означает, что запись приостановлена до момента полной загрузки новой страницы. Как только новая страница будет полностью загружена, индикатор меняет цвет на красный и запись возобновляется. Пользователь может щелкнуть по красному индикатору и нажать на кнопку «Save Recording» («Сохранить запись») в любое время. Пользователю отобразится сообщение «Saved. View saved recording» («Сохранено. Просмотреть сохраненную запись»). Пользователь может щелкнуть по этой ссылке, чтобы открыть и просмотреть запись. Чтобы просмотреть страницу пользовательского интерфейса сервера со списком всех ранее сохраненных записей, пользователь может щелкнуть по ссылке «View Recording» («Просмотр записи»).
[0075] Браузерное расширение имеет функционал, позволяющий отключать политику защиты контента (Content Security Policy, CSP). CSP - это стандарт безопасности, предотвращающий атаки XSS (межсайтовый скриптинг), атаки «кликджекинг» и прочие виды атак класса «внедрение кода» при загрузке вредоносного контента. Некоторые веб-сайты (в частности, Facebook и Twitter) включают CSP, а в браузерном расширении предусмотрен флажок для игнорирования настроек безопасности CSP. Букмарклет и браузерное расширение объединяют ядро движка с любой веб-страницей, используя метод JavaScript-инъекций. JavaScript-инъекция предоставляет доступ к DOM-модели любой просматриваемой веб-страницы, вставляя файл JavaScript с локального компьютера в такую просматриваемую страницу. Таким образом, букмарклет или браузерное расширение имеет возможность получать локальный файл JavaScript и добавлять его в любую отображаемую в браузере веб-страницу.
[0076] В этом примере осуществления ядро движка реализуется как файл JavaScript. JavaScript-файл доступен на локальном компьютере как часть браузерного расширения. Браузерное расширение внедряет локальный файл JavaScript, содержащий ядро движка, всякий раз, когда пользователь начинает запись и открывает новую веб-страницу. Браузерное расширение реализует пользовательский интерфейс и управляет работой ядра движка посредством вызова функций для начала записи, приостановления записи и сохранения временных отметок событий. Браузерное расширение осуществляет периодическую проверку готовности локального веб-сервера к сохранению файлов и воспроизведению. Если соединение с локальным сервером обрывается, то браузерное расширение выводит сообщение об ошибке.
[0077] Локальный веб-сервер используется для сохранения файлов и воспроизведения. До установки локального веб-сервера требуется наличие и доступность среды выполнения JavaScript «node.js» или среды, аналогичной ей. Локальный сервер может быть реализован на языке программирования JavaScript в виде единого файла JavaScript. Локальный веб-сервер обслуживает как запросы HTTP (небезопасный протокол передачи гипертекстовых данных), так и HTTPS (безопасный протокол передачи гипертекстовых данных). Если записываемая веб-страница запрашивается по обычному HTTP-протоколу, то браузерное расширение будет запрашивать локальный JavaScript-файл по HTTP-протоколу. Если записываемая веб-страница запрашивается по HTTPS-протоколу, то браузерное расширение запрашивает получение
локального JavaScript-файла по безопасному HTTPS-протоколу. Чтобы ответить на безопасный HTTPS-запрос, на локальном веб-сервере имеется самоподписной SSL-сертификат. В простейшем примере осуществления пользователь запускает на компьютере локальный веб-сервер из командной строки.
[0078] Локальный веб-сервер прослушивает запросы из браузерного расширения. Он отвечает на периодические ping-запросы, информируя браузерное расширение о том, что он готов и выполняет прослушивание. В простейшем варианте примера осуществления он отвечает на запрос браузерного расширения о сохранении записи путем сохранения записи файла в файловой системе компьютера. В более сложных вариантах примера осуществления локальный веб-сервер способен сохранять временные отметки событий в базу данных, а не в файловую систему. После сохранения временных отметок событий в виде файлов локальный веб-сервер может отобразить веб-страницу со списком всех записей. С помощью щелчка по имени файла любой записи можно открыть новое окно браузера и начать воспроизведение записи. HTML-файл, полученный для воспроизведения, содержит также исходное состояние оригинальной веб-страницы и ссылку на JavaScript-файл, который реализует воспроизведение. HTML-страница, выполняющая воспроизведение, содержит временные отметки событий, необходимые для воссоздания действий пользователя.
[0079] JavaScript-файл, реализующий воспроизведение, содержит основной класс «browserPlayback». Этот класс содержит функции, отвечающие на запросы пользователя на воспроизведение, приостановление или остановку воспроизведения. Запрос на воспроизведение - это функция, воссоздающая исходное состояние записанной веб-страницы. Функция устанавливает размеры окна браузера, воссоздает страницу, устанавливает бегунок полосы прокрутки в положение, соответствующее моменту начала записи, и устанавливает фокус на элементе, активному в момент начала записи.
[0080] В примере осуществления задается формат для временных отметок событий, который содержит как временной код, так и числовой идентификатор для каждого записанного события. Временной код записывает период в микросекундах, прошедший с момента предыдущего события. Использование последовательности числовых идентификаторов с данными о времени, прошедшем с момента предыдущего события, позволяет редактировать события или группы
событий и менять их последовательность. Сценарий, отвечающий за воспроизведение, формирует таблицу идентификаторов, что позволяет воспроизводить каждое событие с временной отметкой в правильной последовательности. Атрибут со значением времени, прошедшего с момента предыдущего события, позволяет задавать время отображения каждого события. Таким образом гарантируется правильное воссоздание как последовательности, так и продолжительности всех событий.
[0081] В сценарии воспроизведения содержится функция «render» («прорисовать»), которая вызывается запросом на воспроизведение. Функция «render» считывает массив событий («кадры») и использует API-функцию браузера «requestAnimationFrame» для обновления веб-страницы в соответствии с каждым записанным событием. Функция API «requestAnimationFrame» широко используется для реализации эффектов анимации на веб-странице. Пример осуществления использует функцию «requestAnimationFrame» для обновления исходного состояния веб-страницы в соответствии с пользовательскими действиями, записанными в сеансе при работе с браузером. Для каждого типа записанного пользовательского события должен существовать собственный метод обработки, и поэтому в сценарии, отвечающем за воспроизведение, содержатся функции для корректной обработки каждого типа пользовательского действия. Этот сценарий отвечает за имитацию курсора, который отражает события, вызванные использованием мыши, такие как перемещение мыши.
[0082] Существует множество программ захвата и записи видеоизображения с экрана компьютерного монитора. Они используют функционал операционной системы компьютера для захвата видеоматериала, отображаемого на экране компьютера. В результате видеозапись получается таким же образом, как если бы экран компьютера снимали на видеокамеру. Запись сохраняется как видеофайл такого формата, как «МР4». Такую видеозапись можно редактировать, выполняя смену кадров и склеивая встык ее части, тем самым меняя последовательность записанных событий. При помощи специального ПО можно попиксельно редактировать отдельные кадры видеозаписи. Это трудоемкий процесс, сопоставимый с процессом создания специальных эффектов в киноиндустрии. Видеоизображение может создавать эффект глубины с помощью элементов, перекрывающих друг друга на экране, однако такая видеозапись содержит всего один слой и редактировать возможно только пиксели.
[0083] Как показано на рис. 1 (снизу), предпочтительный вариант осуществления связан с записью сеансов браузера (в качестве альтернативы видеозаписи экрана). Данный вариант использует API браузера для захвата некоторых или всех элементов веб-страницы, а также некоторых или всех действий пользователя на веб-странице. Как правило, API браузера используется для отслеживания действий пользователя с целью получения данных с веб-сервера или изменения самой веб-страницы. API браузера также может быть использован для отслеживания и записи действий пользователя. Обычно это делает веб-разработчик, наблюдающий за поведением посетителей собственного веб-сайта и анализирующий это поведение для того, чтобы повысить качество и удобство использования веб-сайта. В примере осуществления применяется API браузера для записи действий пользователя в форме, пригодной для редактирования перед воспроизведением, с целью дальнейшего использования в качестве обучающего или развлекательного материала (например, захват действий для использования в эпизоде кинофильма).
[0084] В соответствии с примером осуществления элементы веб-страницы и действия с ними сохраняются как текстовые данные с временными отметками в формате стандарта JSON. Любой элемент, как и действие, может быть определен, изменен, перемещен или удален, что делает возможным вносить изменения в запись таким образом, как будто у нее есть несколько слоев. При воспроизведении воссоздаваемый сеанс браузера содержит актуальную версию веб-страниц с ссылками, по которым можно щелкнуть для перехода на новые веб-страницы. В процессе воспроизведения сервер воспроизведения полностью воссоздает сеанс браузера, в том числе посещение всех веб-страниц во время записи оригинального сеанса.
[0085] Это означает, что пользователь, просматривающий сеанс, без редактирования увидит в точности всю последовательность посещения веб страниц пользователем, осуществившим оригинальную запись, в которой в точности передается сеанс браузера и все переходы между веб-страницами, как это видел оригинальный пользователь. Однако, в отличие от просмотра видеозаписи, сеанс браузера воссоздается в браузере, что позволяет просматривающему запись пользователю осуществлять переход по ссылкам в окне воспроизведения браузера в любое время. При этом открываемые веб-страницы будут открываться в отдельном окне браузера. Все ссылки действительны во время воспроизведения, что означает то, что пользователь,
просматривающий запись, может щелкнуть по любой ссылке в окне воспроизведения для того, чтобы открыть новое окно и одновременно продолжить обычный просмотр переходов между веб-страницами, записанный оригинальным пользователем.
[0086] На рис. 2 показан процесс установки и использования приложения для записи. На первом этапе необходимо установить узел. Этот узел является модулем, интерпретирующим и выполняющим JavaScript-программы. Пример осуществления представляет собой пакет исполняемых JavaScript-файлов. На втором этапе осуществляется загрузка и установка приложения для записи на компьютер пользователя. На третьем этапе пользователь вводит команду в терминал или консоль компьютера для запуска локального веб-сервера. На четвертом этапе пользователь устанавливает патентуемое браузерное расширение в браузер. Это расширение предоставляет пользовательский интерфейс для записи и воспроизведения сеанса браузера. «Node.js» - это утилита (ПО) с открытым кодом, способная интерпретировать и выполнять JavaScript-программы независимо от браузера. Пример осуществления представляет собой пакет исполняемых JavaScript-программ; при этом ПО «Node.js» необходимо для выполнения этих JavaScript-программ.
[0087] В дополнение к этому на рис. 2 показан список компонентов и зависимостей примера осуществления. «Node.js» является зависимостью. Пример осуществления включает в себя локальный веб-сервер и браузерное расширение, настроенные на запись действий пользователя на веб-странице. Выполняется последовательность установки различных пакетов программ. Сначала устанавливается «node.js». Далее загружается приложение для записи. Затем пользователь запускает локальный веб-сервер. Без установки «node.js» обычно запустить локальный веб-сервер не представляется возможным. После этого пользователь устанавливает браузерное расширение в браузер. Это расширение предоставляет пользовательский интерфейс для записи и воспроизведения сеанса браузера. Тем не менее пользователь обычно не может осуществить запись сеанса браузера до тех пор, пока не будет установлен «node.js» и не будет запущен локальный браузер.
[0088] На рис. 3 изображен пользовательский интерфейс и последовательность процессов в соответствии с примером осуществления. Пример осуществления включает в себя локальный веб-сервер, устанавливающийся поверх ПО «node.js» и движок среды выполнения JavaScript,
который устанавливается поверх операционной системы компьютера. Для постоянного хранения данных локальный веб-сервер имеет доступ к файловой системе компьютера или базе данных. Используя пользовательский интерфейс, реализуемый как браузерное расширение, пользователь может щелкнуть по кнопке «Start Recording» («Начать запись»), которая запрашивает файл «record.js» из локального веб-сервера (шаг 1) и внедряет файл в любую веб-страницу, просматриваемую в браузере (шаг 2). В примере осуществления выполняется захват исходного состояния веб-страницы и любых действий пользователя. Когда пользователь щелкает по кнопке «Save Recording» («Сохранить запись»), файл временных отметок в стандартном JSON-формате отправляется на локальный веб-сервер и сохраняется в файловой системе или базе данных (шаг 3).
[0089] В одном из вариантов осуществления данные сохраняются как файл на локальном компьютере пользователя. В другом варианте осуществления запись сохраняется в серверном приложении базы данных, запущенном на локальном компьютере пользователя. Наконец, есть возможность сохранения записи на удаленном сервере, как в виде файла, так и в базе данных.
[0090] Когда пользователь щелкает по «View Recordings» («Просмотр записей»), браузерное расширение посылает запрос на локальный веб-сервер, и веб-страница отображается со списком доступных записей. Щелчок по любой ссылке на запись (шаг 4) посылает запрос локальному веб-серверу на формирование веб-страницы, содержащей исходное состояние записанной веб-страницы, встроенный файл «play.js» и временные отметки событий. Открывается окно воспроизведения (шаг 5), отображающее исходное состояние записанной веб-страницы, и у пользователя появляется возможность воспроизвести все записанные действия пользователя.
[0091] Следует отметить, что функционал записи, редактирования и воспроизведения сеанса браузера является принципиально новым. Почти каждый находит использование браузеров важным, но до сих пор не существовало возможности осуществлять запись, детализированное редактирование и воспроизведение сеансов браузеров. В примере осуществления эффективно реализуется ранее недоступная возможность творческого подхода к использованию записей сеансов браузера. Например, записывая и редактируя сеансы браузера, можно добавлять комментарий на основе художественного текста. Так же как видеозапись и запись на кинопленку могут использоваться для создания кинолент, а аудиозапись - для радиопостановок и подкастов,
пример осуществления может быть задействован для создания сюжетов, которые будут воспроизводиться в браузере.
[0092] На рис. 4 схематически показан формат данных, используемый в записи сеанса браузера, в соответствии с примером осуществления. Запись реализуется как текстовые данные, структурированные при помощи стандартной синтаксической структуры данных JSON. Запись представляет собой JSON-массив, включающий в себя один или несколько объектов, которые представляют собой каждую веб-страницу, посещенную во время сеанса браузера. Браузеры сохраняют историю посещений пользователем веб-страниц в виде списка адресов ресурсов в сети. Пример осуществления имеет значительно более продвинутый функционал, чем простое сохранение списка ранее посещенных веб-страниц. Каждая веб-страница захватывается целиком, включая весь HTML-код, который ее формирует. Таким образом, веб-страница может быть воссоздана в исходном состоянии, даже если эта веб-страница позднее была изменена владельцем этого веб-сайта. Это означает, что веб-страница архивируется программой записи.
[0093] В процессе записи каждая веб-страница, посещаемая пользователем, архивируется целиком, что позволяет воссоздать ее во время воспроизведения. Каждый объект веб-страницы содержит объект с атрибутами, описывающими исходное состояние веб-страницы, а также массив, представляющий собой временные отметки, соответствующие действиям пользователя или событиям, изменяющим веб-страницу. Следует отметить, что в течение любого сеанса браузера действия пользователя могут привести к изменениям наборов значений параметров на веб-странице, предусмотренных веб-разработчиком. Например, разработчик веб-сайта может реализовать возможность открытия окна чата для отправки сообщений пользователем.
[0094] Иллюстративная программа записи способна осуществлять захват действия пользователя и соответствующего вызванного изменения веб-страницы. Если пользователь во время записи выбрал элемент для открытия окна чата, то запись воссоздает действие пользователя и показывает процесс открытия окна чата. Программа записи может захватывать, записывать и воссоздавать любое действие пользователя на веб-странице. Формат записи данных позволяет вносить изменения в любую запись. Например, пользователь может отредактировать файл данных и изменить текст, отображаемый в окне чата. Исходное состояние веб-страницы описывается атрибутами, такими как ссылка на посещенную страницу, атрибуты HTML-тега веб-страницы,
ширина и высота области отображения, любые элементы с установленным фокусом и исходное положение бегунка полосы прокрутки веб-страницы. Каждому событию с временной отметкой присваиваются атрибуты «type» («тип»), «ID» («идентификатор») и «timecode» («код временной отметки»), а также некоторые другие атрибуты, характерные для данного типа события.
[0095] Ниже приведен пример со списком атрибутов, описывающих исходное состояние веб-страницы:
[0096] «Screen width» («ширина области отображения») - 1198 (пикселов);
[0097] «Screen height» («высота области отображения») - 591 (пиксел);
[0098] «URL» («адрес ресурса в сети») - https:***github.com/Storistream/browsercapture;
[0099] «Scroll position» («положение бегунка полосы прокрутки экрана») - 100 (пикселов);
[00100] «Active element» («активный элемент») - 132 (идентификатор элемента);
[00101] «HTML» - (HTML-код веб-страницы).
[00102] Ниже приведен пример со списком атрибутов, описывающих событие пользователя:
[00103] «Туре» («тип») - «mouse move» («движение мыши»);
[00104] «ID» («идентификатор») - 323 (автоинкрементное целочисленное значение);
[00105] «Time» («время») - 969 (микросекунды).
[00106] Тип определяется при помощи API браузера. Идентификаторы назначаются последовательно, начиная с первого элемента на веб-странице. Время рассчитывается в микросекундах как период, прошедший с момента предыдущего события.
[00107] В зависимости от типа события, событие может иметь дополнительные атрибуты. Например, для события «mousemove» («движение мыши»):
[00108] «Left» - 1022 (пиксели от левого края экрана);
[00109] «Тор» - 66 (пиксели от верхнего края экрана).
[00110] На рис. 5 показаны файлы, входящие в состав примера осуществления. Папка «Playback Server» («Сервер воспроизведения») содержит файлы, необходимые для работы локального веб-сервера. Файл «index.js» реализует JavaScript локального веб-сервера и требует наличия программных библиотек JavaScript для протоколов HTTP и HTTPS и доступ к файловой
системе. Файл требует предварительной установки среды выполнения JavaScript «Node». В файлах «Cert.pm» и «Key.pm» содержится самоподписной SSL-сертификат для доступа к серверу по HTTPS-протоколу. В файле «Play.js» реализована функция воспроизведения. Он интегрируется с HTML-кодом для получения исходного состояния веб-страницы и обрабатывает данные временных отметок для воссоздания сеанса браузера. Папка «Record-Extension» («Запись-расширение») содержит все файлы, входящие в состав браузерного расширения. Файл «Background.js» содержит код, устанавливаемый в качестве браузерного расширения. Файлы «Popup.html» и «Popup-script.js» реализуют пользовательский интерфейс, отображаемый в браузерном расширении. Файл «Record.js» содержит ядро движка, встраиваемое в веб-страницу для обеспечения возможности записи. В папке «Recordings» («Записи») находятся сами файлы записанных сеансов браузера в JSON-формате.
[00111] На рис. 6 показана структура примера осуществления. Браузерное расширение предоставляет пользовательский интерфейс для управления записью и воспроизведением. Браузерное расширение периодически посылает ping-запросы (602) на локальный веб-сервер, чтобы определить его готовность к записи и воспроизведению (отправляет запрос сценарию «Index.js», который отвечает на ping-запрос). В браузерном расширении есть флажок, отключающий Content Security Policy («политика защиты содержимого»), что позволяет встраивать JavaScript-код.
[00112] Ссылка «View Recordings» («Просмотр записей») (606) отправляет запрос сценарию «Index.js» на отображение веб-страницы со списком предыдущих записей. Нажатие ссылки «Start Recording» («Начало записи») (608) отправляет запрос сценарию «Index.js» на получение сценария «Record.js» для встраивания в код веб-страницы. Кнопка «Сапсе1» («Отмена») (610) отправляет запрос сценарию «Record.js» на остановку записи (632). Кнопка «Save» («Сохранить») (616) отправляет запрос сценарию «Record.js» на остановку записи (632) и передает временные отметки событий сценарию «Index.js» для их сохранения в файловой системе или базе данных.
[00113] Сценарий «Index.js» представляет собой локальный веб-сервер. Он может отвечать (614) на ping-запрос браузерного расширения. Он может отвечать на запрос на отображение веб-страницы со списком предыдущих записей (616). Он может отвечать на запрос на запись,
предоставляя файл «Record.js» для встраивания в код записываемой веб-страницы. Сценарий «Record.js» содержит все функции ядра движка для осуществления захвата исходного состояния (626) веб-страницы, всех пользовательских действий и изменений на странице (630). Запросы на сохранение исходного состояния (626) веб-страницы, всех пользовательских действий и изменений страницы (630) принимает функция «Browser Capture». На первом этапе всем DOM-элементам присваиваются числовые идентификаторы (624) с целью упрощения последующего воссоздания веб-страницы. Функция захватывает исходное состояние веб-страницы как сериализированный HTML-код. Затем ядро движка начинает прослушивать пользовательские события и отслеживать изменения в DOM-структуре. Ядро движка продолжает прослушивание и отслеживание до тех пор, пока не получит запрос на остановку (632). Если ядро движка получает запрос на сохранение записи (616), то функция «Get Capture» возвращает JSON-массив, который содержит исходное состояние страницы и временные отметки событий в формате, пригодном для сохранения в файловой системе или базе данных.
[00114] Сценарий «Play.js» встраивается в HTML-файл, генерируемый сценарием «Index.js», когда пользователь создает запрос на воспроизведение записи. Основная функция сценария называется «Browser Playback» (620). Она воссоздает исходное состояние веб-страницы (636), устанавливает размеры окна браузера (638, 644), устанавливает фокус (640), устанавливает позицию бегунка полосы прокрутки экрана (642) и создает имитацию курсора. Затем функция «Browser Playback» считывает временные отметки событий (646), последовательно повторяя (648) каждое событие согласно порядку, устанавливаемому таблицей идентификаторов. «Browser Playback» осуществляет подготовку анимации, требуемой для воссоздания события (или изменения) (650) и отображает это событие в браузере (652).
[00115] На рис. 7 изображена блок-схема способа в соответствии с примером осуществления. На этапе 702 пользователь заходит на веб-страницу. Запись действий пользователя начинается в этапе 704. Если на этапе 706 локальный сервер готов, то на этапе 710 выполняется сценарий «request record.js» («запрос на запись»). В противном случае на этапе 708 пользователю отправляется уведомление. На этапе 712 осуществляется выполнение сценария «Inject Record.js» («внедрение записи»). На этапе 714 осуществляется присвоение идентификаторов элементов, а на этапе 716 - захват исходного состояния. Захват событий
осуществляется на этапе 718. Изменения захватываются на этапе 720. Если на этапе 722 получен запрос на остановку записи, то на этапе 724 осуществляется сохранение записываемых данных.
[00116] В противном случае процесс возвращается к этапу 718. Если на этапе 726 получен запрос на просмотр записи, то на этапе 730 открывается окно. В противном случае на этапе 728 процесс завершается. Установка размеров экрана осуществляется на этапе 732. Отображение HTML осуществляется на этапе 734. Процесс устанавливает фокус на этапе 736. Положение бегунка полосы прокрутки устанавливается на этапе 738. На этапе 740 процесс создает курсор. Если на этапе 742 остается какое-либо событие, то процесс воссоздает это событие на этапе 744. В противном случае на этапе 746 воспроизведение прекращается.
[00117] На рис. 8А показана веб-страница браузера с установленной и работающей программой записи (см. круглую кнопку в правом верхнем углу). Если пользователь щелкает по кнопке записи, то также появляется диалоговое меню «Start Recording» («Начать запись»).
[00118] На рис. 8В показана веб-страница браузера, содержащая окно со списком доступных для воспроизведения записей. Пользователь может щелкнуть по любой из записей для ее воспроизведения.
[00119] На рис. 9 показан снимок экрана процесса воспроизведения записанных действий на веб-странице на локальном сервере.
[00120] Как отмечалось выше, основное назначение примера осуществления следующая:
[00121] 1) записывать действия пользователя и изменения пользовательского интерфейса в уникальный формат данных, содержащий элементы пользовательского интерфейса и их свойства;
[00122] 2) предоставлять возможность воспроизводить записанные данные так, как они были записаны;
[00123] 3) предоставлять возможность редактировать каждый сохраненный элемент по отдельности, изменяя его свойства (время, продолжительность, размер, цвет, текст и пр.). Один из примеров осуществления относится к записи сеанса веб-браузера. Другие варианты осуществления можно использовать для записи действий пользователя и элементов пользовательского интерфейса автономных и (или) компьютерных приложений, работающих под операционными системами Mac™ OS или Windows™ разных версий. Несмотря на то, что
технические характеристики могут отличаться на отдельно взятых системах и (или) окружениях, принцип и идея записи и воспроизведения остаются неизменными. В соответствии с одним из примеров осуществления запись компьютерных приложений требует использования уникального формата данных. Всем элементам графического пользовательского интерфейса назначаются уникальные идентификаторы, и все вносимые в исходное окно графического интерфейса пользователя изменения записываются. Все действия пользователя с переключениями между окнами графического пользовательского интерфейса и действия пользователя с элементами графического пользовательского интерфейса записываются и также могут быть воспроизведены.
[00124] В альтернативном варианте осуществления изобретения данная идея применяется более широко, затрагивая запись, редактирование и воспроизведение действий пользователя при его работе с компьютерной программой. С этой целью пользователь записывает приложения с помощью компьютерной программы записи. Компьютерная программа записи встраивается в целевое приложение и прослушивает события изменений. Компьютерная программа записи затем преобразует записанные данные в Layers-формат. Этот формат использует дерево папок, соответствующее древовидной структуре объектной модели записываемого приложения, где в хранимом формате каждый класс представляется как папка. Записанный формат хранится в корневой папке (например, «Скайп» будет храниться в «com.skype.skype»). Каждая папка приложения содержит папки с номерами кадров. Каждый кадр содержит иерархию сохраняемых объектов. Объект перерисовывается в ключевых кадрах, в которых возможно воспроизведение его внешнего вида. Каждый объект иерархии содержит метаданные, описанные в «grabInfo.plist». Объект может быть одного из четырех типов: «image» («изображение»), «graphics» («графика»), «text» («текст»), «group» («группа»). Тип задается в поле «type». Это работает нижеуказанным образом.
[00125] В альтернативном варианте осуществления изобретения запись может выполняться веб-приложениями записи (например, такими расширениями Chrome, как те, которые широко рассматриваются в настоящем документе). Формат хранения веб-записи - файлы PDF, созданные из записанного содержимого HTML-кода. Компьютерная программа записи преобразует PDF-файлы в описанный ниже формат.
[00126] 1. Если объект принадлежит типу «image» или «graphics», то папка может также содержать маску, например «mask.svg».
[00127] 2. Если объект принадлежит типу «text» или «apartText», то его метаданные будут содержать сам текст в поле «text», индекс «allTexts.txt» - в поле «textIndex», а параметры текста - в поле «textStyle». Текст может иметь различные параметры, применимые к определенным его сегментам, например, «{x, len}», где «х» - номер первого символа, а «len» - это общее количество символов.
[00128] 3. Кроме того, если объект представляет собой текст, то он может содержать поле для отступов, в котором перечисляются отступы для текста (в указанном порядке): «Left» («слева»), «Тор» («сверху»), «Right» («справа») и «Bottom» («снизу»).
[00129] 4. Для каждого сегмента в поле «textStyle» могут быть указаны размер и название шрифта. Если данное поле не определено, то корневые поля метаданных, такие как fontName (fontPath) («наименование шрифта» [«путь шрифта]), «fontSize» («размер шрифта»), используются для всего текста.
[00130] 5. Если текст использует несистемный шрифт, то будет задействован локальный путь из поля «fontPath». Все используемые шрифты сохраняются в корневой папке «Fonts» («Шрифты»). Отсутствие шрифтов в этой папке означает, что они не были определены. В таком случае используют любой другой доступный шрифт.
[00131] 6. Поле «frame» («кадр») содержит координаты и размеры объекта. Координаты являются относительными по отношению к суперпредставлению объекта. Для корневых веб-объектов также указывается «viewPort». В таком случае поле «frame» («кадр») содержит «{0, 0, viewPort.w, viewPort.h}».
[00132] 7. Объекты типа «group» («группа») являются пустыми контейнерами, содержащими другие объекты. Они используются в редакторе для группировки объектов. Таким образом, при выделении дочернего объекта вместо выделения этого объекта выделяется весь сгруппированный объект.
[00133] 8. Поле «zIndex» содержит индекс элемента в суперпредставлении. При размещении объекты сортируются дважды. Первый раз - по полю «parsed» («преобразованный»), второй - по полю «zIndex».
[00134] 9. Поле «visible» определяет степень прозрачности объекта в диапазоне значений от 0 до 1.
[00135] 10. Поле «interpolation» используется для интерполяции перечня значений. Поле может, но не должно, содержать следующие ключевые слова: «crop» («обрезка»), «frame» («кадр»), «visible» («видимый»). Каждое значение может быть описано в формате «{type, factor}», где «type» («тип») может принимать значение 0 (без интерполяции), 1 (линейная интерполяция), 2 (нелинейная затухающая), 3 (нелинейно нарастающая) и 4 (нелинейно затухающая и нарастающая), a «factor» («коэффициент») - это коэффициент интерполяции (значение зарезервировано, а функционал еще не реализован). В редакторе интерполяция переносится из предыдущего на текущий ключевой кадр, т.е. если в ключевом кадре N определена интерполяция, то интерполяция перейдет от кадра N-1 к кадру N.
[00136] 11. Поле «crop» («обрезка») содержит данные обрезки изображения в формате «{left, bottom, right, top}», где каждое значение принимает значение от 0 до 1. Поля «left» («слева») и «right» («справа») определяют положения вертикальных линий обрезки, а поля «top» («сверху») и «bottom» («снизу») определяют положения горизонтальных линий обрезки. Например, отсутствие обрезки определяется значениями «{0, 0, 1, 1}», т.е. левая линия обрезки совпадает с левым краем (0), а правая линия обрезки - с правым краем изображения (1). Если объект обрезается на половину ширины с правой стороны, то он будет содержать данные «{0, 0, 0.5, 1}».
[00137] Возможно также использовать следующие поля:
- «json»;
- «mediaBox» (размер данных PDF);
- «wasRendered» (был ли прорисован объект в данном кадре);
- «devName»;
- «parseMode» («режим преобразования»);
- «address» («адрес»);
- «aoclass»;
- «name» («название»);
- «baseFont» («основной шрифт»);
- «visibleFrame» («отображаемый кадр»);
- «frameName» (номер текущего кадра - не для всех объектов);
- «lastChangesFrameName» (номер кадра, в котором произошли любые изменения параметров - не для всех объектов);
- «lastVisibleRenderFrameName» (номер кадра, который был прорисован последним - не для всех объектов);
- «backgroundColor» («цвет фона»).
[00138] Любой объект с расширением «.pdf» является промежуточным - предпочтительным будет не использовать его для формирования XML.
[00139] В папке «Mouse» («Мышь») сохраняется информация о курсоре мыши. Для каждого кадра создается файл PLIST, содержащий координаты, тип и размер курсора мыши, а также флаг, определяющий нажатие кнопки мыши в данном кадре. Все записанные в проекте перемещения курсора содержатся в папке «Mouse/Cursors» («Мышь/курсоры»). Файл «session.plist» в корневой папке проекта содержит следующие параметры записи:
[00140] «fps» («частота кадров в секунду»);
[00141] «lastFrame» («последний кадр»).
[00142] Дополнительно существует возможность во время записи отправлять данные на сервер фрагментами, а не сохранять все непосредственно в памяти. Все изменения в «MutationObserver» DOM-элемента добавляются в массив объектов как события; при этом каждый объект включает:
[00143] время, прошедшее с момента предыдущего события, в мс;
[00144] идентификатор изменившегося элемента;
[00145] тип изменения - «childList», «attributes», «characterData», «input», «change», «focus», «blur», «videoplay», «videopause», «innerHTML», «scroll», «mouseMove», «mouseDown», «mouseUp» и т.д.
[00146];новое значение или новый сегмент HTML-кода.
[00147] Когда в массиве находится [n] элементов (событий; n - константа, соответствующая количеству событий, которое вызывает передачу данных; в данном случае
иллюстративное значение n=300), создается JSON-файл и отправляется на сервер вместе с серийным номером. После этого массив очищается и начинает собирать новые изменения.
[00148] В свою очередь, сервер идентифицирует пользователя и сохраняет данные в его учетной записи.
[00149] Когда пользователь останавливает запись, программа записи отсылает все оставшиеся данные. После того как сервер подтверждает получение всех данных, генерируется окончательный JSON-файл и отправляется на сервер. Этот окончательный файл содержит:
[00150] число исходных состояний «initialState» (при переходе на новую веб-страницу создается новое исходное состояние, а код новой веб-страницы сохраняется; таким образом, число исходных состояний «initialState» равно числу просмотренных пользователем страниц);
[00151] число JSON-файлов в каждом исходном состоянии «initialState»;
[00152] длительность каждого исходного состояния «initiaIState»;
[00153] общая длительность записи;
[00154] идентификатор пользователя, осуществляющего запись;
[00155] наименование записи;
[00156] размеры окна браузера в процессе записи;
[00157] информацию о том, осуществлялась ли запись с веб-камеры (да/нет);
[00158] информацию о том, осуществлялась ли запись с микрофона (да/нет);
[00159] информацию о том, осуществлялась ли запись звука, воспроизводимого во вкладке браузера (да/нет).
[00160] Сервер принимает эти данные и сохраняет их в базе данных «PostgreSQL».
[00161] Дополнительно существует возможность добавления видеозаписи к записи (например, при посещении пользователем таких веб-сайтов, как YouTube или Facebook). В процессе записи программа записи ищет на веб-странице видеотеги и начинает следить за их событиями «onvideoplay» и «onvideopause». При воспроизведении видео на веб-странице программа записи создает виртуальный canvas-элемент, в который каждые 40 мс копируется видеоконтент. Затем она, применяя стандартный метод «toDataUrl» для canvas-элементов, создает JPEG-изображение текущего видеокадра, который после этого преобразуется в формат BASE64. Генерируется событие изменения атрибута «background» («фон»), а текущий кадр в формате
BASE64 назначается атрибуту «background». В данном примере используется стандарт JPEG, поскольку он поддерживает сжатие, а объем данных изображений очень важен. Тем не менее допускается использование и форматов PNG и BMP. BASE64 используется для шифрования по причине встраиваемости в HTML. Впоследствии в процессе редактирования на месте исходной видеозаписи могут быть размещены другие видеозаписи. Существует возможность отображения сохраненного набора JPEG-изображений не только в формате BASE64, но также как предварительно преобразованного видеопотока.
[00162] Также существует возможность добавления действий пользователя с картами, например Yandex.Maps или Google Maps. Во время записи программа записи находит canvas-элемент, содержащий карту в содержимом DOM-структуры, используя селекторы класса «Yandex.Map» (здесь Yandex приводится в качестве примера). Каждые 40 мс программа записи создает виртуальный canvas-элемент и копирует туда содержимое canvas-элемента карты. Используя метод «toDataUrl», программа создает изображение карты в формате JPEG и преобразует изображение в формат BASE64. Генерируется событие изменения атрибута «background» («фон»), а текущее изображение карты сохраняется.
[00163] Кроме того, существует возможность использования дополнительных настроек встраиваемых модулей. Настройки программы записи сохраняются при помощи API Chrome и синхронизируются на различных устройствах, которые использовал пользователь. Настройки считываются и сохраняются при помощи синхронизации «chrome.storage.sync». Также программа записи отслеживает событие «chrome.storage.onChanged» и, соответственно, изменения в настройках. При отображении окна настроек встраиваемого модуля на компьютере выполняется поиск всех мультимедийных устройств, отображается перечень доступных разрешений веб-камер, а также проверяется доступность веб-камер и аудиозаписывающих устройств. Все эти перечни затем включаются в выпадающие меню настроек. При выборе устройства снова проверяется его доступность. В случае возникновения любой ошибки пользователь получает уведомление. При попытке внести изменения в настройки в процессе записи пользователь получит уведомление об ошибке о том, что настройки не будут сохранены.
[00164] Дополнительно существует возможность воспользоваться преобразованием файлов PDF. Сервер способен покадрово преобразовать HTML-видео в PDF-файлы, используя PhantomJS
(виртуальный браузер без графической оболочки) и CasperJS (встраиваемый модуль для PhantomJS). Когда пользователь щелкает по кнопке «Parse» («Преобразовать»), запускается PhantomJS и создается исходное состояние «initialState» для HTML-видео. Сервер осуществляет чтение данных из JSON-файлов и после каждого кадра вносит изменения, а затем преобразует каждый кадр в PDF-файл посредством PhantomJS. После формирования всех PDF-файлов сервер упаковывает их в ZIP-архив или другой похожий формат сжатия, доступный для скачивания по ссылке.
[00165] Дополнительно существует возможность реализации быстрой перемотки вперед и назад на основе вкладок. Когда пользователь щелкает по кнопке «PREV/NEXT» («НАЗАД/ВПЕРЕД») или по иконке вкладки на временной шкале, определяется как номер текущего исходного состояния «initialState», так и целевого исходного состояния «initialState». Серверу отправляется запрос на JSON-файл, соответствующий целевому исходному состоянию «initialState». Содержимое DOM-структуры очищается и заполняется полученными данными, и запись переходит к целевой временной отметке.
[00166] Дополнительно существует возможность добавления функции быстрой перемотки вперед и назад по временной шкале. Каждый JSON-файл содержит текущее исходное состояние «initialState». При использовании быстрой перемотки вперед и назад по временной шкале определяется номер целевого исходного состояния «initialState», и запись переходит к текущей вкладке. Серверу отправляется запрос на получение номера нового JSON-файла. После отображения нового исходного состояния «initialState» в этом JSON-файле определяется позиция при помощи целевой временной отметки. В итоге все предыдущие изменения вступают в силу и отображаются, и запись переходит на текущую временную отметку.
[00167] Дополнительно существуют возможности записи видео с веб-камеры, звука с микрофона и звука, воспроизводимого во вкладке браузера. Доступ к камере и микрофону можно получить через функцию «MediaDevices.getUserMedia». Перед началом записи настройки программы записи считываются (разрешение камеры, определение доступности выбранной пользователем камеры, объем данных) и отправляются в «MediaDevices» («Мультимедийные устройства»). Создается поток данных мультимедиа в формате «WEBM» (формат с открытым кодом, разработанный компанией Google, поддерживаемый по умолчанию браузером Chrome и
другими популярными браузерами и позволяющий осуществлять отправку данных в формате «BLOB» на сервер [однако рассматривается поддержка других форматов]). Поток фрагментами отправляется на сервер через соединение, устанавливаемое «socket.io». Сервер идентифицирует пользователя и сохраняет данные мультимедиа в его учетной записи.
[00168] При необходимости воспроизведения записи на мобильном устройстве непосредственно с сервера сохраненное видео преобразуется из формата «WEBM» в «МР4» с использованием «ffmpeg».
[00169] Дополнительно существует возможность подключения к проигрывателю шкалы времени, а также реализации мобильной версии проигрывателя. Оболочка проигрывателя использует фреймворк VueJS и имеет компонентную архитектуру.
[00170] Записи воспроизводятся с использованием встроенного языка JavaScript. Ajax-запросы используют «jQuery» для получения данных.
[00171] В серверной части сервер может быть реализован на базе «Express» вместо оригинального «NodeJS», что позволит значительно упростить поддержку кода, использовать удобные настройки маршрутизации, воспользоваться поддержкой различного промежуточного ПО, легко подключать базы данных и просто встраивать шаблоны. Для управления учетными записями пользователей и сохранения их записей может быть использована база данных PostgreSQL. Аутентификация пользователей на сервере осуществляется при помощи PassportJS, PassportJWT, PassportGoogle, PassportLocalSignIn, PassportLocalSignUp, ExpressSession. Шифрование паролей в базе данных осуществляется при помощи BCrypt.
[00172] Кроме того, в дополнительном варианте осуществления программы записи реализуются две секции: в верхней секции пользователь может управлять настройками для выбора объектов записи и установки разрешения, а в нижней секции пользователь может просмотреть все записи в виде перечня и может удалять, публиковать записи или перейти к редактированию HTML-записи. По завершению пользователем записи в новой вкладке открывается окно с проигрывателем. В этом окне пользователь может изменить информацию об HTML-записи и превью HTML-записи.
[00173] Дополнительно существует возможность реализации функции автоматического завершения записи. В одном из вариантов осуществления программы записи при щелчке
пользователем по элементу списка с автоматическим завершением изменения не сохранялись. Для исправления этой ситуации был введен обработчик, отслеживающий элементы с автоматическим завершением и нажатия кнопки мыши. Ввод с автоматическим завершением записывается по срабатыванию этого обработчика. Дополнительно существует возможность редактирования списка записей для добавления информации о видео: заголовка, описания, длительности. Дополнительно существует возможность добавления во встраиваемый модуль кнопок для обратного преобразования и удаления PDF-файлов и удаления записей.
[00174] На рис. 11-16 показаны примерные виды снимков экранов, представляющие идеи изобретения, описываемые в данном документе. На рис. 11 изображена программа «Recorder Extension», которая устанавливается в браузер и позволяет пользователю контролировать процесс записи и управлять настройками. На рис. 12А и 12В изображен HTML-проигрыватель «HTML Player». На рис. 12А изображен проигрыватель «Player» (его веб-версия), воспроизводящий содержимое, которое сохранилось на удаленном сервере. Временная шкала и элементы управления позволяют пользователю управлять процессом воспроизведения. На рис. 12В показана программа воспроизведения «Replay» с видеотрансляцией с веб-камеры. Видеотрансляция зафиксирована в верхней части веб-страницы. Видео и звук синхронизированы с действиями пользователя на веб-странице. На рис. 13 изображен HTML-редактор «HTML Editor» (его веб-версия), позволяющий пользователю изменять содержимое веб-страницы, а также веб-камеру и звук. На рис. 14 изображена автономная версия программы записи «Layers Recorder» для записи программ, выполняемых на компьютерах на базе операционной системы OS X (в данном примере). Выходные данные записываются в формате проекта «Final Cut» (набор файлов в директориях с файлами «.plist» и файлом «.fcpx»), где каждый элемент пользовательского интерфейса записываемого окна (записываемых окон) представляет собой отдельный файл. На рис. 15А и 15В изображен редактор «Layers Editor», в частности на рис. 15А изображена автономная версия редактора, позволяющая пользователям редактировать каждый отдельный слой, например элемент пользовательского интерфейса из захваченного окна. Прорисовка программой всех слоев осуществляется только в случае изменения свойств элементов (не с течением времени). На рис. 15В изображен редактор «Editor» (автономная версия), в котором опция «Record typing» позволяет пользователю записывать печать с
клавиатуры. В процессе записи сохраняются интервалы между вводом каждого символа и удаления символов. На рис. 16 изображен проигрыватель «Layers Player» (его веб-версия), воспроизводящий формат, сформированный автономной версией программы записи и используемый автономной версией редактора.
[00175] Согласно рис. 10 иллюстративный вариант осуществления изобретения состоит из системы, включающей вычислительное устройство общего назначения, представляющее собой сервер (20) или схожую реализацию, состоящую из процессора (21), системной памяти (22) и системной шины (23), объединяющей различные компоненты системы, в том числе системную память и центральный процессор (21).
[00176] Системная шина (23) может быть реализована в виде любого из нескольких типов шин, включающих шину памяти или контроллер памяти, шину периферийных устройств и локальную шину данных любой архитектуры. Системная память состоит из постоянного запоминающего устройства (ПЗУ) (24) и оперативного запоминающего устройства (ОЗУ) (25). Базовая система ввода-вывода (BIOS) (26) представляет собой набор стандартных микропрограмм, способствующих передаче информации между элементами в сервере (20), например, при начальной загрузке системы, и хранится в ПЗУ (24).
[00177] Сервер (20) может дополнительно включать НЖМД (27) для чтения с жесткого диска и записи на него (не показан), НГМД (28) для чтения со сменных магнитных носителей и записи на них (29) и оптический дисковод (30) для чтения с оптических дисков и записи на них (31), включая CD-ROM, DVD-ROM и другие оптические носители. НЖМД (27), НГМД (28) и оптический дисковод (30) подключаются к системной шине (23) посредством интерфейса НЖМД (32), интерфейса НГМД (33) и интерфейса оптического дисковода (34) соответственно. Дисководы и накопители и используемые ими носители, с которых сервер может читать данные, обеспечивают энергонезависимое хранение серверных инструкций, структур данных, программных модулей и прочих данных, предназначенных для сервера (20).
[00178] Хотя в описании, приведенном в данном документе, иллюстративная среда задействует НЖМД, НГМД (29) и оптический дисковод (31), специалистам в данной области техники должно быть понятно, что сервер в иллюстративной рабочей среде также может
использовать и другие совместимые с ним типы носителей информации, такие как кассеты с магнитной лентой, флеш-карты памяти, DVD, картриджи Бернулли, ОЗУ, ПЗУ и пр.
[00179] НЖМД, НГМД (29), оптические дисководы (31) ПЗУ (24) или ОЗУ (25) могут вмещать ряд программных модулей, включая операционную систему (35). Сервер (20) включает файловую систему (36), совместимую с операционной системой или встроенную в операционную систему (35), одну или несколько прикладных программ (37), прочие программные модули (38) и данные программ (39). Ввод данных и команд пользователем в сервер (20) осуществляется посредством клавиатуры (40) и манипулятора (42). В числе прочих устройств ввода (не показаны) могут быть микрофон, джойстик, геймпад, спутниковая тарелка, сканер и пр.
[00180] Эти и другие устройства ввода часто подключаются к процессору (21) через интерфейс с последовательным портом (46), подключенным к системной шине, но эти устройства также можно подключать через другие интерфейсы, такие как параллельный порт, порт подключения игрового манипулятора или универсальная последовательная шина (USB). Монитор (47) или иной тип устройства отображения также подключаются к системной шине (23) через интерфейс, например видеоадаптер (48). Кроме того, помимо монитора (47), персональные серверы обычно оборудуются некоторыми другими периферийными устройствами вывода (не показаны), например, громкоговорителями и принтерами.
[00181] Сервер (20) может работать в сетевом окружении, используя логические подключения к одному или нескольким удаленным серверам (49). Удаленный сервер (или серверы) (49) может быть другим сервером, сервером, маршрутизатором, компьютером в сети, одноранговым устройством или иным стандартным сетевым узлом и обычно может включать многие или все описанные выше компоненты сервера (20), однако в документе приведено изображение только устройства памяти (50). В число логических соединений входит локальная сеть LAN (51) и глобальная сеть WAN (52). Такие сетевые окружения типичны для офисов, серверных сетей предприятий, Интранета и Интернета.
[00182] При использовании в сетевой среде LAN сервер (20) подключается к локальной сети (51) через сетевой интерфейс или адаптер (53). Для подключения сервера (20) к глобальной сети WAN обычно используется модем (54) или иное средство, способное устанавливать соединение с глобальной сетью WAN (52), например с Интернетом.
[00183] Модем, внутренний или внешний, (54) подключается к системной шине (23) через интерфейс с последовательным портом (46). В сетевой среде программные модули, изображенные применительно к серверу (20), или их часть могут храниться на внешнем устройстве памяти. Понятно, что показанные сетевые подключения являются иллюстративными и возможно применение любых других способов установления связи между серверами.
[00184] Для специалистов в данной области техники из приведенного описания предпочтительного варианта осуществления изобретения очевидно, что описанные способ и устройство обладают рядом преимуществ. Также должно быть понятно, что в рамках объема и сущности настоящего изобретения возможны различные модификации, адаптации и альтернативные варианты осуществления изобретения. Изобретение определяется формулой, приведенной далее.
1. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере, включающий:
запуск процесса записи пользовательских действий на компьютере; формирование записи пользовательских действий, причем запись включает события мыши и визуальные события;
в которой пользовательские действия хранятся как серия кадров, каждое приложение, с которым взаимодействует пользователь, имеет папку с номерами кадров, а каждый кадр содержит иерархию сохраняемых объектов; сохранение записи в сценарий;
присвоение уникальных идентификаторов элементам программного обеспечения; получение исходного состояния программного обеспечения; осуществление захвата событий, соответствующих действиям пользователя на компьютере; отправку записи на сервер;
преобразование PDF-файла на сервере, включая покадровое преобразование HTML-видео в PDF-файлы, используя PhantomJS (виртуальный браузер без графической оболочки) и CasperJS (встраиваемый модуль для PhantomJS);
предоставление интерфейса для редактирования записи, сохраненной на сервере, причем редактирование включает изменение объектов, элементов, текста или изображений, сохраненных в записи; открытие окна браузера и воспроизведение отредактированной записи при запросе пользователя на воспроизведение записи; отличающийся тем, что указанные события сохраняются в формате «JavaScript Object Notation» (JSON)
2. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором редактируют запись, которая хранится локально на компьютере пользователя.
3. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором объект перерисовывается в ключевых кадрах таким образом, что воспроизводится его внешний вид.
4. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором каждый объект в иерархии содержит метаданные, описываемые в перечне, и в котором метаданные принадлежат одному из четырех типов: «image» («изображение»), «graphics» («графика»), «text» («текст») или «group» («группа»).
5. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 4, в котором при выборе пользователем дочернего объекта осуществляется выбор сгруппированного объекта.
6. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором запись осуществляется во встраиваемом модуле браузера.
7. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором в папке «Mouse» («Мышь») хранятся движения курсора мыши и в котором для каждого кадра создается файл PLIST, содержащий координаты курсора мыши, тип и размер курсора и флаг, отображающий, была нажата кнопка мыши в данном кадре или нет.
8. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором все движения курсора мыши, сохраненные во время сеанса, размещаются в папке «Mouse» («Мышь»).
9. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором запись также содержит видео.
10. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором запись также включает аудио- и видеозапись, полученные с устройства видеоввода компьютера.
11. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором действия пользователя включают в себя любые из следующих действий пользователя: события мыши; события прокрутки страницы или элемента; ввод текста в поле ввода; изменение значения в поле ввода; установка и потеря фокуса.
12. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором сериализированный HTML-код хранится в JSON-массиве.
13. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий сохранение исходного состояния вебстраницы, отображаемой на компьютере в виде файлового объекта в JSON-массиве, при помощи следующих атрибутов: адрес веб-страницы в сети, HTML-код веб-страницы, атрибуты HTML-тега веб-страницы, ширина области отображения браузера, высота области отображения браузера, активный элемент, на который устанавливается фокус, и исходное положение бегунка полосы прокрутки страницы.
14. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором файловый объект включает временную шкалу, учитывающую любой атрибут пользовательского события: тип события, идентификатор события или время.
15. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий сохранение временной шкалы пользовательских действий в базе данных, которая затем сохраняется на сервере.
16. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором после подготовки всех PDF-файлов сервер архивирует их.
17. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий быструю перемотку вперед и (или) назад на основе вкладок.
18. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий быструю перемотку вперед и (или) назад по временной шкале.
19. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий запись видео с веб-камеры и звука с микрофона, включая предварительное чтение настроек программы записи перед осуществлением записи.
20. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий добавление временной шкалы в запись.
21. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, дополнительно включающий автоматическое завершение записи.
22. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором взаимодействуют с установленными приложениями, которые хранятся в локальной папке пользователя.
23. Способ записи, редактирования и воссоздания пользовательского сеанса на компьютере по п. 1, в котором при прорисовке слоев записи в редакторе эти слои прорисовываются только по факту внесения в какой-либо слой каких-либо изменений.
