Re: [mediacapture-record] Add method MediaRecorder.restart considering this use case. (#178)

I think the problem is when playing these fragments, not the recording.
How correctly play second "audio"? I dont found solution for this. I use any methods for do that: `sourceBuffer.abort`, `sourceBuffer.timestampOffset`, `sourceBuffer.remove`. That's all i could remember.
Example in one page. Sandbox: https://codesandbox.io/s/record-play-case-v7080
#### index.html
```html
<audio id="audio" controls autoplay />
<div id="status">first fragment(10 sec)</div>
<script src="index.js"></script>
```
#### index.js
```javascript
navigator.mediaDevices
  .getUserMedia({
    audio: true
  })
  .then(streamHandle);

var stream, recorder;

function streamHandle(_) {
  stream = _;
  recorderLifetime();
}

function recorderLifetime() {
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = async event => {
    let data = await blobToArray(event.data);
    sendToAnotherClient(data, event.data.type);
  };
  recorder.start(100);
  setTimeout(() => {
    output.innerHTML = "all works now?";
    recorder.stop();
    recorderLifetime();
  }, 10000);
}

//another client
var cache = []; // minicache
var mediaSource, sourceBuffer;

function sendToAnotherClient(data, recType) {
  // console.log(data, cache, mediaSource, sourceBuffer)
  // init playing if not already created
  if (!mediaSource) {
    mediaSource = new MediaSource();
    // audio.srcObject = mediaSource; // dont work in chrome!
    audio.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener("sourceopen", () => {
      sourceBuffer = mediaSource.addSourceBuffer(recType);
      // when ready, append all cache to sourceBuffer
      sendToAnotherClient([]);
      audio.play();
    });
  }
  // mediaSource dont ready
  if (!sourceBuffer) {
    cache.push(...data);
    return;
  }
  if (cache.length) {
    data = [...cache, ...data];
    cache = [];
  }
  sourceBuffer.appendBuffer(Uint8Array.from(data));
}

// some support function
function blobToArray(blob) {
  const reader = new FileReader();
  let callback, fallback;
  let promise = new Promise((c, f) => {
    callback = c;
    fallback = f;
  });

  function onLoadEnd(e) {
    reader.removeEventListener("loadend", onLoadEnd, false);
    if (e.error) fallback(e.error);
    else callback([...new Uint8Array(reader.result)]);
  }

  reader.addEventListener("loadend", onLoadEnd, false);
  reader.readAsArrayBuffer(blob);
  return promise;
}
```
This code works only in chrome, firefoks error:
![image](https://user-images.githubusercontent.com/25646126/70959130-03381380-2084-11ea-957b-2c0868b0da60.png)

-- 
GitHub Notification of comment by utyfua
Please view or discuss this issue at https://github.com/w3c/mediacapture-record/issues/178#issuecomment-566350319 using your GitHub account

Received on Tuesday, 17 December 2019 02:23:25 UTC