html video recorder

Solutions on MaxInterview for html video recorder by the best coders in the world

showing results for - "html video recorder"
24 Jun 2019
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>