# MediaRecorder wx.createMediaRecorder(Object canvas, Object options)

Start from base library version 2.11.0. Please remaining backward compatible.

with Promise style call: Not supported

Mini Program plugin: Support, need to Mini Program base library version no less than 2.11.0

create WebGL Picture recorder, which can be recorded frame by frame in WebGL And export the video file.

# parameter

# Object canvas

WebGL Object, through the SelectorQuery Acquired node Object or through a wx.createOffscreenCanvas Create off-screen WebGL Canvas object

# Object options

attribute	type	Default values	Required	Introductions
duration	number	600	no	Specify the length of recording s)Automatic stop is reached. Maximum 7200, Min 5
videoBitsPerSecond	number	1000	no	Video bit rate (kbps), minimum 600, Max 3000
gop	number	12	no	Video key interval
fps	number	24	no	video fps

# Return value

# MediaRecorder

# sample code


// Get ready canvas Object, which can be wxml Declaratory node object
const canvas = await new Promise(resolve => {
  wx.createSelectQuery().select('#canvas').node(res => resolve(res.node)).exec()
})
// It can also be wx.createOffscreenCanvas Create off-screen canvas
const canvas = wx.createOffscreenCanvas()
canvas.width = 300
canvas.height = 150

// Prepare one. canvas Draw function, which is used here three.js
const THREE = require('threejs-miniprogram').createScopedThreejs(canvas)
const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000)
const scene = new THREE.Scene()
const texture = await new Promise(resolve => new THREE.TextureLoader().load('./test.png', resolve)) // Prepare a picture to load for texturing
const geometry = new THREE.BoxBufferGeometry(200, 200, 200)
const material = new THREE.MeshBasicMaterial({ map: texture })
const mesh = new THREE.Mesh(geometry, material)
camera.position.with = 400
scene.add(mesh)
const renderer = new THREE.WebGLRenderer({ antialias: false })
renderer.setPixelRatio(1)
renderer.setSize(canvas.width, canvas.height)

// canvas Rendering function
const render = () => {
  mesh.rotation.x += 0.005
  mesh.rotation.and += 0.1
  renderer.render(scene, camera)
}

// create mediaRecorder
const fps = 30
const recorder = wx.createMediaRecorder(canvas, {
  fps,
})

// start-up mediaRecorder
await recorder.start()

// Recording 5s Video
let frames = fps * 5
// Frame by frame rendering
while (frames--) {
  await recorder.requestFrame()
  render()
}

// Drawing complete, generating video
const {tempFilePath} = await recorder.stop()
// Destroy mediaRecorder
recorder.destroy()

# sample code

Preview with Developer Tool

# Low version asynchronous interface compatibility

Base library 2.16.1 Preversion MediaRecord, none of the interfaces returned Promise Object, if you want to be compatible with lower versions, you can write as follows

// start-up mediaRecorder
await new Promise(resolve => {
  recorder.on('start', resolve)
  recorder.start()
})

// Frame by frame rendering
while (frames--) {
  await new Promise(resolve => recorder.requestFrame(resolve))
  render()
}

// Drawing complete, generating video
const {tempFilePath} = await new Promise(resolve => {
  recorder.on('stop', resolve)
  recorder.stop()
})