Uniapp小程序通过camera组件实现视频拍摄

前端小趴菜、2023-12-16 12:22

uni中可以通过调用api的方式去拍摄或者是选择相册的视频，但是在这里我们不采取这种方式，因为调用api的方式，必须跳转，而我们需要在页面中实现，下面看下具体步骤吧...

javascript 复制代码

<camera v-if="!srcUrl && showCamera" device-position="back" flash="auto" binderror="onCameraError" style="width: 100%; height: 400rpx;"></camera>
<video v-if="srcUrl" id="myVideo" :src="srcUrl" controls></video>
<view @click="startShoot">
	开始
</view>
<view>
	------------------------------------------
	------------------------------------------
</view>
<view @click="stopShoot">
	结束
</view>


data() {
	return {
		cameraContext: null,
		showCamera: false,
		srcUrl: null,
		timer: null,
		totalSeconds: 0
	};
}

接下来看下，怎么样实现拍摄

javascript 复制代码

onReady() {
	this.cameraContext = uni.createCameraContext()
}

methods: {
	// 开始拍摄
	startShoot() {
		this.totalSeconds = 0
		this.showCamera = true
		this.cameraContext.startRecord({
		timeoutCallback: () => {
			console.log(this.totalSeconds,'超出限制时长');
		},
		timeout: 300,
		success: (res) => {
			this.timer = setInterval(() => {
				this.totalSeconds++
			}, 1000)
		    console.log(res, '开始拍摄');
		},
		fail: (err) => {
				this.showCamera = false
				uni.showToast({
				title: '录制视频失败',
				icon: 'none',
				mask: true
			    })
		    }
		})
	},

    // 结束拍摄
    stopShoot() {
		if(this.timer) clearInterval(this.timer)
		    this.cameraContext.stopRecord({
			compressed: true,
			success: (res) => {
				this.srcUrl = res.tempVideoPath
				// TODO 获取数据帧
				console.log(res, '结束拍摄');
			},
			fail: (err) => {
				uni.showToast({
				title: '录制视频失败',
				icon: 'none',
				mask: true
				})
				console.log(err, '录制视频失败');
			},
			complete: () => {
				this.showCamera = false
			}
		  })
	  },
}

到这里已经基本实现了所需的功能，但是还需要处理一下拍摄超时的情况

javascript 复制代码

watch: {
	totalSeconds: {
		handler(newVal){
			if(newVal >= 270) {
				console.log(newVal, 'newVal');
				this.stopShoot()
			}
		}
	}
}

感觉对你有帮助的小伙伴可以留个star...