Webm进度条问题分析与解决

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

分析

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

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

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

$ ffprobe rebirth-demo.webm
ffprobe version 4.1.3 Copyright (c) 2007-2019 the FFmpeg developers
  built with Apple LLVM version 10.0.1 (clang-1001.0.46.4)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, matroska,webm, from 'rebirth-demo.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1

关键点来了，可以发现其中： Duration 和 bitrate 的值都是 N/A ，这是不正常的，于是去搜一下 webm duration ，果然网上有很多的说明文章。

大体意思是，因为 getUserMedia 、 MediaRecorder 在生成webm时，并没有提供相关 Duration 和 bitrate 。导致出现这种问题。

解决方案

一、计算视频长度，分配给 `blob`

这种方法的核心就是，在 start 开始录制时，记录一个开始时间，然后在 stop 停止录制后，把当前时间与记录的开始时间相减，在把时间赋值给 blob 来解决这个问题。相关解决方案可见： fix-webm-duration

二、通过给audio标签一个很大的时间

在播放webm视频时，可以动态的给audio一个很大的时间，来解决这个问题，但是目前只针对 chrome 有效。相关解决方案可见： How can I add predefined length to audio recorded from MediaRecorder in Chrome?

三、跳到结尾，再跳到开头

因为上文说过，当视频播放完后，就可以拖动了，那么只需要通过 JS 来控制当前的视频位置就可以解决了。相关解决方案可见： hello-its-me

四、通过ffmpeg来解决

第一个解决的命令如下： ffmpeg -i rebirth-demo.webm xixi.webm ，但是这个命令会很漫长，不太推荐。30秒的视频，需要花费3分钟左右的时间。

第二个命令是： ffmpeg -i rebirth-demo.webm -vcodec copy -acodec copy new_rebirth-demo.webm 。这个十分的快，因为本身是直接复制，而不是转化：

ffmpeg -i rebirth-demo.webm  -vcodec copy -acodec copy new_rebirth-demo.webm
ffmpeg version 4.1.3 Copyright (c) 2000-2019 the FFmpeg developers
  built with Apple LLVM version 10.0.1 (clang-1001.0.46.4)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, matroska,webm, from 'rebirth-demo.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1
Output #0, webm, to 'new_rebirth-demo.webm':
  Metadata:
    encoder         : Lavf58.20.100
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1920x1080 [SAR 1:1 DAR 16:9], q=2-31, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1
    Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
Stream mapping:
  Stream #0:1 -> #0:0 (copy)
  Stream #0:0 -> #0:1 (copy)
Press [q] to stop, [?] for help
frame= 3589 fps=0.0 q=-1.0 Lsize=    2107kB time=00:01:59.92 bitrate= 143.9kbits/s speed=4.75e+03x
video:2053kB audio:16kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 1.849351%

$ ffprobe new_rebirth-demo.webm
ffprobe version 4.1.3 Copyright (c) 2007-2019 the FFmpeg developers
  built with Apple LLVM version 10.0.1 (clang-1001.0.46.4)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, matroska,webm, from 'new_rebirth-demo.webm':
  Metadata:
    ENCODER         : Lavf58.20.100
  Duration: 00:01:59.96, start: 0.000000, bitrate: 143 kb/s
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      ALPHA_MODE      : 1
      DURATION        : 00:01:59.928000000
    Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Metadata:
      DURATION        : 00:01:59.955000000

可见已经没有问题了

总结

我个人倾向于最后一种，因为前面几个方法并没有实际性解决这个问题。

这个问题，是 Chrome Bug 。目前社区也在讨论，但是到目前为止还没有任何修复的方案。

社区讨论地址： https://bugs.chromium.org/p/chromium/issues/detail?id=642012

作者信息：

Author: Black-Hole
Blog:http://bugs.cc/
github: https://github.com/BlackHole1/
Twitter: https://twitter.com/Free_BlackHole
Email: [email protected]

分析

解决方案

一、计算视频长度，分配给 `blob`

二、通过给audio标签一个很大的时间

三、跳到结尾，再跳到开头

四、通过ffmpeg来解决

总结

作者信息：

Recommend

JavaScript 编码规范

教你使用简单神经网络和LSTM进行时间序列预测（附代码）

为什么 Python 不用设计模式？

波卡如何解决区块链创新的大难题？

520 | 程序员10分钟硬核表白教程！

Tutorial: Use FlatBuffers in Rust

Spring Cloud Alibaba基础教程：Sentinel Dashboard中修改规则同步到Nacos

MongoDB 踩坑记录（可能会持续更新）

Ten cognitive biases to look out for as a developer

Jetpack Compose 开源：基于 Kotlin 的响应式编程方案，简化 UI 开发

About Joyk

Webm进度条问题分析与解决

分析

解决方案

一、计算视频长度，分配给 blob

二、通过给audio标签一个很大的时间

三、跳到结尾，再跳到开头

四、通过ffmpeg来解决

总结

作者信息：

Recommend

About Joyk

一、计算视频长度，分配给 `blob`