Problem mit dem Video-Upload-Format in Safari auf Mac und iPhone mit MediaRecorder ⇐ JavaScript

[Guest]

Ich arbeite derzeit an einem Projekt, bei dem wir in einem Teil
ein Video von der Frontkamera oder Webcam des Benutzers aufzeichnen sollten
und das aufgezeichnete Video dann zur Überprüfung durch den Benutzer an das Backend senden.
/>So nehme ich das Video auf:

Code: Select all

  const startRecording = () => {
setShouldShowPreRecordingTimer(false);
if (videoRef.current) {
const stream = videoRef.current.srcObject as MediaStream;
const recorder = new MediaRecorder(stream, {
mimeType: returnVideoMimeType(),
videoBitsPerSecond: 250000,
});
recorder.ondataavailable = handleDataAvailable;
recorder.start();
setMediaRecorder(recorder);
}
};
const startRecording = () => {
setShouldShowPreRecordingTimer(false);
if (videoRef.current) {
const stream = videoRef.current.srcObject as MediaStream;
const recorder = new MediaRecorder(stream, {
mimeType: returnVideoMimeType(),
videoBitsPerSecond: 250000,
});
recorder.ondataavailable = handleDataAvailable;
recorder.start();
setMediaRecorder(recorder);
setIsRecording(true);
setRecordingTimer(RECORDING_TIME);
}
};

const stopRecording = () => {
if (mediaRecorder) mediaRecorder.stop();
};

const handleDataAvailable = (event: BlobEvent) => {
if (event.data.size > 0) {
setRecordedChunks((prev) => [...prev, event.data]);
}
};

und um sicherzustellen, dass der Mime-Typ vom Browser unterstützt wird, habe ich diese Funktion geschrieben:

Code: Select all

export const returnVideoMimeType = () => {
const mimeTypes = [
'video/mp4;codecs=avc1.42E01E,mp4a.40.2',
'video/webm;codecs=vp9,opus',
'video/webm;codecs=vp8,opus',
'video/webm',
'',
];

if (MediaRecorder.isTypeSupported) {
return (
mimeTypes.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) ||
''
);
}

return 'video/mp4;codecs=avc1.42E01E,mp4a.40.2';
};

und dies sind die Formate, die für den Backend-Endpunkt unterstützt werden:

Code: Select all

png,jpeg,bmp,mpeg,webm,3gp,avi,ogg,mp4,mov,wmv,gif,doc,zip,rar,pdf,docx

Wenn ich jetzt versuche, dies in Chrome, Firefox oder Edge zu testen, funktioniert es ordnungsgemäß und das Video wird hochgeladen.
Aber wann immer ich versuche, es auf einem Mac oder einem iPhone hochzuladen Ich erhalte die Fehlermeldung, dass das Format der Datei nicht unterstützt wird. Ich habe den in Safari zurückgegebenen Mime-Typ überprüft und festgestellt, dass er
ist

Code: Select all

'video/mp4;codecs=avc1.42E01E,mp4a.40.2'

Ich habe versucht, es in Chrome mit demselben Mime-Typ hochzuladen, und es hat korrekt funktioniert.
In Safari funktioniert die Aufnahme ohne Probleme korrekt, die Vorschau des aufgezeichneten Videos funktioniert Auch in Ordnung, aber aus irgendeinem Grund scheint es, als würde der endgültige Mime-Typ in etwas anderes geändert.
Ich verwende diese Videoeinschränkungen auch beim Starten der Kamera, falls sie ein Problem haben:

Code: Select all

const videoConstraints = {
video: {
width: { max: 960 }, // Reduce resolution to 640px width
height: { max: 1280 },
frameRate: { max: 30 }, // Lower frame rate reduces file size
facingMode: 'user',
},
audio: true,
};

Irgendwelche Ideen, warum das Hochladen in Safari nicht richtig funktioniert?