content.js
3.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
// 这是会插入网页运行的代码
const $videos = [...document.querySelectorAll('video')];
// todo: 支持同一页面多个视频
// $videos.map(($v, idx) => {
// const $tag = document.createElement('div');
// const $par = $v.parentNode;
// $tag.innerText = `点击 ${idx+1} 录制`;
// $tag.style = `
// position: absolute;
// top: 0;
// left: 0;
// z-index: 9999;
// width: ${$v.offsetWidth}px;
// height: ${$v.offsetHeight}px;
// line-height: ${$v.offsetHeight}px;
// text-align: center;
// color: red;
// font-size: ${$v.offsetWidth/10}px;
// font-weight: bold;
// border: 5px solid red;
// box-sizing: border-box;
// `;
// $par.style.position = 'relative';
// $v.parentNode.appendChild($tag);
// $tag.addEventListener('click', () => {
// $tag.remove();
// startRecording($v);
// return ;
// });
// });
const $target = $videos[0];
$target && $target.addEventListener('playing', () => {
// muted video 不触发 captureStream
// $target.muted = true;
$target.volume = 0.01;
if($target.isRecording){
return ;
}
$target.isRecording = true;
// 很多视频开头有小动作，比如帮你拖拽进度条，可能会延迟触发或多次触发，所以我们要加个延时
setTimeout(() => {
console.log('Video Recorder started...');
startRecording($target);
}, 5000);
});
function startRecording($tar){
const mimeType = 'video/webm';
const recorder = new MediaRecorder($tar.captureStream(), {
mimeType
});
recorder.onstart = function(e){
// console.log('start', e);
};
recorder.ondataavailable = function(e){
// console.log('ondata', e);
// const blob = new Blob([e.data], {
// type: mimeType
// });
sendBlobData(e.data);
};
recorder.onstop = function(e){
endBlobData();
// console.log('stoped', e);
// 不能成功，因为有些页面视频播完会刷新到下一个视频
// const blob = new Blob(chunks, {
// 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);
};
recorder.onerror = function(e){
// console.log('errored', e);
};
// 重置播放时间
$tar.currentTime = 0;
recorder.start(1000);
$tar.onended = function(e){
stopRecorder(recorder);
};
$tar.oncomplete = function(e){
stopRecorder(recorder);
};
window.onbeforeunload = function(e){
stopRecorder(recorder);
};
};
function sendBlobData(blobData){
const fr = new FileReader();
fr.onload = function(ev){
chrome.runtime.sendMessage({
data: fr.result,
size: blobData.size,
mimeType: blobData.type,
name: document.title,
action: 'data'
}, response => {
// console.log("Response: ", response);
});
};
fr.onerror = function(ev){
console.log('FileReader error', ev);
};
fr.readAsBinaryString(blobData);
};
function endBlobData(){
chrome.runtime.sendMessage({
data: '',
size: 0,
mimeType: '',
name: '',
action: 'end'
}, response => {
// console.log("Response: ", response);
});
};
function stopRecorder(recorder){
if(recorder.state === 'recording'){
recorder.stop();
}
};