<!DOCTYPE html>
<html>
<head>
<title>MediaRecorder API</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body{
width: 90%;
max-width: 960px;
margin: 0px auto;
}
button{
margin: 10px 5px;
}
li{
margin: 10px;
}
#btns{
display: none;
}
</style>
</head>
<body>
<h1>MediaRecorder API example</h1>
<h4>Supported in Firefox (v30+) and Chrome (v49+)</h4>
<div id="gUMArea">
<div>
Record:
<input type="radio" name="media" value="video" checked id="mediaVideo">Video
<input type="radio" name="media" value="audio">Audio
</div>
<button class="btn btn-default" id="gUMbtn">Request Stream</button>
</div>
<div id="btns">
<button class="btn btn-default" id="start">Start</button>
<button class="btn btn-default" id="stop" disabled>Stop</button>
</div>
<div>
<ul class="list-unstyled" id="ul"></ul>
</div>
</body>
</html>
<script>
var log = console.log.bind(console),
id = val => document.getElementById(val),
ul = id('ul'),
gUMbtn = id('gUMbtn'),
start = id('start'),
stop = id('stop'),
stream,
recorder,
counter=1,
chunks,
media;
gUMbtn.onclick = e => {
var mv = id('mediaVideo'),
mediaOptions = {
video: { tag: 'video', type: 'video/webm', ext: '.webm', gUM: {video: true, audio: true} },
audio: { tag: 'audio', type: 'audio/ogg', ext: '.ogg', gUM: {audio: true} }
};
media = mv.checked ? mediaOptions.video : mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
stream = _stream;
id('gUMArea').style.display = 'none';
id('btns').style.display = 'inherit';
start.removeAttribute('disabled');
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
chunks.push(e.data);
if (recorder.state === 'inactive')
makeLink();
};
log('Acquired media successfully');
}).catch(log);
}
start.onclick = e => {
start.disabled = true;
stop.removeAttribute('disabled');
chunks = [];
recorder.start();
}
stop.onclick = e => {
stop.disabled = true;
recorder.stop();
start.removeAttribute('disabled');
}
function makeLink() {
var blob = new Blob(chunks, {type: media.type })
, url = URL.createObjectURL(blob)
, li = document.createElement('li')
, mt = document.createElement(media.tag)
, hf = document.createElement('a');
mt.controls = true;
mt.src = url;
hf.href = url;
hf.download = `${counter++}${media.ext}`;
hf.innerHTML = `<p>Download ${hf.download}</p>`;
li.appendChild(mt);
li.appendChild(hf);
ul.appendChild(li);
}
</script>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent