概览
本文将介绍如何使用 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/capiconst 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://.ci..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` /* 结果文件的名称 ,必须 */, }, }, QueueId: '******************' /* 任务所在的队列 ID ,必须 */, },});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/,即:`https://.ci..myqcloud.com/ai_jobs/`// 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://.cos..myqcloud.com/xxx.mp4
2. 获取上面 生成字幕文件 创建的字幕文件地址:https://.cos..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://.cos..myqcloud.com/xxx.srt`);// 初始化播放并设置播放地址及字幕文件const Player = TCPlayer('player-container', {});Player.src(`https://.cos..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折活动,限时活动,即将结束,速速收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折,更有现金返利。同意关联立享优惠
转转请注明出处:http://www.yunxiaoer.com/144428.html