BunnyStream TUS视频上传指南：解决401认证错误与参数配置

SHA256(LibraryId + ApiKey + ExpirationTime + VideoId)

// 引入必要的库，例如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);
    }
});
*/