uni中可以通过调用api的方式去拍摄或者是选择相册的视频，但是在这里我们不采取这种方式，因为调用api的方式，必须跳转，而我们需要在页面中实现，下面看下具体步骤吧...
<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
};
}
接下来看下，怎么样实现拍摄
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
}
})
},
}到这里已经基本实现了所需的功能，但是还需要处理一下拍摄超时的情况文章来源：https://www.toymoban.com/news/detail-859635.html
watch: {
totalSeconds: {
handler(newVal){
if(newVal >= 270) {
console.log(newVal, 'newVal');
this.stopShoot()
}
}
}
}感觉对你有帮助的小伙伴可以留个star...文章来源地址https://www.toymoban.com/news/detail-859635.html
到了这里，关于Uniapp小程序通过camera组件实现视频拍摄的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
