inspectlet 和其他服务如何存储用户视频会话?
How inspectlet and other services store user video sessions?
我想知道像 http://www.inspectlet.com/ 这样的服务是如何存储视频会话的。从外观上看,我不认为这是一个 webRTC 实现。我能够弄清楚的是,有一个活动的快速套接字正在进行通信,但在那种情况下,他们将不得不存储页面并跟踪来自 DOM 的所有事件。只是想确认这是他们正在遵循的方法。
看页面的事件监听器,好像绑定了很多。例如,<body>
具有绑定到函数的 scroll
、keyup
和 change
事件。我确定它还有 mousemove
、mouseclick
等。所有这些都可能存储在 Javascript 变量(可能是对象)中,然后每隔一段时间 AJAX 化为 http://hn.inspectlet.com/adddata 与数据参数。以下是发送内容的示例:
http://hn.inspectlet.com/adddata?d=mr,212941,46,337,46,1277)mr,213248,163,498,163,1438)mr,213560,144,567,144,1507)mr,213873,138,240,138,1180)mr,214188,169,184,169,1124)mr,214504,158,520,158,1460)mr,214816,231,487,231,1427)mr,215130,329,197,329,1137)mr,215444,894,289,894,1229)mr,215755,903,295,903,735)s,215755,440,0)&w=259769975&r=494850609&sd=1707&sid=1660474937&pad=3&dn=dn&fadd=false&oid=99731212&lpt=212629
正如 Adam 的回答中所建议的那样,他们跟踪页面中的许多事件并通过 websocket 或 post/get 请求 (XHR) 将它们发送到他们的服务器。
我不确定 inspectlet 具体做了什么,但总的来说,这样的解决方案需要遵循以下一般步骤:
当页面完全加载时(可能挂钩 DOMContentLoaded),他们会将页面数据发送到服务器。然后他们还挂钩 MutationObserver 以跟踪页面中 DOM 的所有更改,因此当某些内容动态更改时,跟踪脚本可以 'record' 它并将其发送到服务器。
反过来,SaaS 应用程序将有一个播放器来解析所有这些原始数据然后回放,这通常需要使用一些虚拟文件系统来获取资产(图像、css、脚本)并处理 js 脚本以不 post 再次返回(重播 xhr 将对跟踪的网站产生不良结果)但在捕获(记录)时播放突变
关于数据 HTML 页面压缩得非常好,尤其是当您可以对数据做出假设时(因为您知道它 html)- 所以是的,它们实际上缓存了很多(类似google 在这方面做了什么,但 google 是为整个网络做的,而不仅仅是 'customers')
DOM 突变也需要存储。这取决于算法,它可以存储为纯文本或使用更智能的数据模型,将它们存储为纯文本显然不是成本有效的解决方案。
以上是一个抽象,有许多边缘情况需要处理以实现这样的解决方案以及大量关于热图的数学和算法思考使它们准确。
因此,经过长时间的搜索,我们终于找到了一个新的有前途的解决方案,它解决了构建此类服务的所有复杂部分。它仍在开发中,但它解决了这个问题。下面是link,
我想知道像 http://www.inspectlet.com/ 这样的服务是如何存储视频会话的。从外观上看,我不认为这是一个 webRTC 实现。我能够弄清楚的是,有一个活动的快速套接字正在进行通信,但在那种情况下,他们将不得不存储页面并跟踪来自 DOM 的所有事件。只是想确认这是他们正在遵循的方法。
看页面的事件监听器,好像绑定了很多。例如,<body>
具有绑定到函数的 scroll
、keyup
和 change
事件。我确定它还有 mousemove
、mouseclick
等。所有这些都可能存储在 Javascript 变量(可能是对象)中,然后每隔一段时间 AJAX 化为 http://hn.inspectlet.com/adddata 与数据参数。以下是发送内容的示例:
http://hn.inspectlet.com/adddata?d=mr,212941,46,337,46,1277)mr,213248,163,498,163,1438)mr,213560,144,567,144,1507)mr,213873,138,240,138,1180)mr,214188,169,184,169,1124)mr,214504,158,520,158,1460)mr,214816,231,487,231,1427)mr,215130,329,197,329,1137)mr,215444,894,289,894,1229)mr,215755,903,295,903,735)s,215755,440,0)&w=259769975&r=494850609&sd=1707&sid=1660474937&pad=3&dn=dn&fadd=false&oid=99731212&lpt=212629
正如 Adam 的回答中所建议的那样,他们跟踪页面中的许多事件并通过 websocket 或 post/get 请求 (XHR) 将它们发送到他们的服务器。
我不确定 inspectlet 具体做了什么,但总的来说,这样的解决方案需要遵循以下一般步骤:
当页面完全加载时(可能挂钩 DOMContentLoaded),他们会将页面数据发送到服务器。然后他们还挂钩 MutationObserver 以跟踪页面中 DOM 的所有更改,因此当某些内容动态更改时,跟踪脚本可以 'record' 它并将其发送到服务器。
反过来,SaaS 应用程序将有一个播放器来解析所有这些原始数据然后回放,这通常需要使用一些虚拟文件系统来获取资产(图像、css、脚本)并处理 js 脚本以不 post 再次返回(重播 xhr 将对跟踪的网站产生不良结果)但在捕获(记录)时播放突变
关于数据 HTML 页面压缩得非常好,尤其是当您可以对数据做出假设时(因为您知道它 html)- 所以是的,它们实际上缓存了很多(类似google 在这方面做了什么,但 google 是为整个网络做的,而不仅仅是 'customers')
DOM 突变也需要存储。这取决于算法,它可以存储为纯文本或使用更智能的数据模型,将它们存储为纯文本显然不是成本有效的解决方案。
以上是一个抽象,有许多边缘情况需要处理以实现这样的解决方案以及大量关于热图的数学和算法思考使它们准确。
因此,经过长时间的搜索,我们终于找到了一个新的有前途的解决方案,它解决了构建此类服务的所有复杂部分。它仍在开发中,但它解决了这个问题。下面是link,