小程序拍摄短视频

<template>
    <view class="camera-video">
        <button class="" @tap="showvideo()">
            点击开始录像
        </button>
        <view class="video_image">
            <view class="video_box" v-for="(item,index) in videoSrc" :key='index'>
                <video  class="showvideo" :src="item"></video>
            </view>
            <!-- <image class="videoshow" v-show="showvideoimga"  src="../../static/images/yinyue.png" @tap="showvideo"></image> -->
        </view>
        <view>
            <progress :radius='90' :percent="deflautWidth" v-if="showProgress" color="pink" stroke-width="15" class="progressStyle" />
            <view class=""   v-if="showCamera">
                <camera flash="off" style="width: 100%; height: 100%;position:fixed;top:0;z-index:1111;left:0;"></camera>
            </view>
            <view class="btn-area"  >
                <view class="">
                    <text v-if="showCamera" class="videBtn" @touchstart="handleTouchStart" @touchend="handleTouchEnd"  @longpress="handleLongPress" >按住拍</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return { 
                cameraContext:'',
                timer:null,
                showCamera: false,
                deflautWidth:0,
                showProgress:false,
                starttime:0,
                endtime:0,
                videoSrc:[],
                showvideoimage:false
            }
        },
        onLoad() {

        },
        methods: {
            showvideo(){
                this.showCamera = true
                this.showProgress = true
            },
            // //touch start 手指触摸开始
            handleTouchStart(e){    
                this.starttime  =  e.timeStamp;    
                console.log(" 手指触摸开始 " ,  e);  
            },
            //touch end 手指触摸结束
            handleTouchEnd(e){    
                clearInterval(this.timer);
                this.endtime  =  e.timeStamp;    
                console.log(" 手指触摸结束 ", e);
                // //判断是点击还是长按 点击不做任何事件，长按 触发结束录像
                if (this.endtime - this.starttime > 350) {
                    console.log("操作为长按");
                    //长按操作 调用结束录像方法
                    this.stopShootVideo();
                }
            },
            // 长按拍摄按钮进行录像
            handleLongPress(e){
              console.log("长按",e);
              // 长按方法触发，调用开始录像方法
              this.startShootVideo();
            },
            //录制视频 start
            startShootVideo() {
                // 超过100 停止
                if(this.deflautWidth >= 100) return
                let index = 0;
                this.timer=setInterval(() => {
                    if(this.deflautWidth !=100){
                        index += 10;
                        this.deflautWidth = index
                    }
                    if (this.deflautWidth >= 100) {
                        clearInterval(this.timer);
                        this.stopShootVideo();
                    }
                }, 1000);
        
                console.log("========= 调用开始录像 ===========")
                this.cameraContext = uni.createCameraContext();
                this.cameraContext.startRecord({
                    success: res => {
                        console.log("录像成功")
                        console.log(res)
                    },
                    fail:err=>{
                        console.log(err,'结束失败')
                    },
                    complete:end=>{
                        console.log(end,'开始录像结束调用')
                    },
                    timeoutCallback:timeout=>{
                        console.log('接超过30s或页面onHide时,结束录像')
                    }
                });
            },
            //录制视频 end
            stopShootVideo() {
                console.log("========= 调用结束录像 ===========")
                this.cameraContext = uni.createCameraContext();
                setTimeout(()=>{ // 结束调用偶发失败，加个setTimeout试试
                    this.cameraContext.stopRecord({
                        success: res => {
                            console.log("结束成功",res)
                            this.videoSrc.push(res.tempVideoPath)
                            console.log(this.videoSrc,'videoSrc')
                        },
                        fail:err=>{
                            console.log(err,'结束失败')
                        },
                        complete:end=>{
                            console.log(end,'结束调用')
                            this.showCamera = false
                            this.deflautWidth = 0
                            this.showProgress = false
                        },
                        // compressed:compress=>{
                        //  console.log('压缩视频')
                        // }
                    });
                },100)
            },
        }
    }
</script>

<style>
    .camera-video {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .video_box{
        margin-right: 20rpx;
        margin-top: 20rpx;
    }
    .videoshow{
      border: 1rpx solid #cccccc;
      width: 200rpx;
      height: 200rpx;
    }
    .showvideo{
      width: 200rpx;
      height: 200rpx;
    }
    .videBtn{
      position: fixed;
      bottom: 20rpx;
      left: 50%;
      transform:translateX(-50%);
      width: 200rpx;
      height: 200rpx;
      border-radius:50%;
      font-size: 35rpx;
      color:green ;
      text-align: center;
      line-height: 190rpx;
      border: 7rpx solid green;
      background:rgba(0,0,0,0);
      z-index: 11111;
      padding: 0;
      margin: 0;
    }
    .progressStyle{
      position: fixed;
      top: 0rpx;
      left: 0rpx;
      z-index: 111111;
      width: 100%;
    }
</style>