视频截帧（Browser.js SDK）--对象存储-火山引擎

文档中心

立即注册

导航

对象存储

视频截帧（Browser.js SDK）

最近更新时间：2024.02.04 18:31:10首次发布时间：2023.12.20 10:16:17

视频截帧功能可以从视频流中截取指定时刻的单帧画面，并按指定大小缩放成图片。本文介绍如何通过 TOS Browser.js SDK 进行视频截帧。

示例代码

以下代码展示如何截取第 300ms 的视频帧，并将其展示在网页中。

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

  <body>
    <img src="" style="width: 300px; height: 300px" />
    <!-- 导入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 fileName = 'temp.jpg';
          // 请求并增加数据处理
          // 视频截帧，截取第 300ms 的视频帧
          const style = 'video/snapshot,t_300';
          const { data, requestId, headers } = await client.getObjectV2({
            bucket: bucketName,
            key: videoKey,
            process: style,
            dataType: 'blob',
          });
          console.log('getObjectToFile Request ID: ', requestId);
          console.log('ContentType: ', headers['content-type']);
          const imageUrl = window.URL.createObjectURL(data.content);
          document.querySelector('img').src = imageUrl;
          // 当图片不再使用时，需要调用 window.URL.revokeObjectURL(imageUrl) 释放 imageUrl
        } catch (error) {
          handleError(error);
        }
      }
      main();
    </script>
  </body>
</html>

对象存储

示例代码

相关文档