最近有有需求,需要捕获用户的脸部表情以及上课的表现情况, 用于提供给AI部门进行算法练习,研究了一下mediaRecorder 录制stream
video/webm
video/webm;codecs=vp8
video/webm;codecs=vp9
video/webm;codecs=vp8.0
video/webm;codecs=vp9.0
video/webm;codecs=h264
video/webm;codecs=H264
video/webm;codecs=avc1
video/webm;codecs=vp8,opus
video/WEBM;codecs=VP8,OPUS
video/webm;codecs=vp9,opus
video/webm;codecs=vp8,vp9,opus
video/webm;codecs=h264,opus
video/webm;codecs=h264,vp9,opus
video/x-matroska;codecs=avc1
audio/webm
audio/webm;codecs=opus
整体使用
function createAudioElement(blobUrl) {
const downloadEl = document.createElement('a');
downloadEl.style = 'display: block';
downloadEl.innerHTML = 'download';
downloadEl.download = 'audio.webm';
downloadEl.href = blobUrl;
document.body.appendChild(downloadEl);
}
async function download() {
try {
let stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
let recorder = new MediaRecorder(stream, {mimeType: type});
recorder.start(0)
recorder.addEventListener('dataavailable', function (e) {
if (e.data.size > 0) {
console.log('ok', e.data.size, chunks.length)
chunks.push(e.data);
}
if (recorder.state == 'inactive') {
const blob = new Blob(chunks, { type: type });
var reader = new FileReader();
reader.onload = function () {
console.log(reader.result); // base64格式
}
// reader.readAsText(blob, 'utf-8')
reader.readAsDataURL(blob, 'utf-8')
// reader.readAsBinaryString(blob, 'utf-8')
// reader.readAsArrayBuffer(blob, 'utf-8')
createAudioElement(URL.createObjectURL(blob));
}
}, false);
}catch(e) {
}
}