更新记录

1.0.0（2025-04-16）

• init

平台兼容性

uni-app

其他

视频获取帧数据

> 组件名：sandwich-videoframe

插件说明

   本插件支持在微信小程序、H5、android和IOS下获取指定视频的每帧数据(图片base64)，以及指定毫秒(ms)的帧数据(图片base64)。

使用说明

传入videoInfo属性，包括
{

}，
通过change和finish接收每帧数据及完成解析的通知.具体参考如下

<template>
    <view class="content" style="padding: 20rpx;">
        <sandwich-videoframe   :videoInfo="videoInfo"  @change="change" @finish="finish"></sandwich-videoframe>
        <view>截取多少毫秒的截图<input type="number" style="border: 1px solid black;"  @input="onKeyInput"   placeholder="不填就是全部"/></view>
        <view>{{seek?'':'已解析：'+totalFramenum+' 帧'}}  {{processState}}</view>
        <button style="margin-top:20rpx;" @click="chooseVideo">选择视频</button>
        <image :src="currentImg" mode="widthFix" style="width:500rpx;margin:20rpx  auto"></image>
    </view>
</template>

<script>
    export default {

        data() {
            return {
                currentImg: null,
                seek:null,
                videoInfo :null,
                totalFramenum:0,
                processState:'',
                frames:[]
            }
        },
        onLoad() {
        },
        methods: {
            chooseVideo() {
                if(uni.chooseMedia){
                    uni.chooseMedia({
                        count: 1,
                        mediaType: ['video'],
                        sourceType: ['album', 'camera'],
                        success:(res)=>{
                            console.log("res", res)
                            if (res.tempFiles.length > 0) {
                                var item = res.tempFiles[0]
                                this.videoInfo = {
                                    videoUrl:item.tempFilePath,
                                    height:item.height,
                                    width:item.width,
                                    seek:this.seek,
                                    duration:item.duration
                                };
                                this.totalFramenum = 0;
                                this.processState = '解析中'
                                console.log("进行了change-video",this.videoInfo)
                            }
                        }
                    })
                }else{
                    uni.chooseVideo({
                        sourceType: ['camera', 'album'],
                        success: (res) => {
                            this.videoInfo = {
                                videoUrl:res.tempFilePath,
                                height:res.height,
                                width:res.width,
                                seek:this.seek,
                                duration:res.duration
                            };
                            this.totalFramenum = 0;
                            this.processState = '解析中'

                        }
                    })
                }
            },
            change(res){
                this.totalFramenum++;
                //this.frames.push(res.frame);
                this.currentImg = res.frame;
            },
            finish(res){
                this.processState = "解析完成"
            },
            onKeyInput(event){
                this.seek = parseInt(event.detail.value)
            }
        }
    }
</script>

<style>
</style>