小程序调用摄像头详解

发布时间：2023-05-23

一、准备工作

在调用小程序摄像头之前，需要先在小程序后台配置好相应的权限。

wx.getSetting({
  success: res => {
    if (!res.authSetting['scope.camera']) {
      wx.authorize({
        scope: 'scope.camera',
        success () {
          // 用户已经同意小程序使用摄像头
        },
        fail () {
          // 用户拒绝了小程序使用摄像头
        }
      })
    }
  }
})

上述代码中，我们首先使用 wx.getSetting 获取用户的授权信息，如果用户没有授权小程序使用摄像头，我们再使用 wx.authorize 来请求授权。 当然，在获取授权之前，我们还需要在小程序的 app.json 文件中声明相应的权限：

{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    },
    "scope.record": {
      "desc": "你的录音功能将用于小程序语音识别效果展示"
    },
    "scope.camera": {
      "desc": "你的摄像头将用于小程序拍照、录像、扫码等效果展示"
    }
  }
}

二、调用摄像头

小程序调用摄像头需要使用 wx.createCameraContext 来创建相机上下文对象。

const cameraContext = wx.createCameraContext();
Page({
  takePhoto() {
    cameraContext.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          photoSrc: res.tempImagePath
        })
      }
    })
  }
})

上述代码中，我们首先调用 wx.createCameraContext 创建相机上下文对象，然后在 takePhoto 方法中调用相机拍照，拍照成功后将图片路径赋值给 photoSrc 变量展示出来。

三、调用摄像头并录制视频

与拍照类似，小程序调用摄像头录制视频同样需要使用 wx.createCameraContext 来创建相机上下文对象。

const cameraContext = wx.createCameraContext();
Page({
  startRecord() {
    cameraContext.startRecord({
      success: (res) => {
        console.log('startRecord');
      }
    });
  },
  stopRecord() {
    cameraContext.stopRecord({
      success: (res) => {
        this.setData({
          videoSrc: res.tempVideoPath
        })
      }
    });
  }
})

上述代码中，我们分别调用相机上下文对象的 startRecord 和 stopRecord 方法来开始、结束视频录制，录制成功后将视频路径赋值给 videoSrc 变量展示出来。

四、调用摄像头并扫码

小程序调用摄像头还可以扫描二维码，需要使用 wx.scanCode 来实现。

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

上述代码中，当调用 wx.scanCode 成功后，我们可以在控制台中打印扫描到的二维码信息。

五、调用摄像头并识别人脸

小程序调用摄像头还可以识别人脸，需要使用 wx.faceDetect 来实现。

const context = wx.createCameraContext();
const listener = context.onCameraFrame((frame) => {
  wx.faceDetect({
    frame,
    success: (res) => {
      console.log(res);
    }
  });
});
listener.start();

上述代码中，我们首先使用 wx.createCameraContext 创建相机上下文对象，然后调用相机的 onCameraFrame 方法监听摄像头数据，当有数据传入时，使用 wx.faceDetect 方法识别人脸并将结果打印在控制台中。

六、总结

本文介绍了小程序调用摄像头的准备工作、拍照、录制视频、扫码和识别人脸等方面，希望能够帮助开发者在小程序开发中更加灵活地调用摄像头。

推荐文章