javascript - 不断将数据(blob)加载到对node.js的POST请求中

标签 javascript node.js audio fetch

我认为这应该很简单,但是我认为我研究的内容过多,没有任何意义。

我目前在做什么

我正在使用Node + React创建一个Web应用程序,以在浏览器中录制音频。我在客户端使用RecordRTC录制用户麦克风的音频。一切都很好,但是在用户完成唱歌后,有时需要很长时间才能上载音频文件。我要先处理此文件,然后再将其发送回用户,所以在这里,速度至关重要,因为他们正在等待此文件的发生。

为了使我的用户更流畅地体验,我想在开始从RecordRTC接收音频Blob后开始音频上传过程。我可以访问这些Blob,因为RecordRTC允许我传递一个时间片值(以毫秒为单位)和一个“ondatavailable”函数,该函数将在每个时间片毫秒内传递一个Blob。

我尝试过的

目前,我可以轻松地与FormData()一起使用,因为仅在用户完成唱歌后才发送文件。

  • 我的第一个想法是找到一个示例,例如以类似于我所追求的方式使用Fetch API。有很多示例,但是所有示例都将源文件视为已经可用,但是我想在它们出现时不断添加blob(无法预先确定何时可能不再出现blob,因为用户可能会决定尽早停止唱歌过程),这看起来不太理想。
  • 然后,我考虑了一个“自己编写”过程,在此过程中发出了许多请求,而不是尝试一种长时间的连续样式。这将涉及为每个请求附加一个唯一的标识符,并使服务器在ID匹配的位置将每个块连接在一起。但是,我不确定将来在多服务器环境中的灵活性如何,更不用说处理掉线的连接等问题了,也没有真正的方法告诉服务器在用户中止事件时取消所有内容例如关闭标签页/网页等。
  • 最后,我承认NPM之类的东西没有成功,然后才承认我的Google Fu让我失望了。

  • 我想要的

    理想情况下,我想在录制开始后就创建一个SINGLE新请求,然后每次在“ondataavailable”中接收到该blob时,将其无限期发送到我的请求(一旦收到请求,该请求将被泵送到我的服务器)。音频停止后(我也可以从RecordRTC获取此事件,因此也可以控制它),我想结束/关闭请求,以便服务器知道它现在可以开始处理文件了。作为上传过程的一部分,我还需要在正文中传递一两个字段的文本数据,因此也需要进行处理。在服务器端,一旦服务器接收到每个块,便应立即可访问它们,以便我可以开始在服务器端创建音频文件/将其附加到音频文件,并在用户完成操作后几乎立即对其进行处理。他们的歌声。

    注意:服务器当前设置为通过npm上的multer库查找和处理多部分上传,但是我很乐意更改此设置以获取所需的功能。

    谢谢!

    最佳答案

    为可能在自己的搜索中偶然发现此问题的任何人提供更新。

    我们最终“滚动了自己的”自定义上传器,该上传器在客户端将音频Blob(最多5个1秒Blob)的块发送到服务器。每个请求都包含一个“请求号”,该请求号从1开始只是前一个请求号的+1。发送5个1秒Blob的原因是RecordRTC,至少在当时,它不会捕获最后的X秒数。例如。如果改用5秒的Blob,则38秒的歌曲将损失最后3秒。到达记录末尾时,它将发送最终请求(标有附加头,以使服务器知道这是最终请求)。上载器以链接列表样式工作,以确保在发送下一个请求之前已处理了每个先前的请求。

    在服务器端,这5个Blob通过FFMPEG附加到单个5秒音频Blob中。这确实引入了外部依赖性,但是我们已经在大多数应用程序中使用了FFMPEG,因此这是一个容易的决定。产生的文件的文件名后附加了请求号。收到最终请求后,我们再次使用FFMPEG对所有接收到的文件进行最终连接,以获得最终文件。

    在连接速度非常慢的情况下,我们发现可以节省60秒钟以上的时间,因此,它显着提高了该应用程序在速度较慢的Internet连接方面的可用性。

    如果有人希望自己使用代码,请在此处PM。 (它还没有打磨过,但是我会在发送之前先清理一下)

    关于javascript - 不断将数据(blob)加载到对node.js的POST请求中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49378620/

    相关文章:

    javascript - Windows 7 专业版上的 "Fatal error: Unable to find local grunt."

    java - 具有良好音频支持的网络应用程序客户端框架

    audio - 如何使用ffmpeg更改mp4文件的h264属性、yuv、fps、tbr、tbn、tbc?

    javascript - 数据表 - 如何将搜索输入移出表

    javascript - Javascript Azure Functions 中未拾取或存在输出绑定(bind)

    javascript - 使用 ui.bootstrap 和 AngularJS 进行多重折叠

    node.js - 如何通过socket.io向离线/在线用户发送聊天通知?

    ruby - GulpJS : I don't want gulp-ruby-sass to loop through all sass files

    android - 使用 Android MediaPlayer 播放声音时出现问题

    javascript - 脊柱 JS 模型 : How does Spine handle a server response containing records for a related model?