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

Question

我有一个 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是不同的：

所以我的问题是：

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

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

Answer 1

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 音频。

Answer 2

我通过将 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);

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

Functions not streaming audio when deployed to production

firebase

express

axios

google-cloud-functions

streaming