How to send Blob in Event?

Does anyone know how to send blob file in event?
I have created a component which records the audio and created a blob file from the recoding.
I want to send this blob file as data in the event

i have done like this below:

blob.stream().getReader().read( ({done, value} ) => { this.dispatchEvent( new CustomEvent(‘complete’, {details: { value }}));}

It needs to be converted to Base64 encoded String.

Thank you very much. I was able to create base64 string from arrayBuffer.

Javascript

        this.askPermission((stream) => {
            const self = this;
                this.recorder = new MediaRecorder(stream);
                this.recorder.ondataavailable = e => {
                    this.chunks.push(e.data);
                    if (this.recorder.state === 'inactive') {
                        let blob = new Blob(this.chunks, {type: this.media.type})
                        blob.arrayBuffer().then(buffer => {
                            buffer = new Uint8Array(buffer);
                            const base64 = btoa(String.fromCharCode.apply(null, buffer));
                            self.dispatchEvent(new CustomEvent('result', {detail: {base64: base64}}));
                        })
                        this.isRecording = false;
                    }
                }
                this.recorder.start();
                this.isRecording = true;
            }
        );

Java -

public Registration addResultListener(ComponentEventListener<ResultEvent> listener) {
        return getElement().addEventListener("result", componentEvent -> {
            String base64 = componentEvent.getEventData().getString("event.detail.base64");
            byte[] bytes = Base64.decodeBase64(base64);
            listener.onComponentEvent(new ResultEvent(this, base64, bytes));
        }).addEventData("event.detail.base64");
    }


    /**
     * ResultEvent is triggered when media is recorded.
     */
    public static class ResultEvent extends ComponentEvent<MediaRecorder> {
        @Getter
        private final String base64;
        @Getter
        private final byte[] bytes;

        public ResultEvent(MediaRecorder source, String base64, byte[] bytes) {
            super(source, true);
            this.bytes = bytes;
            this.base64 = base64;
        }
    }

But is this correct way ? Should I be using something like this? https://vaadin.com/docs/latest/advanced/stream-resources ?

Upload component is a different case