feat: add download audio demo

xingwenliang
1 parent 99788557
Showing 4 changed files with 65 additions and 12 deletions
2022-07-14-video-recorder.md
background/background.js
content/audio_download.js
popup/popup.html
+---
+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
@@ -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];
     });
+// 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
@@ -7,17 +7,7 @@
 </head>
 <body>
-	<div class="tit">111将生词添加到我的有道单词本</div>
-	<div class="login-box hide">
-		<div class="username"><input type="text" id="username" placeholder="请输入用户名" autofocus="true"></div>
-		<div class="password"><input type="password" id="password" placeholder="请输入密码"></div>
-		<div class="login-btn"><button id="login">登录</button></div>
-	</div>
-
-	<div class="add-box hide">
-		<div class="vocab"><input id="vocab" type="text" placeholder="请输入想添加的单词" autofocus="true"></div>
-		<div class="save-btn"><button id="save">添加</button></div>
-	</div>
+	<div class="tit"><h1>VideoRecorder</h1></div>
 	<div class="msg" id="msg"></div>