数据万象视频自动添加字幕-实践教程-文档中心-腾讯云

概览
本文将介绍如何使用 COS SDK 调用数据万象的 语音识别 能力生成视频字幕文件，并使用 腾讯云播放器（TCPlayer） 播放挂载了字幕的视频。
﻿
业务场景
适用于短视频制作时，原始视频无字幕，需要自动识别视频语音内容并生成字幕的场景。可应用于 PGC/UGC 平台、视频网站、短视频应用、资讯平台等对媒体内容制作有较高智能化和时效性需求的行业。
﻿
准备工作
已创建和绑定存储桶，详情请参见 存储桶操作。
已 开通语音识别 功能。
﻿上传视频文件﻿
在页面中引入 COS SDK 与 TCPlayer 相关脚本文件：
<!--播放器样式文件-->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
<!--COS SDK-->
<script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
﻿
﻿
设置播放器容器节点:
在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。
<video id="player-container" width="414" height="270" preload="auto" playsinline webkit-playsinline></video>
﻿
生成字幕文件
步骤 1：初始化 COS SDK 并配置相关信息
// 密钥请在访问管理控制台获取。https://console.cloud.tencent.com/cam/capi
const cos = new COS({
  SecretId: 'AKID*******',
  SecretKey: '**********',
});
步骤 2：创建语音识别任务
构造提交语音识别任务接口并发起请求 请求参数：
// 存储桶配置请在 cos 控制台获取。https://console.cloud.tencent.com/cos/bucket
// 格式参考：Bucket: 'abc-1250000000', Region: 'ap-shanghai'
const config = {
  // 需要替换成您自己的存储桶信息
  Bucket: '***-125********' /* 存储桶，必须 */,
  Region: '**-*****' /* 存储桶所在地域，必须字段 */,
  FileName: 'demo.mp4' /* 文件名 */,
};
//需在地址前拼接/asr_jobs，即：`https://<BucketName-APPID>.ci.<Region>.myqcloud.com/
const host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com';
const url = 'https://' + host + '/asr_jobs';
//使用 cos sdk 发起语音识别任务请求
const body = COS.util.json2xml({
  Request: {
    Tag: 'SpeechRecognition' /* 创建任务的 Tag：SpeechRecognition ,必须*/,
    Input: {
      Object:config.FileName /* 需要语音识别的视频文件，存储桶里的路径 */,
    },
    Operation: {
      SpeechRecognition: {
        EngineModelType: '16k_zh_video' /* 引擎模型类型:16k 音视频领域 ,必须 */,
        ChannelNum: 1 /* 语音声道数，必须 */,
        ResTextFormat: 1 /* 识别结果返回形式，必须 */,
        OutputFileType: 'srt',
      },
      Output: {
        Bucket: config.Bucket /*     存储结果的存储桶 ,必须 */,
        Region: config.Region /*     存储结果存储桶地域 ,必须 */,
        Object: `demo.srt` /* 结果文件的名称 ,必须 */,
      },
    }
  },
});
cos.request(
  {
    Bucket: config.Bucket,
    Region: config.Region,
    Method: 'POST',
    Url: url,
    Key: '/asr_jobs' /** 固定值，必须 */,
    ContentType: 'application/xml' /** 固定值，必须 */,
    Body: body,
  },
  (err, data) => {
    console.log(err || data);
  }
);
﻿
请求方式为 POST，Content-Type 为 application/xml，Tag 为 SpeechRecognition 语音识别，Input.Object 为 准备工作中上传的 视频文件,Operation.Output 为结果输出地址可以填准备工作中创建的存储桶，需要注意 Output.Object 文件名称后缀名应为 .srt 格式，Operation.SpeechRecognition 为语音识别配置参数。
﻿接口响应参数，JobsDetail 节点下为下面 获取提语音识别任务接口接口响应 任务信息。其中 JobId 为关键信息，下面 构造查询语音识别任务链接 会用到。
步骤 3：获取字幕文件
﻿查询语音识别任务 执行是否完成，获取字幕文件。
// 存储桶配置请在 cos 控制台获取。https://console.cloud.tencent.com/cos/bucket
// 格式参考：Bucket: 'abc-1250000000', Region: 'ap-shanghai'
const config = {
  // 需要替换成您自己的存储桶信息
  Bucket: '***-125********' /* 存储桶，必须 */,
  Region: '**-*****' /* 存储桶所在地域，必须字段 */,
  FileName: 'demo.srt' /* 文件名 */,
};
// 需在对象地址前面拼接 ai_jobs/<jobId>，即：`https://<BucketName-APPID>.ci.<Region>.myqcloud.com/ai_jobs/<jobId>`
// jobId 即为刚刚创建的任务 ID
﻿
const host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com';
const url = 'https://' + host + '/asr_jobs/' + JobId;
cos.request(
  {
    Bucket: config.Bucket,
    Region: config.Region,
    Method: 'GET',
    Url: url,
    Key: '/asr_jobs/' + JobId /** 固定值，必须 */,
    ContentType: 'application/xml' /** 固定值，必须 */,
  },
  (err, data) => {
    if (err) {
      // 语音识别任务查询失败，请在 console 查看报错信息;
      console.log(JSON.stringify(err));
      return;
    }
    const resp = data.Response || {};
    //判断语音识别任务是否执行中
    if (resp.JobsDetail.State !== 'Success') {
      console.log('...语音识别任务执行中');
      return;
    }
    //任务执行完成 字幕文件地址为
    const srtUrl = `https://${config.Bucket}.cos.${config.Region}.myqcloud.com/${config.FileName}`;
  }
);
返回体 Content-Type 为 application/xml，其中 State 为 Success 代表已经完成语音识别，读取到通过语音识别的字幕文件地址为 https://${Operation.Output.Bucket}.cos.${Operation.Output.Region}.myqcloud.com/${Operation.Output.Object}。
使用 TCPlayer 播放
1. 获取上面 准备工作 创建的视频文件地址：
https://&lt;BucketName-APPID&gt;.cos.&lt;Region&gt;.myqcloud.com/xxx.mp4
2. 获取上面 生成字幕文件 创建的字幕文件地址：
https://&lt;BucketName-APPID&gt;.cos.&lt;Region&gt;.myqcloud.com/xxx.srt
3. 初始化播放器，并设置视频地址和字幕文件：
// TODO: 使用 Web 播放器时，为获取更佳的兼容性，可将普通 srt 格式字幕文件转换为 webvtt 格式
const getWebvvtUrl = url => {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      const arr = text.split('\\n');
      text = arr.slice(0, arr.length - 4).join('\\n');
      const vvtText = 'WEBVTT\\n' + '\\n' + text.replace(/,/g, '.') + '\\n';
      console.log(vvtText);
      return URL.createObjectURL(new Blob([vvtText]));
    });
};
// srt 文件格式转 webvvt 格式，非必须，TCPlayer 播放器字幕文件暂只支持 webvvt 格式
const webvvtUrl = await getWebvvtUrl(`https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.srt`);
// 初始化播放并设置播放地址及字幕文件
const Player = TCPlayer('player-container', {});
Player.src(`https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4`);
Player.on('ready', function () {
  // 添加语音识别任务生成的字幕文件
  const subTrack = Player.addRemoteTextTrack(
    {
      src: webvvtUrl, // 字幕文件
      kind: 'subtitles',
      srclang: 'zh-cn',
      label: '中文',
      default: 'true',
    },
    true
  );
});
若存在跨域问题，则需要进行存储桶跨域访问 CORS 设置，详情请参见 设置跨域访问 。
若存储桶为私有读写，则对象地址需要携带签名，详情请参见 请求签名 。
费用相关
﻿语音识别费用﻿
﻿对象存储相关费用﻿
Demo 体验
具体代码可参考cos-demo 视频自动添加字幕﻿
使用 TCPlayer 播放 COS 视频文件。
通过数据万象 语音识别 并生成字幕文件能力，使用 COS 音视频播放器体验馆 体验给视频设置字幕实际效果。
视频自动添加字幕

本页目录：

概览

业务场景

准备工作

生成字幕文件

步骤 1：初始化 COS SDK 并配置相关信息

步骤 2：创建语音识别任务

步骤 3：获取字幕文件

使用 TCPlayer 播放

费用相关

Demo 体验
