Skip to main content
Version: 3.x

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

(option: StartRecordOption) => void
PropertyType
optionStartRecordOption

API Support

APIWeChat Mini-ProgramH5React Native
CameraContext.startRecord✔️✔️

stopRecord

Stops video recording.

Reference

(option?: StopRecordOption) => void
PropertyType
optionStopRecordOption

API Support

APIWeChat Mini-ProgramH5React Native
CameraContext.stopRecord✔️✔️

takePhoto

Takes a photo.

Reference

(option: TakePhotoOption) => void
PropertyType
optionTakePhotoOption

API Support

APIWeChat Mini-ProgramH5React 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

(callback: OnCameraFrameCallback) => CameraFrameListener
PropertyTypeDescription
callbackOnCameraFrameCallbackCallback function

Sample Code

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

API Support

APIWeChat Mini-ProgramH5React Native
CameraContext.onCameraFrame✔️

Parameters

StartRecordOption

PropertyTypeRequiredDescription
timeoutCallbackStartRecordTimeoutCallbackNoVideo recording will end after 30 sec or the page is onHide.
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

StartRecordTimeoutCallback

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

(result: StartRecordTimeoutCallbackResult) => void
PropertyType
resultStartRecordTimeoutCallbackResult

StartRecordTimeoutCallbackResult

PropertyTypeDescription
tempThumbPathstringThe temporary path to cover images files
tempVideoPathstringThe temporary path to video files

StopRecordOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

StopRecordSuccessCallbackResult

PropertyTypeDescription
tempThumbPathstringThe temporary path to cover images files
tempVideoPathstringThe temporary path to video files
errMsgstringCall result

TakePhotoOption

PropertyTypeRequiredDescription
quality"high" | "normal" | "low"NoImage quality
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

TakePhotoSuccessCallbackResult

PropertyTypeDescription
tempImagePathstringThe temporary path to photo files (jpg for Android and png for iOS).
errMsgstringCall result

OnCameraFrameCallback

Callback function

(result: OnCameraFrameCallbackResult) => void
PropertyType
resultOnCameraFrameCallbackResult

OnCameraFrameCallbackResult

PropertyTypeDescription
dataArrayBufferThe image pixel data, which is a one-dimensional array in which every four items express the RGBA color of one pixel.
heightnumberThe height of the image data rectangle
widthnumberThe width of the image data rectangle

quality

PropertyDescription
highHigh quality
normalNormal quality
lowLow quality

API Support

APIWeChat Mini-ProgramH5React Native
CameraContext.startRecord✔️✔️
CameraContext.stopRecord✔️✔️
CameraContext.takePhoto✔️✔️
CameraContext.onCameraFrame✔️