tencent cloud

// Prepare the canvas object, which can be a node object declared in wxml.
const canvas = await new Promise(resolve => {
  wx.createSelectQuery().select('#canvas').node(res => resolve(res.node)).exec()
})
// It can also be an offscreen canvas created by wx.createOffscreenCanvas.
const canvas = wx.createOffscreenCanvas()
canvas.width = 300
canvas.height = 150

// Prepare a canvas drawing function (here we use 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 an image to be loaded as a texture
const geometry = new THREE.BoxBufferGeometry(200, 200, 200)
const material = new THREE.MeshBasicMaterial({ map: texture })
const mesh = new THREE.Mesh(geometry, material)
camera.position.z = 400;
scene.add(mesh)
const renderer = new THREE.WebGLRenderer({ antialias: false })
renderer.setPixelRatio(1)
renderer.setSize(canvas.width, canvas.height)

// Canvas drawing function
const render = () => {
  mesh.rotation.x += 0.005
  mesh.rotation.y += 0.1
  renderer.render(scene, camera)
}

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

// Initiate mediaRecorder
await recorder.start()

// Record a 5s video
let frames = fps * 5
// Draw frame by frame
while (frames--) {
  await recorder.requestFrame()
  render()
}

// Upon completion of drawing, generate video
const {tempFilePath} = await recorder.stop()
// Clean up the mediaRecorder
recorder.destroy()