本教程旨在解决使用tus协议上传视频到bunnystream服务时常见的401认证错误。文章详细解析了`authorizationsignature`、`authorizationexpire`、`videoid`、`libraryid`等关键认证参数的正确配置方法，强调了api key的使用、unix时间戳的生成以及bunnycdn信任站点的重要性。通过提供修正后的代码示例和注意事项，帮助开发者成功实现视频上传。
引言
TUS（The Upload Server）是一种基于HTTP的可恢复文件上传协议，它允许客户端在网络中断后从中断点继续上传文件，极大地提升了大型文件上传的稳定性和用户体验。BunnyStream作为BunnyCDN的视频流服务，支持通过TUS协议进行视频上传。然而，开发者在使用TUS上传视频到BunnyStream时，常会遇到401 Unauthorized错误。本文将深入探讨导致此错误的原因，并提供一套完整的解决方案和最佳实践。
理解401认证错误
当TUS上传请求返回401 Unauthorized错误时，这通常意味着服务器拒绝了客户端的请求，因为客户端未能提供有效的认证凭据。在BunnyStream的TUS上传场景中，这通常指向以下几个方面的问题：
- AuthorizationSignature 签名不正确：这是最常见的原因，签名没有按照BunnyStream的要求正确生成。
- AuthorizationExpire 过期时间不正确或已过期：提供的Unix时间戳不是未来的时间，或者格式有误。
- AccessKey（API Key）使用错误：使用了错误的密钥，例如非视频库的API Key。
- LibraryId 或 VideoId 不匹配：提供的视频库ID或视频ID与实际不符。
- CORS（跨域资源共享）问题：如果你的前端应用与BunnyCDN的TUS上传端点不在同一域，需要确保BunnyCDN后台已配置允许你的域进行访问。
BunnyStream TUS上传的关键参数解析
成功进行BunnyStream TUS上传，需要正确配置HTTP请求头中的多个参数，尤其是在签名生成环节。
1. AuthorizationSignature：签名生成机制
AuthorizationSignature 是用于验证请求合法性的SHA256哈希签名。其生成公式如下：
SHA256(LibraryId + ApiKey + ExpirationTime + VideoId)
- LibraryId: 你的BunnyStream视频库的唯一标识符。
- ApiKey: 你的BunnyCDN账号的API Key（通常在"Account Settings" -> "API"中获取，注意不是Stream Key或Access Key，而是主API Key）。
- ExpirationTime: 一个Unix时间戳，表示此签名何时过期。这个时间必须是未来的时间。
- VideoId: 待上传视频的GUID。这个GUID通常在你通过BunnyStream的"Create Video" API调用预先创建视频对象时获得。
关键点：
- ApiKey 必须是你的BunnyCDN主API Key，而不是其他任何密钥。
- 所有参数连接时，不应有额外的分隔符或空格。
2. AuthorizationExpire：授权过期时间
这个HTTP头的值就是签名生成公式中的 ExpirationTime，它是一个Unix时间戳（自1970年1月1日00:00:00 UTC以来的秒数）。
关键点：
- 必须是未来的时间：如果提供的过期时间早于当前时间，上传请求将立即被拒绝。
- 适当的有效期：建议设置一个合理的未来时间，例如当前时间加一天或几小时，以确保上传过程中签名不会过期。
3. VideoId：视频标识符
这是你通过BunnyStream API预先创建视频时获得的GUID。TUS上传是针对一个已经存在的视频占位符进行的。
4. LibraryId：视频库ID
你的BunnyStream视频库的唯一数字ID。
5. metadata：元数据配置
在TUS上传中，你可以在 metadata 字段中传递额外的文件信息，例如 filetype、title、collection 等。这些信息将在上传完成后关联到视频对象。
- collection: 如果视频属于某个集合，可以在这里指定集合的ID。
示例代码与修正
以下是一个修正后的JavaScript TUS上传代码示例，它解决了常见的认证问题。
// 引入必要的库，例如tus-js-client和crypto-js（用于SHA256）
// npm install tus-js-client crypto-js
import * as tus from 'tus-js-client';
import CryptoJS from 'crypto-js'; // 确保安装了crypto-js
// 假设这些变量在你的应用中是可用的
const BUNNY_CDN_API_KEY = 'YOUR_BUNNYCDN_API_KEY'; // 替换为你的BunnyCDN主API Key
const BUNNY_STREAM_LIBRARY_ID = 'YOUR_BUNNYSTREAM_LIBRARY_ID'; // 替换为你的视频库ID
/**
* 获取未来某个时刻的Unix时间戳（秒）
* @param {number} daysToAdd 增加的天数
* @returns {number} Unix时间戳
*/
function getFutureUnixTimestamp(daysToAdd = 1) {
const now = new Date();
now.setDate(now.getDate() + daysToAdd); // 增加指定天数
return Math.floor(now.getTime() / 1000); // 转换为Unix时间戳（秒）
}
/**
* 上传视频到BunnyStream
* @param {File} file 待上传的File对象
* @param {object} videoJson 从BunnyStream Create Video API返回的JSON对象，包含guid
* @param {string} collectionId 视频所属的集合ID (可选)
*/
function UploadVideo(file, videoJson, collectionId) {
const videoGuid = videoJson.guid; // 从预创建视频的响应中获取GUID
const expirationTime = getFutureUnixTimestamp(1); // 设置过期时间为未来一天
// 生成AuthorizationSignature
const signaturePayload = BUNNY_STREAM_LIBRARY_ID + BUNNY_CDN_API_KEY + expirationTime + videoGuid;
const authorizationSignature = CryptoJS.SHA256(signaturePayload).toString(CryptoJS.enc.Hex);
// 创建一个新的tus上传实例
var upload = new tus.Upload(file, {
endpoint: "https://video.bunnycdn.com/tusupload",
retryDelays: [0, 3000, 5000, 10000, 20000, 60000, 60000], // 重试策略
headers: {
AuthorizationSignature: authorizationSignature,
AuthorizationExpire: expirationTime,
VideoId: videoGuid,
LibraryId: BUNNY_STREAM_LIBRARY_ID,
},
metadata: {
filetype: file.type,
title: 'My Video Upload from JS', // 可以动态设置视频标题
collection: collectionId || '' // 如果有collectionId则使用，否则为空
},
onError: function (error) {
console.error("TUS Upload Error:", error);
// 可以在这里添加错误提示给用户
},
onProgress: function (bytesUploaded, bytesTotal) {
var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
// 假设有一个progressBar元素
// progressBar.style.width = percentage + "%";
console.log(`Uploaded: ${bytesUploaded} of ${bytesTotal} (${percentage}%)`);
},
onSuccess: () => {
console.log('File uploaded successfully!');
// 可以在这里进行上传成功后的处理，例如刷新页面或显示成功消息
}
});
// 检查是否有之前的上传可以继续
upload.findPreviousUploads().then(function (previousUploads) {
if (previousUploads.length) {
console.log("Resuming from previous upload...");
upload.resumeFromPreviousUpload(previousUploads[0]);
}
// 开始上传
upload.start();
}).catch(error => {
console.error("Error finding previous uploads:", error);
// 如果查找失败，仍然尝试开始新的上传
upload.start();
});
}
// 示例调用 (在实际应用中，file, videoJson, collectionId 会从用户界面或后端获取)
/*
// 假设你有一个文件输入框
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
const selectedFile = event.target.files[0];
if (selectedFile) {
// 假设你已经通过BunnyStream API预创建了一个视频，并获取了其GUID
const mockVideoJson = { guid: 'YOUR_PRE_CREATED_VIDEO_GUID' };
const mockCollectionId = 'YOUR_COLLECTION_ID'; // 如果有的话
UploadVideo(selectedFile, mockVideoJson, mockCollectionId);
}
});
*/代码修正要点：
- BUNNY_CDN_API_KEY：明确指出这里应使用你的BunnyCDN主API Key，而不是其他任何密钥。
- getFutureUnixTimestamp()：添加了一个辅助函数来动态生成一个未来的Unix时间戳，确保 AuthorizationExpire 总是有效的。
- authorizationSignature：签名生成时，确保 BUNNY_CDN_API_KEY、expirationTime 和 videoGuid 的值是正确的。
- videoGuid：强调 VideoId 应该来自预先创建的视频对象。
- collectionId：在 metadata 中正确传递。
重要注意事项
1. BunnyCDN信任站点配置
如果你的前端应用与BunnyStream的TUS上传端点不在同一域，你需要在BunnyCDN控制面板中配置“信任站点”（Trusted Sites）。这通常在你的视频库设置中找到，用于允许特定的域名进行API调用和上传，以避免CORS（跨域资源共享）问题。务必将你的前端应用的域名添加到信任列表中。
2. API Key的正确使用
BunnyCDN有多种密钥，例如API Key、Stream Key等。TUS上传所需的签名中，ApiKey 参数必须是你的主API Key，而不是Stream Key。Stream Key通常用于直接推流或管理特定视频流。
3. 错误处理与重试策略
tus-js-client 库内置了强大的重试机制（retryDelays），这对于网络不稳定的环境非常有用。然而，对于认证错误（如401），重试通常无济于事，因为问题在于凭据本身。因此，在 onError 回调中，除了记录错误，还应考虑向用户提供明确的反馈，例如“认证失败，请检查您的API配置”。
4. 预创建视频的重要性
TUS上传不是直接创建视频，而是将文件上传到BunnyStream中一个已经存在的视频占位符。这意味着你需要先通过BunnyStream的“Create Video”API调用来获取一个 VideoId (GUID)，然后才能使用TUS协议上传文件。
总结
成功实现BunnyStream TUS视频上传的关键在于精确配置认证参数和理解BunnyCDN的平台要求。通过确保 AuthorizationSignature 的正确生成（特别是 ApiKey 和 ExpirationTime 的准确性）、LibraryId 和 VideoId 的匹配，以及正确配置BunnyCDN的信任站点，可以有效避免401 Unauthorized错误。遵循本教程的指导和代码示例，开发者将能够稳定、高效地将视频上传到BunnyStream服务。
