V2EX › aryu 的所有回复 › 第 1 页 / 共 1 页

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

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 就可以增加一种新的录制场景了。

2021-02-19 10:37:41 +08:00

回复了 aryu 创建的主题 › 酷工作 › [SmartX][北京/深圳/上海多职位研发/产品/设计社招]可能是最负责的内推

已内推 2 人

2021-02-17 14:18:37 +08:00

回复了 aryu 创建的主题 › 酷工作 › [SmartX][北京/深圳/上海多职位研发/产品/设计社招]可能是最负责的内推

假期即将结束～

2021-02-15 12:37:44 +08:00

回复了 aryu 创建的主题 › 酷工作 › [SmartX][北京/深圳/上海多职位研发/产品/设计社招]可能是最负责的内推

@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 创建的主题 › 求职 › [前端] [北京] 求前端开发的岗位～

https://m.zhipin.com/job_detail/e034cb90441df85b1HJ90960EFo~.html?ka=m_comp_joblist_1_blank&lid=439404ab-cbfb-4c6c-a5b3-67da76ff29f6.brand_jod_list

有兴趣的话可以投递

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 规则和控制样式类的添加 /移除来模拟。

2019-03-15 12:39:41 +08:00

回复了 Diaoshe 创建的主题 › 酷工作 › smartx 北京/深圳招分布式存储&&golang&&c++&& Python &&前端 &&web&&产品

@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 代码之后的分析，仅供参考。