获取视频第一帧,以及后续上传

javascript 复制代码
// 获取视频基本信息
const getVideoBasicInfo = (videoSrc) => {
    return new Promise((resolve, reject) => {
        const video = document.createElement("video");
        video.src = videoSrc;
        // 视频一定要添加预加载
        video.preload = "auto";
        // 视频一定要同源或者必须允许跨域
        video.crossOrigin = "Anonymous";
        // 监听:异常
        video.addEventListener("error", (error) => {
            reject(error);
        });
        // 监听:加载完成基本信息,设置要播放的时常
        video.addEventListener("loadedmetadata", () => {
            const videoInfo = {
                video,
                width: video.videoWidth,
                height: video.videoHeight,
                duration: video.duration,
            };
            resolve(videoInfo);
        });
    });
};
javascript 复制代码
// 将获取到的视频信息,转化为图片地址
const getVideoPosterInfo = (videoInfo) => {
    return new Promise((resolve) => {
        const { video, width, height } = videoInfo;
        video.addEventListener("canplay", () => {
            const canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(video, 0, 0, width, height);
            const posterUrl = canvas.toDataURL("image/jpg");
            resolve({ posterUrl });
        });
    });
};

此函数就是最终可以拿到图片地址的函数了。

javascript 复制代码
//获取处理后的图片地址
const getImgUrl = async (videoSrc) => {
    let videoInfo = await getVideoBasicInfo(videoSrc);
    let {posterUrl} = await getVideoPosterInfo(videoInfo);
    return posterUrl
};

拓展:

如果还需要将拿到的图片进行上传到远程服务器的处理 例如阿里云或者OSS服务器中则看下面代码继续处理

javascript 复制代码
//base64转file 文件
const base64ToFile = (data) => {
  // 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
  let binary = atob(data.split(",")[1]);
  let mime = data.split(",")[0].match(/:(.*?);/)[1];
  let array = [];
  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  let fileData = new Blob([new Uint8Array(array)], {
    type: mime,
  });
  let file = new File([fileData], `${new Date().getTime()}.png`, {
    type: mime,
  });
  return file;
}

最终上传工具就写完了。 实际调用 只需要传递 视频地址即可。

javascript 复制代码
//获取OSS地址
const uploadImgUrl = async(videoSrc)=>{
  let imgUrl = await getImgUrl(videoSrc)
  let fileList= base64ToFile(imgUrl)
  var formData = new FormData()
  formData.set('filename', fileList)
  formData.set('merchantId', localStorage.getItem('MerchantId'))
  formData.set('Directory', 'Image')
  return new Promise((resolve, reject) => {
    axios.post(`${configs.host.test}/api/FileUpload/Upload`, formData)
      .then(res => {
        resolve(res.data);
      })
  });
}

export {
  uploadImgUrl
}
相关推荐
ai产品老杨17 分钟前
驱动物流创新与协同,助力物流行业可持续发展的智慧物流开源了
人工智能·开源·音视频·能源
xingxing_F1 小时前
SoundSource for Mac 音频控制工具
macos·音视频
音视频牛哥2 小时前
AI+ 行动意见解读:音视频直播SDK如何加速行业智能化
人工智能·音视频·人工智能+·ai+ 行动意见·rtsp/rtmp 播放器·低空经济视频链路·工业巡检视频传输
BUG创建者4 小时前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
无线图像传输研究探索5 小时前
无定位更安全:5G 高清视频终端的保密场景适配之道
5g·安全·音视频·无人机·5g单兵图传·单兵图传·无人机图传
音视频牛哥5 小时前
音视频技术全景:从采集到低延迟播放的完整链路解析
音视频·gb28181·rtsp播放器·rtmp播放器·gb28181-2022·rtmp摄像头推流·rtsp转rtmp推送
菜鸟的日志5 小时前
【音频字幕】构建一个离线视频字幕生成系统:使用 WhisperX 和 Faster-Whisper 的 Python 实现
python·whisper·音视频
Antonio9157 小时前
【音视频】WebRTC P2P、SFU 和 MCU 架构
音视频·webrtc·p2p
山河君8 小时前
webrtc之高通滤波——HighPassFilter源码及原理分析
算法·音视频·webrtc·信号处理
音视频牛哥1 天前
打造一款高稳定、低延迟、跨平台RTSP播放器的技术实践
音视频·rtsp播放器·rtsp player·rtsp播放器录像·rtsp h.265·rtsp hevc·rtsp播放器h.265