<body>
<selection>
<video autoplay id="player"></video>
<video autoplay id="screen"></video>
<video id="recordPlayer"></video>
</selection>
<section>
<button id="startScreen">开启分享屏幕</button>
<button id="startCamera">开启摄像头</button>
<button id="stop">结束</button>
<button id="reply">回放</button>
<button id="download">下载</button>
<button id="REC">开启录屏</button>
</selection>
<script>
const player = document.querySelector('#player');
const screen = document.querySelector('#screen');
const recordPlayer = document.querySelector('#recordPlayer');
const REC = document.querySelector('#REC');
let streamre = {}
let blobs = [],
mediaRecorder;
async function record(recordType) {
const getMediaMethod = recordType === 'screen' ? 'getDisplayMedia' : 'getUserMedia';
console.log(getMediaMethod);
const stream = await navigator.mediaDevices[getMediaMethod]({
audio: true,
video: {
width: 1280,
height: 720,
frameRate: {
ideal: 100,
max: 150
}
}
});
if (recordType === 'screen') {
screen.srcObject = stream;
} else {
player.srcObject = stream;
}
return new Promise((res, rej) => {
res(stream)
streamre = stream
})
}
const downloadBtn = document.querySelector('#download');
const startScreenBtn = document.querySelector('#startScreen');
const startCameraBtn = document.querySelector('#startCamera');
const stopBtn = document.querySelector('#stop');
const replyBtn = document.querySelector('#reply');
startScreenBtn.addEventListener('click', () => { // 共享屏幕
record('screen')
});
REC.addEventListener('click', () => { // 录屏
mediaRecorder = new MediaRecorder(streamre, {
mimeType: 'video/webm'
});
mediaRecorder.ondataavailable = (e) => {
blobs.push(e.data);
};
mediaRecorder.start(100);
});
startCameraBtn.addEventListener('click', () => { // 摄像头
record('camera');
});
stopBtn.addEventListener('click', () => { // 结束录屏
mediaRecorder && mediaRecorder.stop();
console.log(blobs);
});
replyBtn.addEventListener('click', () => { // 回放
const blob = new Blob(blobs, {
type: 'video/webm'
});
recordPlayer.src = URL.createObjectURL(blob);
recordPlayer.play();
});
download.addEventListener('click', () => { // 下载
var blob = new Blob(blobs, {
type: 'video/webm'
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.style.display = 'none';
a.download = 'record.webm';
a.click();
});
</script>
</body>
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
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