在Chrome浏览器上用JavaScript录制音频，总是将视频/ogg发送到服务器

Question

我一直试图在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(...);

blob到达后端，但始终在视频/ogg中！

Answer 1

我最终使用了kbumsik/opus媒体记录器，为我解决了这个问题。MediaRecorder的替代品。

Answer 2

您需要从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不允许安全的下载链接，这里有一个下载链接。

Answer 3

您需要设置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同时支持这两种功能。Safari没有。

一旦配置了MediaRecorder，就可以在创建blob时使用其mimeType。

recording = new Blob(chunks, { 'type' : mediaRecorder.mimeType });