External API event cant pass recording blob data

Hi All Jitsi Developer, @shawn, @saghul, and sorry to disturb all of you guys,

I’m currently developing a new custom iFrame External-API event to pass local video recording blob data to my iFrame API side so I can modify/pass/stream the recording data online.

I’ve successfully created a new event on /modules/API/API.js :

notifyNewRecordingData(data: Blob){
      this._sendEvent({
          name: 'new-recording-data',
          data
      });
}

also added it to the event const on /modules/API/external/external_api.js :

"new-recording-data": "newRecordingData"

and finally firing the API on /features/recording/components/Recording/LocalRecordingManager.web.ts

this.recorder.addEventListener('dataavailable', e => {
      if (e.data && e.data.size > 0) {
          APP.API.notifyNewRecordingData(e.data);
          this.recordingData.push(e.data);
          this.totalSize -= e.data.size;
          if (this.totalSize <= 0) {
              this.stopLocalRecording();
          }
      }
});

the issue is when I tried to receive it at my iFrame API :

api.addEventListener('newRecordingData', (result) =>{
	console.log("receiving new recording data");
	console.log(result.data);
});

I only receive an empty object on my iFrame side, do you guys know what I do wrong? or is it impossible to pass the blob data to the iFrame side?

Thanks

The iframe API’s message bus is postMessage so you are constrained to sending the data types that are supported.

Thanks for your response. Do you have any rough idea of how to achieve my goal? I’m trying to minimalize my change on the Jitsi source code.

You could probably serializer it to an array of integers, then reconstruct that to an Uint8Array then to a blob on the other side.

1 Like

Sorry for my late response,

I end up making base64 out of it and then reconstructing that to an Uint8Array and then to a blob on the other side like your suggestion.

Thanks for helping :smiley:

1 Like