当前位置：首页 > news >正文

微信小程序多媒体功能实现

news 2025/8/10 7:33:15

摄像头功能实现

可以通过 <camera> 组件实现摄像头预览和拍照功能，以下是相关代码示例及说明：

Page({data: {devicePosition: 'back', // 初始使用后置摄像头flash: 'off', // 闪光灯默认关闭photoPath: '' // 照片路径},onLoad() {// 检查摄像头权限wx.getSetting({success: (res) => {if (!res.authSetting['scope.camera']) {// 申请摄像头权限wx.authorize({scope: 'scope.camera',success: () => {console.log('摄像头权限已获取');},fail: () => {wx.showToast({title: '请授予摄像头权限',icon: 'none'});}});}}});},// 切换摄像头switchCamera() {this.setData({devicePosition: this.data.devicePosition === 'back'? 'front' : 'back'});},// 切换闪光灯toggleFlash() {this.setData({flash: this.data.flash === 'on'? 'off' : 'on'});},// 拍照takePhoto() {const ctx = wx.createCameraContext();ctx.takePhoto({quality: 'high',success: (res) => {this.setData({photoPath: res.tempImagePath});},fail: (err) => {console.error('拍照失败', err);wx.showToast({title: '拍照失败',icon: 'none'});}});},// 保存图片到相册savePhoto() {wx.saveImageToPhotosAlbum({filePath: this.data.photoPath,success: () => {wx.showToast({title: '保存成功'});},fail: (err) => {console.error('保存失败', err);wx.showToast({title: '保存失败',icon: 'none'});}});},// 摄像头错误处理onCameraError(e) {console.error('摄像头错误', e.detail);wx.showToast({title: '摄像头打开失败',icon: 'none'});}
});

录音功能实现

使用 wx.getRecorderManager() 实现录音功能，代码示例及说明如下：

Page({data: {isRecording: false,recordPath: '',recordDuration: 0,timer: null},onLoad() {// 获取录音管理器this.recorderManager = wx.getRecorderManager();// 监听录音结束this.recorderManager.onStop((res) => {this.setData({recordPath: res.tempFilePath,isRecording: false});clearInterval(this.data.timer);});// 监听录音错误this.recorderManager.onError((err) => {console.error('录音错误', err);wx.showToast({title: '录音失败',icon: 'none'});});},// 开始录音startRecord() {// 检查录音权限wx.getSetting({success: (res) => {if (!res.authSetting['scope.record']) {wx.authorize({scope: 'scope.record',success: () => {this.startRecording();},fail: () => {wx.showToast({title: '请授予录音权限',icon: 'none'});}});} else {this.startRecording();}}});},// 实际开始录音startRecording() {// 配置录音参数const options = {duration: 60000, // 最长录音时间，单位mssampleRate: 44100,numberOfChannels: 1,encodeBitRate: 192000,format: 'mp3',frameSize: 50};this.recorderManager.start(options);this.setData({isRecording: true,recordDuration: 0,timer: setInterval(() => {this.setData({recordDuration: this.data.recordDuration + 1});}, 1000)});},// 停止录音stopRecord() {this.recorderManager.stop();},// 保存录音saveRecord() {wx.saveVideoToPhotosAlbum({filePath: this.data.recordPath,success: () => {wx.showToast({title: '保存成功'});},fail: (err) => {console.error('保存失败', err);wx.showToast({title: '保存失败',icon: 'none'});}});},onUnload() {// 页面卸载时清理定时器if (this.data.timer) {clearInterval(this.data.timer);}}
});

视频拍摄功能实现

结合 <camera> 组件和 wx.createCameraContext() 实现视频拍摄，相关代码如下：

Page({data: {isRecording: false,videoPath: ''},onLoad() {this.cameraContext = wx.createCameraContext();},// 开始拍摄视频startVideo() {// 检查摄像头和录音权限wx.getSetting({success: (res) => {if (!res.authSetting['scope.camera'] ||!res.authSetting['scope.record']) {wx.authorize({scope: ['scope.camera', 'scope.record'],success: () => {this.startRecordingVideo();},fail: () => {wx.showToast({title: '请授予摄像头和录音权限',icon: 'none'});}});} else {this.startRecordingVideo();}}});},// 开始录制视频startRecordingVideo() {this.cameraContext.startRecord({success: () => {this.setData({isRecording: true});wx.showToast({title: '开始录制',icon: 'none'});},fail: (err) => {console.error('录制失败', err);wx.showToast({title: '录制失败',icon: 'none'});}});},// 停止拍摄视频stopVideo() {this.cameraContext.stopRecord({success: (res) => {this.setData({videoPath: res.tempVideoPath,isRecording: false});},fail: (err) => {console.error('停止录制失败',err);wx.showToast({title: '停止录制失败',icon: 'none'});}});},// 保存视频到相册saveVideo() {wx.saveVideoToPhotosAlbum({filePath: this.data.videoPath,success: () => {wx.showToast({title: '保存成功'});},fail: (err) => {console.error('保存失败', err);wx.showToast({title: '保存失败',icon: 'none'});}});}
});