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

摄像头功能实现

可以通过 <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, // 最长录音时间，单位ms
      sampleRate: 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'
        });
      }
    });
  }
});
    

注意事项

权限处理

多媒体功能需要用户授权，必须在使用前检查并请求权限：

摄像头权限：scope.camera

录音权限：scope.record

保存到相册权限：scope.writePhotosAlbum

性能优化

不需要使用摄像头时及时关闭，减少资源消耗。

录制视频时注意控制时长，避免占用过多存储空间。

处理大文件时考虑分片上传。

兼容性

不同设备可能有不同的表现，做好异常处理。

使用 wx.canIUse 检查API兼容性。

用户体验

提供清晰的操作反馈。

处理各种异常情况并给出提示。