部署到生產環境時不流式傳輸音頻的功能

Question

我有一個 firebase function 被設計為 stream 音頻作為響應：

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);
});

當我在本地主機（使用郵遞員）中運行它時，效果很好：

但是當我將它部署到production時，響應與我在 localhost 中測試時的響應不同：

我相信這是由於響應標頭。 在localhost中，返回的響應頭是：

但在生產中，響應標頭不同：

所以我的問題是：

為什么結果會因本地主機和生產環境而異
如何使生產 function 正確返回音頻？

編輯：此處的目的是隱藏文件 URL。

Answer 1

Cloud Functions 不支持流式傳輸。 整個請求和響應在一個塊中發送。 您可能需要閱讀有關其局限性的文檔。

如果您想返回音頻，您可以選擇返回帶有audio controls的 html 。 請參閱下面的代碼：

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>`
    )
});

已經在我這邊測試過：

您也可以只返回音頻鏈接並在前端處理鏈接以正確播放返回的音頻。

Answer 2

我通過將標頭復制到響應文件來解決這個問題：

// 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);

部署到生產環境時不流式傳輸音頻的功能

問題描述

2 個解決方案

解決方案1
0 2022-03-10 03:40:55

解決方案2
0 已采納 2022-03-12 18:21:04

部署到生產環境時不流式傳輸音頻的功能

問題描述

2 個解決方案

解決方案1 0 2022-03-10 03:40:55

解決方案2 0 已采納 2022-03-12 18:21:04

解決方案1
0 2022-03-10 03:40:55

解決方案2
0 已采納 2022-03-12 18:21:04