javascript - 无法从 jQuery 将二进制数据保存到 AWS S3

Question

我正在尝试将 Blob 对象上传到 S3，该对象确实已上传，但方式已损坏。该应用程序用于在网页上录制音频并将其保存到 S3。

HTML + JavaScript 代码:

        <p>
            <button id=startRecord>START</button>
            <button id=stopRecord disabled>Submit</button>
        </p>
        <p id="recording"></p>
        <p>
            <a id=audioDownload></a>
        </p>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<script type="text/javascript">

    var audioContent;
    navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive"){
            let blob = new Blob(audioChunks);
            // audioContent = blob
            // audioContent = URL.createObjectURL(new Blob(audioChunks));
            // console.log(audioContent);

                $.ajax({
                  type: "POST",
                  url: 'https://aws-api-url/prod/audio',
                  data: new Blob(audioChunks),
                  crossDomain: true,
                  processData: false,
                  headers: {"x-api-key": 'someKey'},
                  contentType: false
                });
        // audioDownload.href = audioContent;
        // audioDownload.download = 'test';
        // audioDownload.innerHTML = 'download';
            }
        }
    })
    .catch(e=>console.log(e));

startRecord.onclick = e => {
  startRecord.disabled = true;
  stopRecord.disabled=false;
  document.getElementById("recording").innerHTML = "Listening...";
  audioChunks = [];
  rec.start();
}
stopRecord.onclick = e => {
    document.getElementById("recording").innerHTML = "";
  startRecord.disabled = false;
  stopRecord.disabled=true;
  rec.stop();
}
</script>

转储到 S3 的 AWS Lambda

import json
import boto3

def lambda_handler(event, context):
    # TODO implement

    s3_client = boto3.client('s3', aws_access_key_id='',aws_secret_access_key='')

    s3_client.put_object(Body=event['body'], Bucket='bucket', Key='incoming/test.wav')

    return {
        'statusCode': 200,
       'headers': {
        'Access-Control-Allow-Origin': '*'
        },
        'body': json.dumps(event)
    }

我可以对 Javascript 进行哪些更改才能安全地发送此数据

Answer 1

MediaRecorder不生成 .wav 数据类型。默认情况下它可能生成 MIME type 的数据audio/webm; codecs=opus 。或audio/ogg; codec=vorbis 。您的 lambda 函数看起来忠实地存储了传入的数据。但这不是 .wav 数据，而是其他数据。

您的示例代码让 MediaRecorder 选择自己的 MIME 类型。在这种情况下，您应该询问它使用了什么。例如

rec = new MediaRecorder(stream);
console.log (rec.mimeType);

或者，您可以(尝试)告诉它您想要的 MIME 类型。在这种情况下，您仍然应该询问它实际使用的是什么。 (浏览器生成的 MIME 类型以及无法提供您想要的确切类型时的响应方式各不相同。)如果您的浏览器可以做到这一点，则此代码可能 generate mp3 (aka MPEG Layer III) audio .

rec = new MediaRecorder(stream, {mimeType: "audio/mpeg"});
console.log (rec.mimeType);

或者，您可以尝试 audio/mp4 MIME type ，然后查看您获得的音频编解码器。不同浏览器的情况可能有所不同。

一般可以使用ffmpeg录制后将任何 MIME 类型转换为另一种类型。如果需要 .wav 输出或其他特定格式，这会很方便。 It takes some hacking, but you can do it in your lambda function .