<html>
<body style="background-color:gray;">
<body>
<div>
<h2>Audio record and playback</h2>
<p>
<button id=startRecord>record audio</button>
<button id=startvideo>video</button>
<button id=stopRecord disabled>stop</button>
</p>
<p>
<audio id=recordedAudio></audio>
<video id=recordedVideo></video>
<a id=audioDownload></a>
</p>
</div>
<div id='sarea'></div>
<script>
audiocode = `
navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.state == "inactive"){
blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
//postit(blob);
recordedAudio.src = URL.createObjectURL(blob);
recordedAudio.controls=true;
recordedAudio.autoplay=true;
audioDownload.href = recordedAudio.src;
audioDownload.download = 'mp3';
audioDownload.innerHTML = 'download';
}
}
})
.catch(e=>console.log(e));
`
videocode = `
navigator.mediaDevices.getUserMedia({audio:true,video:true})
.then(stream => {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.state == "inactive"){
blob = new Blob(audioChunks,{type:'video/mp4'});
//postit(blob);
recordedVideo.src = URL.createObjectURL(blob);
recordedVideo.controls=true;
recordedVideo.autoplay=true;
audioDownload.href = recordedAudio.src;
audioDownload.download = 'mp4';
audioDownload.innerHTML = 'download';
}
}
})
.catch(e=>console.log(e));
`
startRecord.onclick = e => {
sarea = document.getElementById("sarea");
var newScript = document.createElement("script");
var inlineScript = document.createTextNode(audiocode);
newScript.appendChild(inlineScript);
sarea.appendChild(newScript);
startRecord.disabled = true;
stopRecord.disabled=false;
audioChunks = [];
rec.start();
}
startvideo.onclick = e => {
sarea = document.getElementById("sarea");
var newScript = document.createElement("script");
var inlineScript = document.createTextNode(videocode);
newScript.appendChild(inlineScript);
sarea.appendChild(newScript);
startvideo.disabled = true;
startRecord.disabled = true;
stopRecord.disabled=false;
audioChunks = [];
rec.start();
}
stopRecord.onclick = e => {
startRecord.disabled = false;
startvideo.disabled = false;
stopRecord.disabled=true;
rec.stop();
}
function postit( hey ) {
var reader = new FileReader();
reader.onload = function(event){
var fd = {};
fd["fname"] = "test.wav";
fd["data"] = event.target.result;
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
dataType: 'text'
}).done(function(data) {
console.log(data);
});
};
reader.readAsDataURL(hey);
}
</script>
</body>
</html>
https://jsfiddle.net/cr8s2wd4/
(https://jsfiddle.net/cr8s2wd4/)
it only shows the preview video/audio when you HIT block stream instead of allow, how to make it work when you hit ALLOW stream?(它仅在您单击HIT流时显示预览视频/音频，而不是允许，当您点击ALLOW流时如何使其工作？)
more details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more detailsmore details more details(更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息更多详细信息)
ask by Edo Edo translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
