<template> <view> <!-- 使用 <camera> 组件来预览摄像头 --> <camera :device-position="cameraPosition" style="width: 100%; height: 400px;"></camera> <!-- 拍照按钮 --> <button @tap="takePhoto">拍照</button> <!-- 录像按钮 --> <button @tap="startRecording" v-if="!isRecording">开始录像</button> <button @tap="stopRecording" v-if="isRecording">停止录像</button> </view> </template> <script> export default { data() { return { cameraPosition: 'back', // 摄像头位置,'front'表示前置摄像头,'back'表示后置摄像头 isRecording: false, // 录像状态 cameraContext: null, // 摄像头上下文对象 }; }, mounted() { // 获取摄像头上下文对象 this.cameraContext = uni.createCameraContext(); }, methods: { // 拍照操作 takePhoto() { this.cameraContext.takePhoto({ success: (res) => { // res.tempImagePath 是拍照后的临时文件路径,可以在此处进行处理 console.log('拍照成功', res.tempImagePath); }, fail: (err) => { console.error('拍照失败', err); }, }); }, // 开始录像操作 startRecording() { this.cameraContext.startRecord({ success: () => { console.log('开始录像'); this.isRecording = true; }, fail: (err) => { console.error('开始录像失败', err); }, }); }, // 停止录像操作 stopRecording() { this.cameraContext.stopRecord({ success: (res) => { // res.tempVideoPath 是录像后的临时文件路径,可以在此处进行处理 console.log('停止录像', res.tempVideoPath); this.isRecording = false; }, fail: (err) => { console.error('停止录像失败', err); this.isRecording = false; }, }); }, }, }; </script>
网友回复
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流?