-
Notifications
You must be signed in to change notification settings - Fork 5
/
video.js
108 lines (97 loc) · 3.43 KB
/
video.js
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
var img, backgroundImage, video, prompt1, prompt2, screenshot, download, select, label, clear;
var enable = false;
const canvas = document.createElement('canvas');
var format = '.png'
const init = () => {
hasGetUserMedia()
if (enable){
prompt1 = document.getElementById('prompt1');
prompt2 = document.getElementById('prompt2');
screenshot = document.getElementById('screenshot');
clear = document.getElementById('clear');
select = document.getElementsByTagName('select')[0]
label = document.getElementsByTagName('label')[0]
img = document.getElementsByTagName('img')[0];
video = document.getElementsByTagName('video')[0];
download = document.getElementsByClassName('download')[0]
download.addEventListener('click', onDownload)
document.getElementsByClassName('capture')[0].addEventListener('click', onCapture)
screenshot.addEventListener('click', onScreenshot)
}
}
const hasGetUserMedia = () => {
if (!navigator.mediaDevices && !navigator.mediaDevices.getUserMedia){
alert('Unable to enable camera.')
} else {
enable = true
}
}
const onCapture = () => {
navigator.mediaDevices
.getUserMedia({video: true})
.then(stream => {
video.srcObject = stream
prompt1.style.display = 'none';
prompt2.style.display = 'block';
screenshot.disabled = false;
clear.disabled = false;
})
.catch(err=>alert('Error occurred: ' + err));
}
const uploadBackground = () =>{
var c = document.getElementById('canvasTwo');
var ctx = c.getContext('2d');
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = () => {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(event.target.files[0]);
};
const onScreenshot = () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
prompt2.style.display = 'none'
img.src = canvas.toDataURL('image/png');
img.style.display = 'block'
download.disabled = false
select.style.visibility = 'visible'
label.style.visibility = 'visible'
}
const onFormatChange = () =>{
format = event.target.value
}
const onDownload = () => {
download = document.createElement('a');
download.href = img.src
download.download = 'yourScreenshot' + format;
download.style.display = 'none';
document.body.appendChild(download);
download.click();
document.body.removeChild(download);
};
const clearAll = () => {
video.srcObject.getVideoTracks().forEach(track => track.stop())
document.getElementsByClassName('container')[0].removeChild(video);
video = document.createElement("video")
video.autoplay = true
document.getElementsByClassName('container')[0].insertBefore(video, prompt1)
if (img){
img.style.display = 'none'
}
screenshot.disabled = true;
download.disabled = true;
select.style.visibility = 'hidden';
label.style.display = 'none';
format = null;
prompt2.style.display = 'none';
prompt1.style.display = 'block';
clear.disabled = true;
}
document.addEventListener('DOMContentLoaded', init)