-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (57 loc) · 2.1 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
<!DOCTYPE html>
<html>
<head>
<title>Webcam Recorder</title>
</head>
<body>
<button id="start">Start Recording</button>
<button id="stop">Stop Recording</button>
<video id="video" width="640" height="480" autoplay></video>
<script>
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const video = document.getElementById('video');
let recorder;
let recordedChunks = [];
startButton.onclick = async() => {
recordedChunks = [];
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
recorder = new MediaRecorder(stream);
recorder.ondataavailable = (e) => {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
};
recorder.onstop = async () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const file = new File([blob], 'recording.webm', { type: 'video/webm' });
const formData = new FormData();
formData.append('video', file);
const response = await fetch('/upload', { method: 'POST', body: formData });
if (response.ok) {
const recordedVideo = document.createElement('video');
recordedVideo.src = URL.createObjectURL(blob);
recordedVideo.controls = true;
recordedVideo.width = 640;
recordedVideo.height = 480;
document.body.appendChild(recordedVideo);
} else {
console.error('Error uploading video');
}
// Release the resources associated with the MediaRecorder object
recorder.stream.getTracks().forEach(track => track.stop());
recorder = null;
recordedChunks = [];
};
recorder.start();
};
stopButton.onclick = () => {
if(recorder.state === 'inactive') return;
console.log('stop recording');
//
recorder.stop();
//release all resources acquired by the recorder so the camera turns off
};
</script>
</body>
</html>