-
Notifications
You must be signed in to change notification settings - Fork 31
/
index.html
149 lines (133 loc) · 5.22 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<head>
<title>
Recorder v2.2
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<span><a id="download" style="display: none;"><button type="button" class="btn btn-primary mb-4"> Download</button></a></span>
<button type="button" class="btn btn-danger" id="stop" disabled>Stop</button>
<button type="button" onclick="recordAudio()" class="btn btn-info">Record Audio</button>
<button type="button" onclick="recordVideo()" class="btn btn-info">Record Video</button>
<button type="button" onclick="recordScreen()" class="btn btn-info">Record Screen</button>
<div class="p-5">
<video autoplay height='480' width="640" muted></video>
</div>
</div>
</body>
<script>
let shouldStop = false;
let stopped = false;
const videoElement = document.getElementsByTagName("video")[0];
const downloadLink = document.getElementById('download');
const stopButton = document.getElementById('stop');
function startRecord() {
$('.btn-info').prop('disabled', true);
$('#stop').prop('disabled', false);
$('#download').css('display', 'none')
}
function stopRecord() {
$('.btn-info').prop('disabled', false);
$('#stop').prop('disabled', true);
$('#download').css('display', 'block')
}
const audioRecordConstraints = {
echoCancellation: true
}
stopButton.addEventListener('click', function () {
shouldStop = true;
});
const handleRecord = function ({stream, mimeType}) {
startRecord()
let recordedChunks = [];
stopped = false;
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function (e) {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
if (shouldStop === true && stopped === false) {
mediaRecorder.stop();
stopped = true;
}
};
mediaRecorder.onstop = function () {
const blob = new Blob(recordedChunks, {
type: mimeType
});
recordedChunks = []
const filename = window.prompt('Enter file name');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = `${filename || 'recording'}.webm`;
stopRecord();
videoElement.srcObject = null;
};
mediaRecorder.start(200);
};
async function recordAudio() {
const mimeType = 'audio/webm';
shouldStop = false;
const stream = await navigator.mediaDevices.getUserMedia({audio: audioRecordConstraints});
handleRecord({stream, mimeType})
}
async function recordVideo() {
const mimeType = 'video/webm';
shouldStop = false;
const constraints = {
audio: {
"echoCancellation": true
},
video: {
"width": {
"min": 640,
"max": 1024
},
"height": {
"min": 480,
"max": 768
}
}
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);
videoElement.srcObject = stream;
handleRecord({stream, mimeType})
}
async function recordScreen() {
const mimeType = 'video/webm';
shouldStop = false;
const constraints = {
video: {
cursor: 'motion'
}
};
if(!(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia)) {
return window.alert('Screen Record not supported!')
}
let stream = null;
const displayStream = await navigator.mediaDevices.getDisplayMedia({video: {cursor: "motion"}, audio: {'echoCancellation': true}});
if(window.confirm("Record audio with screen?")){
const audioContext = new AudioContext();
const voiceStream = await navigator.mediaDevices.getUserMedia({ audio: {'echoCancellation': true}, video: false });
const userAudio = audioContext.createMediaStreamSource(voiceStream);
const audioDestination = audioContext.createMediaStreamDestination();
userAudio.connect(audioDestination);
if(displayStream.getAudioTracks().length > 0) {
const displayAudio = audioContext.createMediaStreamSource(displayStream);
displayAudio.connect(audioDestination);
}
const tracks = [...displayStream.getVideoTracks(), ...audioDestination.stream.getTracks()]
stream = new MediaStream(tracks);
handleRecord({stream, mimeType})
} else {
stream = displayStream;
handleRecord({stream, mimeType});
};
videoElement.srcObject = stream;
}
</script>
</html>