From 0bdcc938aa0e3407567acb433d19c9b5fa7dc934 Mon Sep 17 00:00:00 2001 From: xingwenliang Date: Mon, 5 Sep 2022 18:48:25 +0800 Subject: [PATCH] feat: add download audio demo --- 2022-07-14-video-recorder.md | 28 ++++++++++++++++++++++++++++ background/background.js | 5 ++++- content/audio_download.js | 32 ++++++++++++++++++++++++++++++++ popup/popup.html | 12 +----------- 4 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 2022-07-14-video-recorder.md create mode 100644 content/audio_download.js diff --git a/2022-07-14-video-recorder.md b/2022-07-14-video-recorder.md new file mode 100644 index 0000000..2297242 --- /dev/null +++ b/2022-07-14-video-recorder.md @@ -0,0 +1,28 @@ +--- +layout: post +title: 视频录制 +# date 同时用作关联 github issue 的唯一标识，所以不可重复 +date: 2022-07-014 14:14:54+0800 +sync_link: https://xwenliang.cn/p/xx +categories: translation +# permalink: /xxx/ + +# https://jekyllrb.com/docs/structure/ +# name of this file show be in format of: YEAR-MONTH-DAY-title.MARKUP +--- + +最近有小伙伴花了大几千买了某视频网课的课程，快到期了还没看过，问我能不能下载到本地 + +先去 github 逛了一圈，发现有个叫做 CocoCut 的浏览器插件，可以下载视频，对于加密视频，只要能播放就能下载 + +试用后发现存在几个问题： + +1. 无法自动化，对于加密视频需要每次打开网页后点击插件弹出面板上一个叫做「force download」的按钮，跳转到其官网后打开 「Recording mode」, 此时播放视频的网页会刷新，然后开始录制，最后提供 mp4 格式的视频下载 + +2. 需要付费，只能免费下载几个小时的时长 + +既然它能做，那么咱们应该也可以。先了解下目前市面上常见的视频加密手段： + +1. 微软 DRM SDK, 浏览器兼容较差 + +保利威视 v12 加密，canvas+wasm \ No newline at end of file diff --git a/background/background.js b/background/background.js index 5cf3aaf..29c26fb 100644 --- a/background/background.js +++ b/background/background.js @@ -12,6 +12,7 @@ // test(); const videos = {}; +window.videos = videos; /** * data: fr.result, @@ -50,9 +51,11 @@ function download(id){ return ; } const blob = new Blob(tar.blob, {type: tar.mimeType}); + const ext = tar.mimeType.includes('webm') ? 'webm' : 'mkb'; + const filename = `${tar.name || 'anonymous'}.${ext}`; chrome.downloads.download({ url: URL.createObjectURL(blob), - filename: `${tar.name}.mkv` + filename }, resp => { delete videos[id]; }); diff --git a/content/audio_download.js b/content/audio_download.js new file mode 100644 index 0000000..59feb77 --- /dev/null +++ b/content/audio_download.js @@ -0,0 +1,32 @@ +// audio tag +const $tar = document.getElementById('audio_remote'); + +const mimeType = 'audio/webm'; +const recorder = new MediaRecorder($tar.captureStream(), { + mimeType +}); +recorder.onstart = function(e){ + console.log('start', e); +}; +recorder.ondataavailable = function(e){ + console.log('ondata', e); + saveBlobData(e.data); +}; +recorder.onstop = function(e){ + console.log('stop', e); +}; +recorder.start(1000); + +function saveBlobData(data){ + const blob = new Blob(data, { + type: mimeType + }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + document.body.appendChild(a); + a.style = 'display: none'; + a.href = url; + a.download = document.title; + a.click(); + window.URL.revokeObjectURL(url); +}; \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html index 04efff6..f7767ea 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -7,17 +7,7 @@ -
111将生词添加到我的有道单词本
-
-
-
- -
- -
-
-
-
+

VideoRecorder

-- libgit2 0.22.2