文档中心

视频截帧图片持久化（Browser.js SDK）

最近更新时间：2024.02.04 18:31:10

首次发布时间：2023.12.20 10:16:17

TOS 支持将视频截帧后的图片保存到指定存储桶。本文介绍如何通过 TOS Browser.js SDK 将视频截帧的图片保存到指定存储桶。

示例代码

以下代码展示如何截取第 300ms 的视频帧，并将截取后的图片命名为 temp.jpg，并保存至目标存储桶。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>视频截帧图片持久化</title>
  </head>

  <body>
    <div>Please see console for more information</div>
    <!-- 导入SDK文件 -->
    <script src="https://cdn.jsdelivr.net/npm/@volcengine/tos-sdk@latest/browser/tos.umd.production.min.js"></script>
    <script type="text/javascript">
      const { TosClientError, TosServerError } = TosClient;
      const client = new TosClient({
        // yourRegion 填写 Bucket 所在地域。以华北2（北京)为例，yourRegion 填写为 cn-beijing。
        region: 'yourRegion',
        // 从 STS 服务获取的临时访问密钥（AccessKey ID 和 AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从 STS 服务获取的安全令牌（SecurityToken）。
        stsToken: 'yourSecurityToken',
      });

      function handleError(error) {
        if (error instanceof TosClientError) {
          console.log('Client Err Msg:', error.message);
          console.log('Client Err Stack:', error.stack);
        } else if (error instanceof TosServerError) {
          console.log('Request ID:', error.requestId);
          console.log('Response Status Code:', error.statusCode);
          console.log('Response Header:', error.headers);
          console.log('Response Err Code:', error.code);
          console.log('Response Err Msg:', error.message);
        } else {
          console.log('unexpected exception, message: ', error);
        }
      }

      const bucketName = 'node-sdk-test-bucket';
      async function main() {
        try {
          // 视频名称
          const videoKey = 'video.mp4';
          // 指定保存处理后图片的存储桶的名称
          const saveBucket = '*** Provide your bucket name ***';
          // 指定处理后图片的名称
          const saveObject = 'temp.jpg';

          // 请求并增加数据处理
          // 视频截帧，截取第 300ms 的视频帧
          const style = 'video/snapshot,t_300';
          const { data, requestId, headers } = await client.getObjectV2({
            bucket: bucketName,
            key: videoKey,
            process: style,
            dataType: 'blob',
            saveBucket: btoa(saveBucket),
            saveObject: btoa(saveObject),
          });

          console.log('getObjectV2 Request ID: ', requestId);
          console.log('ContentType: ', headers['content-type']);
          const info = JSON.parse(await data.content.text());
          console.log('Save As Result: %o', info);
        } catch (error) {
          handleError(error);
        }
      }
      main();
    </script>
  </body>
</html>

对象存储

视频截帧图片持久化（Browser.js SDK）

示例代码

相关文档