该 API 使用方法为 MediaRecorder wx.createMediaRecorder(Object canvas, Object options)
属性 | 类型 | 默认值 | 必填 | 说明 |
duration | number | 600 | 否 | 指定录制的时长(s),到达自动停止。最大7200,最小5 |
videoBitsPerSecond | number | 1000 | 否 | 视频比特率(kbps),最小值600,最大值3000 |
gop | number | 12 | 否 | 视频关键帧间隔 |
fps | number | 24 | 否 | 视频 fps |
width | number | canvas.width | 否 | 画布录制宽度 |
height | number | canvas.height | 否 | 画布录制高度 |
// 准备 canvas 对象,可以是 wxml 声明的 node 对象const canvas = await new Promise(resolve => {wx.createSelectQuery().select('#canvas').node(res => resolve(res.node)).exec()})// 也可以是 wx.createOffscreenCanvas 创建的离屏 canvasconst canvas = wx.createOffscreenCanvas()canvas.width = 300canvas.height = 150// 准备一个 canvas 绘制函数,这里使用 three.jsconst 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)) // 准备一个图片加载为贴图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 绘制函数const render = () => {mesh.rotation.x += 0.005mesh.rotation.y += 0.1renderer.render(scene, camera)}// 创建 mediaRecorderconst fps = 30const recorder = wx.createMediaRecorder(canvas, {fps,})// 启动 mediaRecorderawait recorder.start()// 录制 5s 的视频let frames = fps * 5// 逐帧绘制while (frames--) {await recorder.requestFrame()render()}// 绘制完成,生成视频const {tempFilePath} = await recorder.stop()// 销毁 mediaRecorderrecorder.destroy()
// 启动 mediaRecorderawait new Promise(resolve => {recorder.on('start', resolve)recorder.start()})// 逐帧绘制while (frames--) {await new Promise(resolve => recorder.requestFrame(resolve))render()}// 绘制完成,生成视频const {tempFilePath} = await new Promise(resolve => {recorder.on('stop', resolve)recorder.stop()})
该 方法 使用方式为 Promise MediaRecorder.destroy()
该 方法 使用方式为 MediaRecorder.off(string eventName, function callback)
该 方法 使用方式为 MediaRecorder.on(string eventName, function callback)
值 | 说明 |
start | 录制开始事件 |
stop | 录制结束事件 |
pause | 录制暂停事件 |
resume | 录制继续事件 |
timeupdate | 录制事件更新事件 |
该 方法 使用方式为 Promise MediaRecorder.pause()
该 方法 使用方式为 Promise MediaRecorder.requestFrame(function callback)
该 方法 使用方式为 Promise MediaRecorder.resume()
该 方法 使用方式为 Promise MediaRecorder.start()
该 方法 使用方式为 Promise MediaRecorder.stop()
本页内容是否解决了您的问题?