vue 获取cos上存储的视频的第一帧截图

视频上传到腾讯云对象存储之后，获取到视频的第一帧截图。

<template>
  <div >    
  </div>
</template>
<script>
import { getVideoScreenShot } from '@/utils/upload'
export default {
  name: 'AddVideo',
  components: {   
  },
  data () {
    return {     
    }
  },
  props: {
  },
  watch: {
  },
  created () {
    this.getScreenShotHandle ()
  },
  methods: {
    getScreenShotHandle () {
      let videoKey = 'xxx.mp4'
      let files = getVideoScreenShot(videoKey, (data) => {
      })
    }
  }
}
</script>
<style lang='less'>
</style>

封装 getVideoScreenShot 方法：

// https://cloud.tencent.com/document/product/436/11459
import COS from 'cos-js-sdk-v5'
import { Message } from 'element-ui'
import { getCOSSecretKey } from '@/api/common/index'
const config = {
  videoBucket: 'xxxxxx',
  imageBucket: 'xxxxxx',
  Region: 'ap-beijing'
}

export function getVideoScreenShot (key, callback) {
  getCOSSecretKey({ bucket: config.videoBucket }).then(response => { // 后台接口返回 密钥相关信息
    // 后台接口返回 密钥相关信息
    const data = response.result
    var credentials = data && data.credentials
    if (!data || !credentials) return console.error('credentials invalid')
    // 初始化
    var cos = new COS({
      getAuthorization: (options, callback) => {
        callback({
          TmpSecretId: credentials.tmpSecretId,
          TmpSecretKey: credentials.tmpSecretKey,
          XCosSecurityToken: credentials.sessionToken,
          StartTime: data.startTime,
          ExpiredTime: data.expiredTime,
          expiration: data.expiration,
          requestId: data.requestId,
        })
      },
    })
    cos.request({
      Bucket: config.videoBucket,
      Region: config.Region,
      Method: 'GET',
      Key: key,  /* 存储桶内的媒体文件，必须字段 */
      Query: {
        'ci-process': 'snapshot', /** 固定值，必须 */
        time: 1, /** 截图的时间点，单位为秒，必须 */
        // width: 720, /** 截图的宽，非必须 */
        // height: 220, /** 截图的高，非必须 */
        // format: 'jpg', /** 截图的格式，支持 jpg 和 png，默认 jpg，非必须 */
        // rotate: 'auto', /** 图片旋转方式，默认为'auto'，非必须 */
        // mode: 'exactframe', /** 截帧方式，默认为'exactframe'，非必须 */
      },
      RawBody: true
    },
      (err, data) => {
        if (data && data.statusCode == 200) {
          callback(data) // 返回图片链接地址和视频的原始名称
        } else {
          Message({ message: '查询视频第一帧截图失败！', type: 'error' })
        }
      }
    )
  })
}

export default {
  getVideoScreenShot
}

结果：

页面显示：

标签：cos,vue,getVideoScreenShot,截图,import,credentials,data
来源： https://blog.csdn.net/HH18700418030/article/details/122415729