1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width">
6 <title>Vedio recorder</title>
7</head>
8<body style="background-color: black;">
9 <div class="myh1">
10 <h1 style="color: red;">D-G record studio</h1>
11 <button style="background-color: aqua;"><a href="index.html">Home</a></button>
12</div>
13<div id="container">
14
15 <video id="gum" autoplay muted></video>
16 <video id="recorded" loop controls></video>
17</div>
18
19 <div>
20 <button id="record" disabled>Start Recording</button>
21 <button id="play" disabled>Play</button>
22 <button id="download" disabled>Download</button>
23 </div>
24
25<style>
26
27 .myh1{
28 text-align: center;
29 background-color: white;
30 border: 2px solid red;
31 }
32
33 button {
34 margin: 0 3px 10px 0;
35 padding-left: 2px;
36 padding-right: 2px;
37 width: 99px;
38}
39
40button:last-of-type {
41 margin: 0;
42}
43
44p.borderBelow {
45 margin: 0 0 20px 0;
46 padding: 0 0 20px 0;
47}
48
49video {
50 height: 232px;
51 margin: 0 12px 20px 0;
52 vertical-align: top;
53 width: calc(20em - 10px);
54}
55
56
57video:last-of-type {
58 margin: 0 0 20px 0;
59}
60
61video#gumVideo {
62 margin: 0 20px 20px 0;
63}
64
65@media screen and (max-width: 500px) {
66 button {
67 font-size: 0.8em;
68 width: calc(33% - 5px);
69 }
70}
71
72@media screen and (max-width: 720px) {
73 video {
74 height: calc((50vw - 48px) * 3 / 4);
75 margin: 0 10px 10px 0;
76 width: calc(50vw - 48px);
77 }
78
79 video#gumVideo {
80 margin: 0 10px 10px 0;
81 }
82}
83</style>
84
85<script>
86
87var mediaRecorder;
88var recordedBlobs;
89
90var gumVideo = document.querySelector('video#gum');
91var recordedVideo = document.querySelector('video#recorded');
92
93var recordButton = document.querySelector('button#record');
94var playButton = document.querySelector('button#play');
95var downloadButton = document.querySelector('button#download');
96
97recordButton.onclick = toggleRecording;
98playButton.onclick = play;
99downloadButton.onclick = download;
100
101// get stream using getUserMedia
102navigator.mediaDevices.getUserMedia({ audio: true,video: true})
103 .then((stream) => {
104 recordButton.disabled = false;
105 console.log('getUserMedia() got stream: ', stream);
106 window.stream = stream;
107 gumVideo.srcObject = stream;
108 })
109 .catch((error) => {
110 console.log('navigator.getUserMedia error: ', error);
111 });
112
113function handleDataAvailable(event) {
114 if (event.data && event.data.size > 0) {
115 recordedBlobs.push(event.data);
116 }
117}
118
119function handleStop(event) {
120 console.log('Recorder stopped: ', event);
121}
122
123function toggleRecording() {
124 if (recordButton.textContent === 'Start Recording') {
125 startRecording();
126 } else {
127 stopRecording();
128 recordButton.textContent = 'Start Recording';
129 playButton.disabled = false;
130 downloadButton.disabled = false;
131 }
132}
133
134// create the media recorder
135function startRecording() {
136 recordedBlobs = [];
137
138 try {
139 mediaRecorder = new MediaRecorder(window.stream);
140 } catch (e) {
141 console.error('Exception while creating MediaRecorder: ' + e);
142 return;
143 }
144 console.log('Created MediaRecorder', mediaRecorder);
145 recordButton.textContent = 'Stop Recording';
146 playButton.disabled = true;
147 downloadButton.disabled = true;
148 mediaRecorder.onstop = handleStop;
149 mediaRecorder.ondataavailable = handleDataAvailable;
150 mediaRecorder.start(10); // collect 10ms of data
151 console.log('MediaRecorder started', mediaRecorder);
152}
153
154function stopRecording() {
155 mediaRecorder.stop();
156 console.log('Recorded Blobs: ', recordedBlobs);
157 recordedVideo.controls = true;
158}
159
160function play() {
161 var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
162 recordedVideo.src = window.URL.createObjectURL(superBuffer);
163}
164
165function download() {
166 var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
167 var url = window.URL.createObjectURL(blob);
168 var a = document.createElement('a');
169 a.style.display = 'none';
170 a.href = url;
171 a.download = 'vedio.mp4';
172 document.body.appendChild(a);
173 a.click();
174 setTimeout(function() {
175 document.body.removeChild(a);
176 window.URL.revokeObjectURL(url);
177 }, 100);
178}
179</script>
180
181</body>
182</html>
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width">
6 <title>Vedio recorder</title>
7</head>
8<body style="background-color: black;">
9 <div class="myh1">
10 <h1 style="color: red;">D-G record studio</h1>
11 <button style="background-color: aqua;"><a href="index.html">Home</a></button>
12</div>
13<div id="container">
14
15 <video id="gum" autoplay muted></video>
16 <video id="recorded" loop controls></video>
17</div>
18
19 <div>
20 <button id="record" disabled>Start Recording</button>
21 <button id="play" disabled>Play</button>
22 <button id="download" disabled>Download</button>
23 </div>
24
25<style>
26
27 .myh1{
28 text-align: center;
29 background-color: white;
30 border: 2px solid red;
31 }
32
33 button {
34 margin: 0 3px 10px 0;
35 padding-left: 2px;
36 padding-right: 2px;
37 width: 99px;
38}
39
40button:last-of-type {
41 margin: 0;
42}
43
44p.borderBelow {
45 margin: 0 0 20px 0;
46 padding: 0 0 20px 0;
47}
48
49video {
50 height: 232px;
51 margin: 0 12px 20px 0;
52 vertical-align: top;
53 width: calc(20em - 10px);
54}
55
56
57video:last-of-type {
58 margin: 0 0 20px 0;
59}
60
61video#gumVideo {
62 margin: 0 20px 20px 0;
63}
64
65@media screen and (max-width: 500px) {
66 button {
67 font-size: 0.8em;
68 width: calc(33% - 5px);
69 }
70}
71
72@media screen and (max-width: 720px) {
73 video {
74 height: calc((50vw - 48px) * 3 / 4);
75 margin: 0 10px 10px 0;
76 width: calc(50vw - 48px);
77 }
78
79 video#gumVideo {
80 margin: 0 10px 10px 0;
81 }
82}
83</style>
84
85<script>
86
87var mediaRecorder;
88var recordedBlobs;
89
90var gumVideo = document.querySelector('video#gum');
91var recordedVideo = document.querySelector('video#recorded');
92
93var recordButton = document.querySelector('button#record');
94var playButton = document.querySelector('button#play');
95var downloadButton = document.querySelector('button#download');
96
97recordButton.onclick = toggleRecording;
98playButton.onclick = play;
99downloadButton.onclick = download;
100
101// get stream using getUserMedia
102navigator.mediaDevices.getUserMedia({ audio: true,video: true})
103 .then((stream) => {
104 recordButton.disabled = false;
105 console.log('getUserMedia() got stream: ', stream);
106 window.stream = stream;
107 gumVideo.srcObject = stream;
108 })
109 .catch((error) => {
110 console.log('navigator.getUserMedia error: ', error);
111 });
112
113function handleDataAvailable(event) {
114 if (event.data && event.data.size > 0) {
115 recordedBlobs.push(event.data);
116 }
117}
118
119function handleStop(event) {
120 console.log('Recorder stopped: ', event);
121}
122
123function toggleRecording() {
124 if (recordButton.textContent === 'Start Recording') {
125 startRecording();
126 } else {
127 stopRecording();
128 recordButton.textContent = 'Start Recording';
129 playButton.disabled = false;
130 downloadButton.disabled = false;
131 }
132}
133
134// create the media recorder
135function startRecording() {
136 recordedBlobs = [];
137
138 try {
139 mediaRecorder = new MediaRecorder(window.stream);
140 } catch (e) {
141 console.error('Exception while creating MediaRecorder: ' + e);
142 return;
143 }
144 console.log('Created MediaRecorder', mediaRecorder);
145 recordButton.textContent = 'Stop Recording';
146 playButton.disabled = true;
147 downloadButton.disabled = true;
148 mediaRecorder.onstop = handleStop;
149 mediaRecorder.ondataavailable = handleDataAvailable;
150 mediaRecorder.start(10); // collect 10ms of data
151 console.log('MediaRecorder started', mediaRecorder);
152}
153
154function stopRecording() {
155 mediaRecorder.stop();
156 console.log('Recorded Blobs: ', recordedBlobs);
157 recordedVideo.controls = true;
158}
159
160function play() {
161 var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
162 recordedVideo.src = window.URL.createObjectURL(superBuffer);
163}
164
165function download() {
166 var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
167 var url = window.URL.createObjectURL(blob);
168 var a = document.createElement('a');
169 a.style.display = 'none';
170 a.href = url;
171 a.download = 'vedio.mp4';
172 document.body.appendChild(a);
173 a.click();
174 setTimeout(function() {
175 document.body.removeChild(a);
176 window.URL.revokeObjectURL(url);
177 }, 100);
178}
179</script>
180
181</body>
182</html>
1830
184
1<html>
2 <div class="left">
3 <div id="startButton" class="button">
4 Start
5 </div>
6 <h2>Preview</h2>
7 <video id="preview" width="160" height="120" autoplay muted></video>
8 </div>
9
10 <div class="right">
11 <div id="stopButton" class="button">
12 Stop
13 </div>
14 <h2>Recording</h2>
15 <video id="recording" width="160" height="120" controls></video>
16 <a id="downloadButton" class="button">
17 Download
18 </a>
19 </div>
20
21 <script>
22
23 let preview = document.getElementById("preview");
24 let recording = document.getElementById("recording");
25 let startButton = document.getElementById("startButton");
26 let stopButton = document.getElementById("stopButton");
27 let downloadButton = document.getElementById("downloadButton");
28 let logElement = document.getElementById("log");
29
30 let recordingTimeMS = 5000;
31
32
33 function log(msg) {
34 //logElement.innerHTML += msg + "\n";
35 }
36
37 function wait(delayInMS) {
38 return new Promise(resolve => setTimeout(resolve, delayInMS));
39 }
40
41 function startRecording(stream, lengthInMS) {
42 let recorder = new MediaRecorder(stream);
43 let data = [];
44
45 recorder.ondataavailable = event => data.push(event.data);
46 recorder.start();
47 log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
48
49 let stopped = new Promise((resolve, reject) => {
50 recorder.onstop = resolve;
51 recorder.onerror = event => reject(event.name);
52 });
53
54 let recorded = wait(lengthInMS).then(
55 () => recorder.state == "recording" && recorder.stop()
56 );
57
58 return Promise.all([
59 stopped,
60 recorded
61 ])
62 .then(() => data);
63 }
64
65 function stop(stream) {
66 stream.getTracks().forEach(track => track.stop());
67 }
68
69 startButton.addEventListener("click", function() {
70 navigator.mediaDevices.getUserMedia({
71 video: true,
72 audio: false
73 }).then(stream => {
74 preview.srcObject = stream;
75 downloadButton.href = stream;
76 preview.captureStream = preview.captureStream || preview.mozCaptureStream;
77 return new Promise(resolve => preview.onplaying = resolve);
78 }).then(() => startRecording(preview.captureStream(), recordingTimeMS))
79 .then (recordedChunks => {
80 let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
81 recording.src = URL.createObjectURL(recordedBlob);
82 downloadButton.href = recording.src;
83 downloadButton.download = "RecordedVideo.webm";
84
85 log("Successfully recorded " + recordedBlob.size + " bytes of " +
86 recordedBlob.type + " media.");
87 })
88 .catch(log);
89 }, false);
90
91
92 stopButton.addEventListener("click", function() {
93 stop(preview.srcObject);
94 }, false);
95
96 </script>
97</html>
98