-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (68 loc) · 2.37 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=480">
<title>屏幕录制 SCREEN RECORDER</title>
</head>
<body>
<div>
<h1>屏幕录制</h1>
<p>
<video id="stream" width="480px" height="320px" controls></video>
</p>
<p>
<button id="start-record" type="button" onclick="vid.record()">录制 REC</button>
<button id="stop-record" type="button" onclick="vid.stoprecord()">停止录制 STOP</button>
</p>
<p>
<a id="download"></a>
</p>
<p id="footnote">
<a href="https://github.com/kaala/recordapp">github</a>
</p>
</div>
<style>
/* * { outline: 1px dotted #f0f; } */
body { margin: 0px; padding: 0px; }
div { margin: 10px auto; width: 480px; }
p { font-family: monospace; }
button { display: inline-block; padding: 5px 10px; margin-left: 10px; }
</style>
<script>
var vid = {}
var rec = { video: { width: { ideal: 1920 }, height: { ideal: 1080 }, }, audio: {}, }
vid.record = function () {
navigator.mediaDevices.getDisplayMedia(rec).then(function (stream) {
var data = []
var media = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp9" })
media.onstop = function (e) {
var blob = new Blob(data, { type: 'video/webm' })
var url = URL.createObjectURL(blob)
var preview = document.querySelector('video#stream')
preview.src = url
var down = document.querySelector('a#download')
down.innerHTML = url
down.href = url
down.download = `record-${stream.id}.webm`
down.click()
}
media.ondataavailable = function (e) {
data.push(e.data)
}
stream.oninactive = function (e) {
media.stop()
}
media.start()
vid.data = data
vid.media = media
vid.stream = stream
})
}
vid.stoprecord = function () {
var media = vid.media
media.stop()
};
</script>
</body>
</html>