I am working on an Ionic application that uses Capacitor to record audio and then transcribe it to the server using OpenIA API. The audio recording is successful, and I get a base64 encoded file with the following structure:
{
recordDataBase64: "BASE64_STRING",
msDuration: 10000,
mimeType: "audio/webm" // can be wav, mp3 or webm
}
Now I am trying to send this audio file to my server via a POST request using FormData in Ionic with react. I have implemented the following code:
class Utils {
static async transcribe(value: {
recordDataBase64: string;
msDuration: number;
mimeType: string;
}): Promise<string | null> {
try {
const fileName = 'recording.' + value.mimeType.split('/')[1];
// Crear un objeto FormData
const formData = new FormData();
// Decodificar la cadena base64 a un Blob
const blob = this.base64toBlob(value.recordDataBase64, value.mimeType);
// Adjuntar el Blob al FormData con un nombre de archivo "file"
formData.append('file', blob, fileName);
// Realizar la solicitud POST
const response = await ApiRequest('/transcribe', {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
},
});
// Obtener la transcripciĆ³n del cuerpo de la respuesta
const transcription = await response.json();
console.log(transcription);
return transcription;
} catch (error) {
console.error('Error al transcribir el audio:', error);
return null;
}
}
// FunciĆ³n para convertir una cadena base64 a un Blob
static base64toBlob(base64: string, mimeType: string): Blob {
const byteCharacters = atob(base64);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
const slice = byteCharacters.slice(offset, offset + 512);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, { type: mimeType });
}
}
However, I am getting undefined as a response from the server, but when I use PostMan to test it works correctly.
the first log is using the webapp, the last is using postman
Can anyone help me identify why I am getting undefined and how I can correct this?