网页录制屏幕内容方法MediaRecorder

  	// 获取canvas元素 或者获取你要录制的屏幕元素
    const canvas: any = document.querySelector('canvas');
    // 创建MediaRecorder实例
    let mediaRecorder: any
    // MediaRecorder这个API的兼容性不大好 目前最兼容的是谷歌浏览器
    // 因为我这个需求要把生成出来的视频保存到手机相册 但是他的默认生成视频编码格式 
    // 在IOS和安卓有兼容问题 会导致页面报错 所有做了一些判断
    // 首先判断是IOS还是安卓手机
    if (/iPad|iPhone|iPod|mac/.test(navigator.userAgent)) {
      // 判断用户手机类型
      // 根据不同类型的手机 给出不同的编码格式 canvas?.captureStream(120)这是每秒录制120帧 后面是录制视频的格式
      mediaRecorder = new MediaRecorder(canvas?.captureStream(120),miniType="video/mp4");
    } else if (/Android/.test(navigator.userAgent)) {
      // 小米和华为手机生成出来的视频编码格式也会有冲突 所以做了手机类型判断
      if (/Mi/i.test(window.navigator.userAgent)) {
        console.log('小米');
        // 这是一部小米手机
        // 现在是把编码格式都去掉了没有加
        mediaRecorder = new MediaRecorder(canvas?.captureStream(25));
      } else if (/Huawei/i.test(window.navigator.userAgent)) {
        console.log('华为');
        // 这是一部华为手机
        mediaRecorder = new MediaRecorder(canvas?.captureStream(25));
      } else {
        // 这是其他安卓手机
        mediaRecorder = new MediaRecorder(canvas?.captureStream(25));
      }
    }
    // 定义录制结束后的回调函数
    mediaRecorder.ondataavailable = function (event: any) {
      // 创建Blob对象 
      let blob = new Blob([event.data], { type: 'video/webm;' });
      // console.log(JSON.stringify(blob));

      // let url = URL.createObjectURL(blob);
      // 创建FileReader对象
      const reader = new FileReader();
      // 将blob对象转换成base64字符串
      reader.readAsDataURL(blob);

      let base64: any = null;
      reader.onload = function () {
        base64 = reader.result;
        // 这个是要把生成的base64数据传递到小程序保存相册
        // 在react项目中使用uni要引入SDK
        // miniProgram.postMessage这个方法是从uni中结构出来的
        // 数据传递过去之后再小程序端就能获取到数据
        // 小程序要通过web-view把这个页面嵌入到小程序
        
        // miniProgram.postMessage({
        //   data: [{ type: "videoUrl", url: base64 }],
        // });
        // uni.reLaunch({ url: "/pages/index/index?page=page2" });
      };
      // 这个和录制屏幕没有关系
      // // 监听读取完成事件
      // setRadioState({
      //   crystalball: false,
      //   smallplanet: false,
      //   fisheye: true,
      //   MakeScreenshot: false,
      //   MakeHiResScreenshot: false,
      //   music: false,
      //   videoFn: false,
      // });
      // executePanoAction(ACTION_CHANGE_FISHEYE)
    }
  	// 开始录制
    mediaRecorder.start();
    // 在一定时间后停止录制
    setTimeout(function () {
      // 3秒钟后结束录制 录制结束会触发29行那个回调函数 把录制下来的内容生成blob对象
      mediaRecorder.stop();
    }, 3000);