-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (98 loc) · 2.52 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
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
<html>
<head>
<script>
var recorder, videoElem;
var continueRecording = true;
function startRecording() {
continueRecording = true;
recorder.start();
window.setTimeout(function(){
recorder.stop();
if (continueRecording) {
startRecording();
}
}, getDelay() * 1000);
}
function stopRecording() {
continueRecording = false;
videoElem.pause();
videoElem.src = "";
}
function increaseDelay() {
var currentDelay = getDelay();
setDelay(currentDelay + 1);
}
function decreaseDelay() {
var currentDelay = getDelay();
if (currentDelay > 0) {
setDelay(currentDelay - 1);
}
}
function getDelay() {
return parseInt(document.getElementById("delay-value").textContent);
}
function setDelay(delay) {
document.getElementById("delay-value").textContent = delay;
}
function initRecorder() {
var constraints = window.constraints = {
audio: false,
video: true
};
navigator.mediaDevices.getUserMedia(constraints).then(function(liveStream) {
recorder = new MediaRecorder(liveStream);
recorder.ondataavailable = function(event) {
if (continueRecording) {
videoElem.src = URL.createObjectURL(event.data);
videoElem.play();
}
};
});
}
window.onload = function() {
document.getElementById("start-btn").addEventListener('click', startRecording);
document.getElementById("stop-btn").addEventListener('click', stopRecording);
document.getElementById("increase-btn").addEventListener('click', increaseDelay);
document.getElementById("decrease-btn").addEventListener('click', decreaseDelay);
videoElem = document.querySelector('video');
// Request access to the camera
initRecorder();
}
</script>
<style type="text/css">
video {
width: 100%;
}
.container {
min-height: 80vh;
display: flex;
flex-direction: column;
}
.video-container {
flex-grow: 1;
}
.controls-container {
font-size: 5em;
}
button {
margin: 0 15px;
font-size: inherit;
}
.delay-control {
padding: 0 10px;
}
</style>
</head>
<div class="container">
<div class="video-container">
<video></video>
</div>
<div class="controls-container">
<button id="increase-btn" class="delay-control">+</button>
<span id="delay-value">10</span>s
<button id="decrease-btn" class="delay-control">-</button>
<button id="start-btn">Start</button>
<button id="stop-btn">Stop</button>
</div>
</div>
</html>