部署到生产环境时不流式传输音频的功能

Functions not streaming audio when deployed to production

我有一个 firebase 函数,旨在流式传输音频作为响应:

import fetch from "axios";
import * as functions from "firebase-functions";

export const testAudioStream = functions.https.onRequest(async (req, res) => {
    const urlToFile = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3";
    const range = req.headers.range;

    // get media response
    const mediaResponse = range
        ? await fetch(urlToFile, { headers: { range }, responseType: "stream" })
        : await fetch(urlToFile, { responseType: "stream" });

    mediaResponse.data.pipe(res);
});

当我在 localhost(使用 postman)中 运行 时,效果很好:

但是当我将其部署到 production 时,响应与我在 localhost 中测试时的响应不同:

我认为这是由于响应 headers。在 localhost 中,响应 headers returned 是:

但是在生产中,响应headers是不同的:

所以我的问题是:

  1. 为什么结果因本地主机和生产环境而异
  2. 如何使制作函数 return 的音频正确?

编辑: 这里的目的是隐藏文件 URL.

Cloud Functions 不支持流式传输。整个请求和响应在一个块中发送。您可能需要阅读其限制的 documentation

如果您想要 return 音频,您可以选择 return 一个 html 和 audio controls。请参阅下面的代码:

import * as functions from "firebase-functions";

export const testAudioStream = functions.https.onRequest(async (req, res) => {

    res.send(`
        <!DOCTYPE html>
        <html>
        <body>

        <audio controls>

        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>

        </body>
        </html>`
    )
});

我这边已经测试过:

您也可以 return 仅音频 link 并处理 Front-end 上的 link 以正确播放 returned 音频。

我通过将 headers 复制到响应文件来解决这个问题:

// copy headers
const newHeaders = Object.entries(mediaResponse.headers);
for (const [key, value] of newHeaders)
    res.setHeader(key, value);

// copy status code
res.status(mediaResponse.status);