MSE live stream. sourceEnded/ half video green.

[Ivanov Nikolai]

We are trying to show live video. Through the multiplexer, we transform our stream from mpegts in fmp4. We get errors when trying to play a video:

1. When trying to play the first frame we get sourceEnded
2. Sometimes source ended not and playing video but half video green

`

    let transmuxer = new muxjs.mp4.Transmuxer();
    mediaSource.addEventListener('sourceopen', function(e) {
                
                video.muted = true;
                video.play();
    
                websocket = new WebSocket('ws://127.0.0.1:3333');
                websocket.binaryType = 'arraybuffer';
    
                websocket.onopen = function() {
                    let resolution = 240;
                    let bin = JSON.stringify({ resolution });
                        
                    function strToAb(str) {
                        return new Uint8Array(str.split('')
                        .map(c => c.charCodeAt(0))).buffer;
                    }
                    appendFirstSegment();
                    websocket.send(strToAb(bin));
                }
    
              websocket.onmessage = function (e) {
                              websocket.send('PING');
              
                              let data = new Uint8Array(e.data);
              
                              dataBuffer.push(data);
              
                              transmuxer.push(dataBuffer.shift());
                              transmuxer.flush();
              
              }
              
              function appendFirstSegment(){
                              
                                  URL.revokeObjectURL(video.src);
                                  
                                  sourceBuffer = mediaSource.addSourceBuffer(mime);
                                  sourceBuffer.addEventListener('updateend', function(e) {
                                      appendNextSegment()
                                      if (video.duration && !video.currentTime) {
                                          video.currentTime = video.duration;
                                      }
                                  });
              
                                  transmuxer.on('data', (segment) => {
                                          let data = new Uint8Array(segment.initSegment.byteLength + segment.data.byteLength);
                                          data.set(segment.initSegment, 0);
                                          data.set(segment.data, segment.initSegment.byteLength);
                                          
                                          createInitSegment = false;
                                          sourceBuffer.appendBuffer(data);
                                  })
              
              
               }
              
              function appendNextSegment(){
                  transmuxer.off('data');
                  transmuxer.on('data', (segment) =>{
                      let data = new Uint8Array(segment.data);
    
                      sourceBuffer.appendBuffer(data);
                  })
              }
    });

`