markdown 微信小程序

Posted 2021-05-06

server demo

client demo

https://www.zhihu.com/question/50907897

https://github.com/CFETeam/weapp-demo-album

tips:

由于小程序限制，不支持很多H5相关的DOM功能，比如需要录制H5的webGL功能，并实时录制；
在H5也面下，
```js
      var canvas = document.querySelector('canvas');
				// var video = document.querySelector('video');

			var stream = canvas.captureStream(30);
			startRecording(stream);
				
      var mediaRecorder;
			var recordedBlobs;


			function handleDataAvailable(event) {
			  if (event.data && event.data.size > 0) {
			  	console.log('handleDataAvailable: ');
			    recordedBlobs.push(event.data);
			  }
			}

			function handleStop(event) {
			  console.log('Recorder stopped: ', event);
			}


			function startRecording(stream) {
			  recordedBlobs = [];
			  var options = {mimeType: 'video/webm;codecs=vp9'};
			  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
			    console.log(options.mimeType + ' is not Supported');
			    options = {mimeType: 'video/webm;codecs=vp8'};
			    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
			      console.log(options.mimeType + ' is not Supported');
			      options = {mimeType: 'video/webm'};
			      if (!MediaRecorder.isTypeSupported(options.mimeType)) {
			        console.log(options.mimeType + ' is not Supported');
			        options = {mimeType: ''};
			      }
			    }
			  }
			  try {
			    mediaRecorder = new MediaRecorder(stream, options);
			  } catch (e) {
			    console.error('Exception while creating MediaRecorder: ' + e);
			    alert('Exception while creating MediaRecorder: '
			      + e + '. mimeType: ' + options.mimeType);
			    return;
			  }
			  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
			  mediaRecorder.onstop = handleStop;
			  mediaRecorder.ondataavailable = handleDataAvailable;
			  mediaRecorder.start(1000); // collect 10ms of data
			  console.log('MediaRecorder started', mediaRecorder);
			}

			function stopRecording() {
			  // recordedBlobs = mediaRecorder.stop();
			  console.log('Recorded Blobs: ', recordedBlobs);
			  // recordedVideo.controls = true;
			}
			
			
 var blob = new Blob(recordedBlobs, {type: 'video/webm'});
			  var reader = new FileReader();
			 reader.readAsDataURL(blob); 
			 reader.onloadend = function() {
			     base64data = reader.result;  
			      wx.miniProgram.postMessage({ data:  base64data })
			 }
	```
从H5传输数据到小程序
在小程序下：
```js
index.js
  msgHandler: function (e) {
    console.log(e.detail.data) //获取到来自也页面的数据
    app.globalData.videodata = e.detail.data
  }
index.wxml
  <web-view src="http://127.0.0.1/" bindmessage="msgHandler"></web-view>

video.js
Page({
    data: {
      videodata:''
    },

    onShow: function () {
      console.log(app.globalData.videodata)
      this.setData({
        videodata: app.globalData.videodata
      })
    }
})

video.wxml
  <video id="myVideo" src="{{videodata}}"</video>
  
```

此时依然存在一个问题：

小程序不支持将base64或者arraybuffer数据流直接保存成文件；