<video id="videoPlay" class="video" :src="media"></video>
<canvas   id="myCanvas" type="2d"  style="width: 100%;height: 300px;background-color: darkcyan;"></canvas>
<canvas   id="myCanvas2" type="webgl" style="width: 100%;height: 300px;background-color: greenyellow;"></canvas>

js:

onloadedmetadata(){
    const w = 900
    let h = 600
    const dpr = wx.getSystemInfoSync().pixelRatio
    wx.createSelectorQuery().select('#videoPlay').context(res => {
    	this.video  = res.context
    	wx.createSelectorQuery().selectAll('#myCanvas,#myCanvas2').node(res => {
        	const ctx1 = res[0].node.getContext('2d')
        	res[0].node.width = w * dpr
        	res[0].node.height = h * dpr
        	const recorder=this.ads = wx.createMediaRecorder(res[1].node, {})
    						
                recorder.start() 

      		recorder.on('start', (resd) => {
			this.timer=  setInterval(() => {
                		ctx1.drawImage(this.video, 0, 0, w*dpr, h*dpr );
                		const render = this.createRenderer(res[1].node, w*dpr, h*dpr)
                		render(new Uint8Array(ctx1.getImageData(0, 0, w* dpr ,  h*dpr).data), w * dpr, h*dpr)
                	}, 1000 / 24)
                })			
		
		 recorder.on('stop', (res) => {
			wx.saveVideoToPhotosAlbum({
				filePath: res.tempFilePath,
				success (res) {
					 uni.showToast({
						title: '录制成功'
					})
                                 ....
  				}
  			 })
  		})
  							
  		recorder.on("timeupdate", (res) => {
  			console.log('recorder 录制中，当前时间：', res.currentTime)
  		 })
  
  	}).exec()		  
     }).exec()			
  }