trying to add the behavior of request stream button to the init of start button, so by onclick start -> request stream permission ->start recording, i tried putting let mv in a seperate function but didn't work so well, so now i trying to simulate request stream btn onclick, also doesnt start recording right away
(试图将请求流按钮的行为添加到开始按钮的初始化中，因此通过onclick start->请求流许可->开始记录，我尝试将let mv放在单独的函数中，但效果不佳，所以现在我试图模拟请求流btn onclick，也没有立即开始记录)
<!DOCTYPE html>
<html>
<body style="background-color:gray;">
<div id='choosearea'>
<div>
Record:
<input type="radio" name="media" value="video" checked id='mediaVideo'>Video
<input type="radio" name="media" value="audio">audio
</div>
<button id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
<button id='start'>Start</button>
<button id='stop'>Stop</button>
</div>
<div>
<ul class="list-unstyled" id='ul'></ul>
</div>
<script>
'use strict'
let 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 => {
let mv = id('mediaVideo'),
mediaOptions = {
video: {
tag: 'video',
type: 'video/webm',
ext: '.mp4',
gUM: {video: true, audio: true}
},
audio: {
tag: 'audio',
type: 'audio/wav',
ext: '.wav',
gUM: {audio: true}
}
};
media = mv.checked ? mediaOptions.video : mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
stream = _stream;
id('choosearea').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('got media successfully');
}).catch(log);
}
id('gUMbtn').style.display = 'none';
start.onclick = e => {
document.getElementById('gUMbtn').click();
start.disabled = true;
stop.removeAttribute('disabled');
chunks=[];
recorder.start();
}
stop.onclick = e => {
stop.disabled = true;
recorder.stop();
start.removeAttribute('disabled');
}
function makeLink(){
let 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 = `donwload ${hf.download}`;
li.appendChild(mt);
li.appendChild(hf);
ul.appendChild(li);
}
</script>
</body>
</html>
