npm 包 ignite-fetch-blob 使用教程

介绍

ignite-fetch-blob 是一个在前端项目中，使用 XMLHttpRequest 对二进制数据进行异步加载和上传的工具库。

该库可以用于许多场景，如：

• 加载图片，音频，视频等大文件
• 上传文件到后端服务器
• 基于 WebRTC 的实时视频流传输

安装

在项目目录下执行以下命令进行安装：

npm install ignite-fetch-blob

使用

加载数据

要加载单个文件，可以使用 fetchBlob 方法，并传入要加载的文件的 URL。

import { fetchBlob } from 'ignite-fetch-blob';

fetchBlob('https://example.com/image.jpg')
  .then(data => console.log('图片二进制数据: ', data))
  .catch(error => console.error(error));

如果要加载多个文件，可以使用 Promise.all 。

const files = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg'];
Promise.all(files.map(fetchBlob))
  .then(data => console.log('所有图片数据: ', data))
  .catch(error => console.error(error));

上传数据

要上传数据到后端服务器，可以使用 uploadBlob 方法。

import { uploadBlob } from 'ignite-fetch-blob';

const file = new File(['Hello World!'], 'helloworld.txt', {type: 'text/plain'});
uploadBlob('https://example.com/upload', file)
  .then(res => console.log(res))
  .catch(error => console.error(error));

基于 WebRTC 实现实时视频流传输

要在实时视频流传输方案中使用 ignite-fetch-blob ，需要用到 MediaRecorder 和 Blob 。

首先，你需要把视频流传入 MediaRecorder 以开始录制。

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const mediaRecorder = new MediaRecorder(mediaStream);

mediaRecorder.ondataavailable = function(event) {
  // 从录制中得到的 Blob 数据
  const blobData = event.data;
};
mediaRecorder.start();

上述代码中，mediaStream 是通过调用 navigator.mediaDevices.getUserMedia 获取到的音视频流。然后，我们创建了一个 MediaRecorder 对象，并告诉它去监听 ondataavailable 事件。

在 mediaRecorder 开始录制之后，每当有数据可用时，系统就会触发 ondataavailable 事件。该事件包括一个包含了录制数据的 Blob 对象。

接下来，你可以将 Blob 对象传入 ignite-fetch-blob 的 uploadBlob 方法中进行上传。

mediaRecorder.ondataavailable = function(event) {
  const blobData = event.data;
  uploadBlob('https://example.com/upload', blobData)
    .then(res => console.log(res))
    .catch(error => console.error(error));
};

这就是使用 ignite-fetch-blob 对实时视频流的传输的简要介绍和演示。

结论

ignite-fetch-blob 提供了一种在前端项目中，使用 XMLHttpRequest 对二进制数据进行异步加载和上传的工具库。它可以用于许多场景，如加载图片、音频、视频等大文件，上传文件到后端服务器以及基于 WebRTC 的实时视频流传输。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005582a81e8991b448d5578