Name Last Update
background Loading commit data...
content Loading commit data...
lib Loading commit data...
popup Loading commit data...
2022-07-14-video-recorder.md Loading commit data...
README.md Loading commit data...
icon.png Loading commit data...
manifest.json Loading commit data...
package.json Loading commit data...

README.md

video 视频录制

使用方法:

打开chrome浏览器,在地址栏输入chrome://extensions/,打开后点击加载已解压的扩展程序,选择本项目目录即可安装成功。

TODO:

  1. 同个页面多个 video 处理
  2. 视频暂停时要暂停录制
  3. popup 增加录制提示,各种控制按钮,如静音录制、自动录制等等
  4. 在 client 端转为 MP4 格式的可行性
  5. 经常会失败,或录制不全
  6. 顶多可以同时开3个窗口录制,再多容易失败

问题记录

  1. 很多视频网站播放完后会刷新页面到下一个播放页面,导致 content.js 中对 video 标签的 end complete 事件的监听函数中的动作不能保证成功,同样页面的 beforeunload unload 事件监听函数中的动作也不能保证成功

  2. MediaRecorder 只能录制以下几种格式的视频:

Essentially, it looks like the following are (at time of writing) accepted MIME types for video/audio in Chrome:

video/webm
video/webm;codecs=vp8
video/webm;codecs=vp9
video/webm;codecs=vp8.0
video/webm;codecs=vp9.0
video/webm;codecs=h264
video/webm;codecs=H264
video/webm;codecs=avc1
video/webm;codecs=vp8,opus
video/WEBM;codecs=VP8,OPUS
video/webm;codecs=vp9,opus
video/webm;codecs=vp8,vp9,opus
video/webm;codecs=h264,opus
video/webm;codecs=h264,vp9,opus
video/x-matroska;codecs=avc1

audio/webm

audio/webm;codecs=opus
(EDITED 2019-02-10: Updated to include brianchirls' link find)  
  1. https://github.com/ffmpegwasm/ffmpeg.wasm 不能用于浏览器插件的 background, 报错:

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder). Build with -s ASSERTIONS=1 for more info.

manifest.json 加上 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", 仍然报错:

Refused to load the script 'blob:chrome-extension://nnodhmmdmobflnhbigcheclnhdfkidpf/71e2d139-c5f1-4991-bbc0-4748802aec2a' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

  1. content 和 background 通信无法直接传递 Blob 类型数据,但可以传递 URL.createObjectURL 创建的数据,localStorage 同样。可以使用 new FileReader().readAsBinaryString 解决

  2. muted video 不会触发 captureStream()

https://bugs.chromium.org/p/chromium/issues/detail?id=1136404