在Chrome的JavaScript中录制音频，总是将视频/ogg发送到服务器
在Chrome的JavaScript中录制音频，总是将视频/ogg发送到服务器
提问于 2021-04-03 15:33:28
我一直在尝试在Chrome上录制OGG格式的音频，并将其发送回服务器，但它总是以视频/ogg格式出现。这就是我所拥有的：
音频采集：
let chunks = [];
let recording = null;
let mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.onstop = function() {
recording = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
}
mediaRecorder.ondataavailable = function(e){
chunks.push(e.data);
}将其发送到服务器：
let data = new FormData();
data.append('audio', recording);
jQuery.ajax(...);斑点到达后端，但总是在视频/ogg！
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-04-05 17:24:22
我最终使用了kbumsik/opus-media-recorder，为我解决了这个问题。MediaRecorder的临时替代品。
Stack Overflow用户
发布于 2021-04-14 17:41:12
您需要从MediaStream中删除VideoTrack：
const input = document.querySelector("video");
const stop_btn = document.querySelector("button");
input.onplaying = (evt) => {
input.onplaying = null;
console.clear();
const stream = input.captureStream ? input.captureStream() : input.mozCaptureStream();
// get all video tracks (usually a single one)
stream.getVideoTracks().forEach( (track) => {
track.stop(); // stop that track, so the browser doesn't feed it for nothing
stream.removeTrack( track ); // remove it from the MediaStream
} );
const data = [];
const recorder = new MediaRecorder( stream, { mimeType: "audio/webm" } );
recorder.ondataavailable = (evt) => data.push( evt.data );
recorder.onstop = (evt) => exportFile( new Blob( data ) );
stop_btn.onclick = (evt) => recorder.stop();
stop_btn.disabled = false;
recorder.start();
};
console.log( "play the video to start recording" );
function exportFile( blob ) {
stop_btn.remove();
input.src = URL.createObjectURL( blob );
console.log( "video element now playing recoded file" );
}video { max-height: 150px; }<video src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" controls crossorigin></video>
<button disabled>stop recording</button>
由于StackOverflow的空源iframe不允许安全的下载链接，因此使用带有下载链接的here is a fiddle。
Stack Overflow用户
发布于 2021-04-03 17:59:27
您需要设置MediaRecorder的mimeType。否则，浏览器将选择它最喜欢的任何格式对媒体进行编码。
let mediaRecorder = new MediaRecorder(stream, { mimeType: 'my/mimetype' });为了确保浏览器可以实际编码您想要的格式，您可以使用isTypeSupported()。
console.log(MediaRecorder.isTypeSupported('my/mimetype'));例如，Chrome不支持"audio/ogg; codecs=opus"，但支持"audio/webm; codecs=opus"。Firefox同时支持这两种功能。它们都不是野生动物。
一旦配置了MediaRecorder，就可以在创建blob时使用它的mimeType。
recording = new Blob(chunks, { 'type' : mediaRecorder.mimeType });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66928752
复制相关文章
相似问题
腾讯云开发者
