V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  aryu  ›  全部回复第 1 页 / 共 1 页
回复总数  20
2022-09-14 17:36:00 +08:00
回复了 aryu 创建的主题 分享创造 为了这个开源项目,我们提前一年做了一个 B 站视频专栏
@PEax 不是的哈哈,可以看她的第一期自我介绍
2021-04-21 13:55:10 +08:00
回复了 aryu 创建的主题 分享创造 Storyteller: 无代码交互式教程编辑器
@cernard 目前没有看到和我们同样实现方式的。有一些同类品是基于视频或者动态网页( storyteller 会把网页完全静态化来保证演示的稳定性和无副作用)。
2021-04-20 10:36:02 +08:00
回复了 aryu 创建的主题 分享创造 Storyteller: 无代码交互式教程编辑器
@kxxoling storyteller 对 web 的录制、制作依赖的 rrweb 是我们设计和开发的开源库。团队现在也在做对小程序和原生移动端的前期研究,小程序目前看起来比较封闭,缺少一些关键 API,原生移动端应该可以实现一个 rrnative 。

上游解决之后,storyteller 就可以增加一种新的录制场景了。
已内推 2 人
假期即将结束~
@hooked 没有加班,下班后有些同学喜欢在办公室再看看文章讨论一下问题不算对吧。
2020-06-23 14:35:58 +08:00
回复了 aryu 创建的主题 分享创造 Syncit: 浏览器内的像素级屏幕分享和远程控制工具
@ragnaroks 延迟是一个可调的缓冲时间,缓冲可以让对端看起来更加流畅,因为可能会在缓冲期间对传输的数据做重试和排序。

网络传输的部分是插件化的,可以基于 websocket 也可以基于 WebRTC 。
2020-03-19 14:45:54 +08:00
回复了 oct16 创建的主题 分享创造 一个 HTML5 录屏器 🖥
楼主如果有兴趣把玩具做成生产可用的话,rrweb 非常欢迎贡献者的加入,我们也有计划在 4 月份迭代出一个包含了很多新功能的版本~

同时开源了 rrweb 的团队也在招聘中,在日常工作中也都是同样有挑战性和创造性的内容,有兴趣的同学欢迎发简历 eWFuemhlbkBzbWFydHguY29t
2020-03-19 14:38:15 +08:00
回复了 oct16 创建的主题 分享创造 一个 HTML5 录屏器 🖥
@rolitter scrimba 是一个 ad-hoc 的实现,如果录制的目标是编辑器这样的场景的话,就可以设计出更高效的快照和 op-log 数据结构。
2019-10-30 23:29:20 +08:00
回复了 dadaslele 创建的主题 求职 [前端] [北京] 求前端开发的岗位~
2019-03-31 10:34:18 +08:00
回复了 aryu 创建的主题 分享创造 聊聊我们开源的 web 录制与回放库: rrweb
@guyskk0x0 游戏机的例子是借用的一个开源的实现,基于 HTML 的。

canvas 目前没有处理,理论上可以通过 monkey patch 一些 canvas 的 API 来实现一个 canvasObserver,不过对 canvas 不太熟悉不确定是否可行。d3 如果是 SVG 的部分录制起来是没问题的,需要在给元素打快照的时候判断是否需要增加 SVG namespace。

比如哪些事件无法回放呢?我们现在的实现思路是视觉上的逻辑回放,所以只需要回放会对视觉产生影响的事件,其它的 JS 逻辑本身也不会回放,但是对 DOM 的改变会被录制下来。比较特殊的是 hover 没法用 JS 模拟,所以这部分我们通过增加一些 CSS 规则和控制样式类的添加 /移除来模拟。
@xichengh
前端主要负责产品内 web console 的开发,同时负来负责一些内部系统。开发过程中产出的一些通用前端工具我们也会开源出来。

技能上需要熟练使用 Typescript 或者能编写高质量的 Javascript 代码,有目前主流前端框架的使用经验。
除此之外对任何 web 相关领域有深入研究都可以作为加分项来试一试~

简历发给 LZ 就行
2019-01-04 09:57:11 +08:00
回复了 autoxbc 创建的主题 JavaScript 我猜很多人都没真的用过 MutationObserver
排版好像出了些问题,我放在一个 gist 里了
https://gist.github.com/Yuyz0112/005e11735056f0bc992ce821e48647e1
2019-01-04 09:53:14 +08:00
回复了 autoxbc 创建的主题 JavaScript 我猜很多人都没真的用过 MutationObserver
例子里面的打印不是很有利于观察实际发生的情况,我稍微修改了一下,增加了每次 callback 触发的打印和遍历 added node 时具体的 node 的打印。

