合并资源流式响应

最近更新时间:2025-06-10 11:33:52

我的收藏
该示例把三个视频合并为一个视频,在客户端按视频拼接顺序播放。实现了使用边缘函数获取多个远程资源,并流式读取与拼接,最终流式响应客户端。

示例代码

async function sequentialCombine(urls, destination) {
try {
// 按顺序处理每个URL
for (let i = 0; i < urls.length; i++) {
const url = urls[i];

// 获取当前片段
const response = await fetch(url);

if (!response.ok) {
console.error(`获取视频片段失败: ${url}, 状态码: ${response.status}`);
continue;
}

// 获取可读流
const readable = response.body;

// 立即执行pipeTo,将当前片段写入目标流
try {
await readable.pipeTo(destination, {
preventClose: true // 保持流开放以便后续写入
});
} catch (e) {
console.error(`流处理错误 (${url}): ${e.message}`);
}
}
} catch (err) {
console.error(`合并视频流错误: ${err.message}`);
} finally {
// 完成所有片段处理后关闭流
const writer = destination.getWriter();
writer.close();
writer.releaseLock();
}
}

async function handleRequest(request) {
// 视频片段地址
const urls = [
'https://vod.example.com/stream-01.mov',
'https://vod.example.comm/stream-02.mov',
'https://vod.example.com/stream-03.mov',
];

// 创建转换流
const { readable, writable } = new TransformStream();

// 按顺序获取并合并视频片段
sequentialCombine(urls, writable);

// 返回合并后的视频流响应
return new Response(readable, {
headers: {
'content-type': 'video/mp4',
}
});
}

// 监听fetch事件
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});

示例预览

在浏览器地址栏中输入匹配到边缘函数触发规则的 URL,可预览到合并后的视频。查看响应头,视频以 chunked 方式传输。


相关参考