title: CameraContext

sidebar_label: CameraContext

The CameraContext instance can be obtained via wx.createCameraContext.

CameraContext is bound to the unique camera component on the page to use the camera component.

Reference

Methods

startRecord

Starts video recording.

Reference

  1. (option: StartRecordOption) => void
Property Type
option StartRecordOption

API Support

API WeChat Mini-Program H5 React Native
CameraContext.startRecord ✔️ ✔️

stopRecord

Stops video recording.

Reference

  1. (option?: StopRecordOption) => void
Property Type
option StopRecordOption

API Support

API WeChat Mini-Program H5 React Native
CameraContext.stopRecord ✔️ ✔️

takePhoto

Takes a photo.

Reference

  1. (option: TakePhotoOption) => void
Property Type
option TakePhotoOption

API Support

API WeChat Mini-Program H5 React Native
CameraContext.takePhoto ✔️ ✔️

onCameraFrame

Gets the Camera real-time frame data.

Note: To use this API, you must specify frame-size in the camera component property.

Reference

  1. (callback: OnCameraFrameCallback) => CameraFrameListener
Property Type Description
callback OnCameraFrameCallback Callback function

Sample Code

  1. const context = wx.createCameraContext()
  2. const listener = context.onCameraFrame((frame) => {
  3.   console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
  4. })
  5. listener.start()

API Support

API WeChat Mini-Program H5 React Native
CameraContext.onCameraFrame ✔️

Parameters

StartRecordOption

Property Type Required Description
timeoutCallback StartRecordTimeoutCallback No Video recording will end after 30 sec or the page is onHide.
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

StartRecordTimeoutCallback

Video recording will end after 30 sec or the page is onHide.

  1. (result: StartRecordTimeoutCallbackResult) => void
Property Type
result StartRecordTimeoutCallbackResult

StartRecordTimeoutCallbackResult

Property Type Description
tempThumbPath string The temporary path to cover images files
tempVideoPath string The temporary path to video files

StopRecordOption

Property Type Required Description
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

StopRecordSuccessCallbackResult

Property Type Description
tempThumbPath string The temporary path to cover images files
tempVideoPath string The temporary path to video files
errMsg string Call result

TakePhotoOption

Property Type Required Description
quality "high" | "normal" | "low" No Image quality
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

TakePhotoSuccessCallbackResult

Property Type Description
tempImagePath string The temporary path to photo files (jpg for Android and png for iOS).
errMsg string Call result

OnCameraFrameCallback

Callback function

  1. (result: OnCameraFrameCallbackResult) => void
Property Type
result OnCameraFrameCallbackResult

OnCameraFrameCallbackResult

Property Type Description
data ArrayBuffer The image pixel data, which is a one-dimensional array in which every four items express the RGBA color of one pixel.
height number The height of the image data rectangle
width number The width of the image data rectangle

quality

Property Description
high High quality
normal Normal quality
low Low quality

API Support

API WeChat Mini-Program H5 React Native
CameraContext.startRecord ✔️ ✔️
CameraContext.stopRecord ✔️ ✔️
CameraContext.takePhoto ✔️ ✔️
CameraContext.onCameraFrame ✔️