```
<!DOCTYPE html>

<head>
<script>
const callback = mttns => {
console.log('callback here')
mttns.forEach(mttn => {
[...mttn.addedNodes].forEach(node => {
if (node.nodeType !== 1)
return;

console.log('added element type node', node)
if (node.querySelector('div p')) {
console.log('[found with selector "div p"]');
}
if (node.querySelector('div a')) {
console.log('[found with selector "div a"]');
}
});
});
};
const opts = { childList: true, subtree: true };
new MutationObserver(callback).observe(document, opts);
</script>
</head>

<body>
<div>
<p></p>
<script></script>
<a></a>
</div>
</body>

</html>
```

MutationObserver 的核心机制是“异步 + 批量”,主要是处于性能考虑,不过在使用上是容易造成一些误解。改动后的代码打印结果如下:

```
>>> callback here
added element type node <body>​…​</body>​
[found with selector "div p"]
added element type node <div>​…​</div>​
[found with selector "div p"]
added element type node <p>​</p>​
added element type node <script>​</script>​
>>> callback here
added element type node <a>​</a>​
```

可以看到以下现象:
1. 总共产生了两次 callback
2. 第一次 callback 添加了 body, div, p, script 四个 element node
3. 第二次 callback 添加了 a 这一个 element node
4. 如果你调整 script 标签的位置,你会发现 script 结束会立即触发一次 callback,这可能和 MutationObserver 具体的实现规则有关。

所以实际发生的情况是当第一次 callback 触发时,由于是异步的,所以第一次 callback 内包含的 4 个新增 node 已经存在于 DOM 中,query 'div p' 是可以查询到的,但是 a node 还没有插入,所以此时查询不到。
第二次 callback 时 a node 单独被插入,但是也不符合 'div p' 和 'div a' 的 query 规则,所以不触发打印。

MutationObserver 的异步批量回调机制确实需要比较细致的处理,最近开源的一个项目里也在一段[设计文档]( https://github.com/rrweb-io/rrweb/blob/master/docs/observer.zh_CN.md#%E6%96%B0%E5%A2%9E%E8%8A%82%E7%82%B9)里描述了一些这个机制导致的问题。
2018-07-13 21:55:17 +08:00
回复了 firhome 创建的主题 程序员 这个前端录屏原理是怎么实现的?有大佬知道吗?
不确定 fundebug 是怎么做的,不过看原理应该和国外一个很成熟的产品 logrocket 中的回放功能类似。

首先这类功能一般是为了用户行为追踪或者捕获异常前的操作信息,以 sdk 的形式集成到用户的应用中。
因此侵入性强、计算消耗大、网络开销多的方案都是不可能产品化的,上面讨论的 canvas 方案基本也就不可能。

具体来说可以把这个过程看作是 DOM 快照链。

第一步:对界面 DOM 进行一次全量快照。这一步还包括样式的收集、js 脚本的去除等,并通过一定的规则给当前的每个 DOM 元素标记一个 id。

第二步:监听所有可能对界面产生影响的事件,例如各类鼠标事件、输入事件、滚动事件、缩放事件等等,每个事件都记录 payload 和 target,target 是某个 DOM 元素的话就记录为第一步中的 id,这样比记录一个 css selector 数据量要小不少,同时还会定时获取鼠标的绝对坐标,有变化时也记录为一个事件。这样的每一次变化事件可以记录为一次增量的快照。

第三步:一些优化处理,比如浏览器端存一定量的增量快照后再一起发送到服务端,减少网络开销;也包括多次增量之后再进行一次全量,对齐真实状态。

第四步:再后台观看“录制”的时候,其实就是先用全量快照渲染出界面,然后顺着快照链走,按照时间戳把对应的修改重放到页面上,就形成了像视频一样的回放。

以上是我看 logrocket 的视频并且试用,然后逆向了一小部分 sdk 代码之后的分析,仅供参考。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1243 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 24ms · UTC 18:03 · PVG 02:03 · LAX 11:03 · JFK 14:03
Developed with CodeLauncher
♥ Do have faith in what you're doing.