MediaRecorder 录制视频:Ondataavailable 调用了两次.只有第一个文件是正确的，其他文件已损坏或太小 。的另外一种解决办法。

网上的解决办法都是通过定时器停止和重启方法解决了这个问题。

根据摸索发现另外一种解决办法，用的依然是MediaRecorder 官方提供的api,ondataavailable，

话不多说，代码dome如下

navigator.mediaDevices
    .getUserMedia({ video: { width: { ideal: 1920 }, height: { ideal: 1080 } } })
    .then(function (stream) {
      var mediaRecorder = new MediaRecorder(stream)
      var mediaRecorder1 = new MediaRecorder(stream)//要新建一个 录制对象 使mediaRecorder.ondataavailable每次分片的时候都调用一次都调用mediaRecorder1.start()mediaRecorder1.stop()来存播放头后面在把这个播放头赋给mediaRecorder.ondataavailable的每次分片
      let headerData = null //用来存 mediaRecorder1.start() mediaRecorder1.stop()后的播          放头数据
      mediaRecorder1.ondataavailable = function (event) {//用来存每次mediaRecorder1 开始结束后的播放头数据
        headerData = event.data
        console.log('headerData = ', headerData)
      }


      mediaRecorder.ondataavailable = function (event) {
        const dataArr = []
        if (!headerData) {
          dataArr.push(event.data)
        } else {
          headerData && dataArr.push(headerData)
          dataArr.push(event.data)
        }
        mediaRecorder1.start()
        mediaRecorder1.stop()

        const recordedFile = new File(dataArr, '下载文件名', {
          type: 'video/webm;codecs=h264',
        })
      }
    })
    .catch(function (err) {
      console.error('Error accessing media devices: ', err)
    })