'Record HLS audio stream using MediaRecorder in typescript

I have a HLS audio feed set as the source for the default audio player element. I want to be able to record the incoming stream for later use. I have tried using this MediaRecorder to capture the stream from the audio player source but am coming up against a wall where I am told that the source for the media recorder is not of type 'MediaStream'.

Code for initialising the stream to be played in the audio element

  initStream() {
    // get the audio player
    let audioEl = this.audioPlayer.nativeElement;

    // create the HLS object
    this.hls = new Hls();

    // stream source URL
    var source = "https://as-hls-uk-live.akamaized.net/pool_904/live/uk/bbc_radio_one/bbc_radio_one.isml/bbc_radio_one-audio%3d128000.norewind.m3u8"

    // assign the source to the HLS object
    this.hls.loadSource(source);

    //attach the HLS to the audio player
    this.hls.attachMedia(audioEl);

    console.log(`Created audioPlayer${this.playerId}`);
  }

Code for initialising the stream recording

initRecording(){
    this.recorder = null;
    this.recordedChunks = [];
    try {
      this.recorder = new MediaRecorder(this.hls, {mimeType: "audio/ogg"});
    } catch (e) {
      console.error('Exception while creating MediaRecorder: ' + e);
      return;
    }
    this.recorder.ondataavailable = (event) => {
      console.log(' Recorded chunk of size ' + event.data.size + "B");
      this.recordedChunks.push(event.data);
    };

    this.recorder.start();
  }

And the error i get is Exception while creating MediaRecorder: TypeError: Failed to construct 'MediaRecorder': parameter 1 is not of type 'MediaStream'. I am assuming this is becuase I am passing a HLS object into the media recorder, is there an attribute within that object that i could use instead?

I have also tried to use the audio player source as the stream into the media recorder, but in that case, I get an error saying that the media recorder could not start the recorder as there are no tracks listed in the source.

initRecording(){
    let audioEl = this.audioPlayer.nativeElement;
    var audioStream = audioEl.src;
    this.recorder = null;
    this.recordedChunks = [];
    try {
      this.recorder = new MediaRecorder(audioStream, {mimeType: "audio/ogg"});
    } catch (e) {
      console.error('Exception while creating MediaRecorder: ' + e);
      return;
    }
    this.recorder.ondataavailable = (event) => {
      console.log(' Recorded chunk of size ' + event.data.size + "B");
      this.recordedChunks.push(event.data);
    };

    this.recorder.start();
  }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source