Webm进度条问题分析与解决

介绍

当我们使用getUserMediaMediaRecorder等API生成的webm视频时,会发现最终的webm是无法拖动进度条的。除非使用FFmpeg把webm转成其他格式的视频文件,或者等webm视频播放完后,就可以拖动了。

分析

经过几个小时的排查,发现并不是MediaRecorder使用有问题,因为在网上找的其他demo生成的webm也都不行。

一开始把分析点放在了进度条那里,结果在网上没有搜到任何相关文章,尝试了各种关键词都不行。

后来想到,可以使用FFmpeg来对视频文件进行分析。于是使用ffprobe rebirth-demo.webm命令进行分析:

通过Webkit远程调试协议监听网页崩溃.

背景介绍

因为正在开发一个项目,而这个项目使用到了puppeteer,其中有个功能是在puppeteer打开的chrome里打开多个Tab,并进行管理。
虽然puppeteer可以打开多个网站,但是并不利于管理,所有我使用的是插件的方式,通过插件来打开多网站,并进行管理。

但是这里有个需求是,当网站崩溃时,我要做出一些操作。但是目前网上没有一个好的办法去监听当前网站是否崩溃。

可能有同学会说:puppeteer不是提供了一个page.on('error', fn)的方法,来进行监听么?

请注意上文中提到的,使用插件打开多个网站,puppeteer提供的方法只能对自己打开的网站起作用,没有使用puppeteer打开的网站,page.on('error', fn)方法无能为力。

使用Service Workers

这个方法是由我同事Haitao提出来的思路。

在当前网站上运行一个Service Workers,因为在运行的时候Service Workers会再启动一个单独的进程,当前网站和Service Workers是两个单独的进程。也就是说当网站崩溃时,并不影响Service Workers进程。所以可通过心跳检测来进行判断网站是否崩溃。

聊聊RxJS中的错误重试

前言

最近工作中有一个需求是:如果这个请求超时,则进行重试,且重试次数可配置。

首先我们发请求使用的库为:Axios,其处理请求的位置,是在 redux-observable 中的 epic 里。

那么如果要完成重试机制的话,有两种办法:

  • 在对 Axios 封装的函数里添加重试代码
  • epic 里,使用 RxJS 操作符进行重试。

关于 Axios 重试的,其实比较麻烦的,而且需要在原有封装好的函数里,继续添加重试代码,总感觉不太好。且维护起来也不太方便。于是那就使用 RxJS 操作符进行重试吧。本文代码将不会套用项目代码,而是重新写一个 Demo,方便理解。

JavaScript集成Sentry

Sentry-JavaScript

Sentry是一套用于捕获产品错误的开源项目,其下支持很多语言、框架。

这里就只阐述在前端JavaScript方向的处理操作

在我们公司之前的应用场景里,很多项目都是使用kibana来做信息统计。但是我们无法清楚的知道应用的运行状态是怎么样的。当某个客户在使用我们开发产品时,如果报错、崩溃。用户只能向客服寻求帮助,再交接给我们的开发人员进行复现、修复。其中因为不清楚具体的数据,开发人员是在复现时会非常的耗时。

Sentry的用途就是解决这一痛点问题,让开发人员快速准确的定位到问题的根源所在,以达到快速修复,让开发人员更注重于开发新的功能上面。减少时间资源上的浪费。

JavaScript

接入

因为Sentry使用的是一种Hook错误函数的技术,来达到捕获错误的目的,所以我们基本可以无损耗的接入到现有的项目中去。

下面是ReactSentry进行结合的一些基本步骤。

分析axios源码来找出无法使用all和spread等方法的原因

前言

如果你在使用axios的时候,是使用axios.create({})方法来进行创建axios的,那么你会发现你无法使用allspreadCancelCancelTokenisCancel方法。

我上网查了相关的问题,axios维护者们都是让你重新引入axios package来进行完成任务。我不喜欢这种方法,因为重新引入的话,那我的axios配置就会丢失,需要重新配置一遍,太过麻烦。

因为我们项目很多时候,不想使用默认的配置,想使用自定义设置的axios实例。比如设置基础URL和超时时间:

基于vue-simplemde实现图片拖拽、粘贴功能的一些思考

前言

项目使用的是vue框架,需要一个markdown的编辑框,就在npm上找了一下,发现simplemde挺不错的,由于我比较懒,就顺便在npm又搜了一下,找到了vue-simplemde这个package,那就开始使用它吧。

但是这个vue-simplemde不支持图片拖拽上传、粘贴上传,也不能说是因为这个vue-simplemde,因为vue-simplemde只是对simplemde的基础上封装成一个Vue插件。所以最后还是由于simplemde没有提供相关的功能,但是为了用户体验考虑,这个功能时必要的,除非不使用markdown编辑器。而去使用富文本编辑器,那样的话,项目很多的代码都要进行更改。所以就在网上查了文章,及在github上查了一些代码。下面将进行分析

对Promise增加统一操作扩展

前言

在ES6里,增加了Promise方法。而Promise的回调函数只有thencatch两种方法。

而后,Promise又添加了两种附加方法,当然需要自己去添加进去。

可以去看一下上文的链接去了解一下,或者去下面的链接,看下官方源码是如何实现的: donefinally

基于URLProtocol攻击的一些想法

浏览器调起本地应用的原理是URLProtocol技术,详情可以在

  1. http://www.cnblogs.com/wang726zq/archive/2012/12/11/UrlProtocol.html
  2. http://blog.csdn.net/zssureqh/article/details/25828683

里查看。

其中 在注册表的 [HKEY_CLASSES_ROOT]主键下,我们可以看到很多的URLProtocol

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×