Webm進度條問題分析與解決
介紹
當咱們使用getUserMedia、MediaRecorder等API生成的webm視頻時，會發現最終的webm是沒法拖動進度條的。除非使用FFmpeg把webm轉成其餘格式的視頻文件，或者等webm視頻播放完後，就能夠拖動了。git
分析
通過幾個小時的排查，發現並非MediaRecorder使用有問題，由於在網上找的其餘demo生成的webm也都不行。github
一開始把分析點放在了進度條那裏，結果在網上沒有搜到任何相關文章，嘗試了各類關鍵詞都不行。web
後來想到，可使用FFmpeg來對視頻文件進行分析。因而使用ffprobe rebirth-demo.webm命令進行分析：chrome
$ 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，果真網上有不少的說明文章。shell
大致意思是，由於getUserMedia、MediaRecorder在生成webm時，並無提供相關Duration和bitrate。致使出現這種問題。bash
解決方案
1、計算視頻長度，分配給blob
這種方法的核心就是，在start開始錄製時，記錄一個開始時間，而後在stop中止錄製後，把當前時間與記錄的開始時間相減，在把時間賦值給blob來解決這個問題。相關解決方案可見：fix-webm-durationapp
2、經過給audio標籤一個很大的時間
在播放webm視頻時，能夠動態的給audio一個很大的時間，來解決這個問題，可是目前只針對chrome有效。相關解決方案可見：How can I add predefined length to audio recorded from MediaRecorder in Chrome?ide
3、跳到結尾，再跳到開頭
由於上文說過，當視頻播放完後，就能夠拖動了，那麼只須要經過JS來控制當前的視頻位置就能夠解決了。相關解決方案可見：hello-its-mepost
4、經過ffmpeg來解決
第一個解決的命令以下：ffmpeg -i rebirth-demo.webm xixi.webm，可是這個命令會很漫長，不太推薦。30秒的視頻，須要花費3分鐘左右的時間。ui
第二個命令是：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。以前社區也討論過。
社區討論地址：bugs.chromium.org/p/chromium/…
做者信息：
- Author: Black-Hole
- Blog: bugs.cc/
- github: github.com/BlackHole1/
- Twitter: twitter.com/Free_BlackH…
- Email: 158blackhole@gmail.com
其餘
我司(愛樂奇)招人，感興趣的小夥伴能夠來投簡歷呀。
彈性工做制、每日水果、同事都特別nice、96五、團建、五險一金...
地點上海浦軟大廈
相關文章
- 1. 解決CentOS開機卡在進度條問題
- 2. CentOS 7無法啓動，在進度條卡死問題解決
- 3. 自定義進度條之圓角進度條問題
- 4. webm EBML文件頭分析
- 5. 分段進度條
- 6. Form紅色進度條問題
- 7. Android logcat解析與問題分析
- 8. 解決CentOS開機進度條卡死
- 9. vue 圓形進度條組件解析
- 10. mui進度條使用解析
- 更多相關文章...
- • Redis悲觀鎖解決高併發搶紅包的問題 - 紅包項目實戰
- • Redis樂觀鎖解決高併發搶紅包的問題 - 紅包項目實戰
- • PHP Ajax 跨域問題最佳解決方案
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 解決CentOS開機卡在進度條問題
- 2. CentOS 7無法啓動，在進度條卡死問題解決
- 3. 自定義進度條之圓角進度條問題
- 4. webm EBML文件頭分析
- 5. 分段進度條
- 6. Form紅色進度條問題
- 7. Android logcat解析與問題分析
- 8. 解決CentOS開機進度條卡死
- 9. vue 圓形進度條組件解析
- 10. mui進度條使用解析