html display video file binary buffer

Question

I am working on an example of ffmpeg-wasm which will accept 3 files as input [song1.mp3, song2.mp3, image.png] and combine them into a video file [cool-output-video.mkv] which I want to be displayed as a playable video for the user in the html webpage.

https://github.com/MartinBarker/ffmpeg-wasm-node

My code is hosted in the above repo, right now I have a placeholder video element, which I want to change to the finished video after the user uploads the 3 files and clicks the render button.

inside server.js, I have the route app.post('/render' , which will render the video using ffmpeg, and return the video using the line res.end(Buffer.from(outputData, 'binary'));

        outputData = ffmpeg.FS('readFile', outputFileName);
        ffmpeg.FS('unlink', outputFileName);

        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Disposition': `attachment;filename=${outputFileName}`,
            'Content-Length': outputData.length
        });
        //res.end(btoa(Buffer.from(outputData, 'binary')));
        //res.end(outputData)
        res.end(Buffer.from(outputData, 'binary'));

I can see in my node server console log that the ffmpeg command finished and successfully renders the mkv video file

and inside client.js is where my code recieves the binary buffer for my outputted video file, and tries to make it appear on the webpage by changing the src attribute for the html video element, but no matter what code I try, I cant get the video file to appear on the html page

      <video width="320" height="240" controls>
            <source id='mp4source' src="" type="video/mp4">
          Your browser does not support the video tag.
        </video>
...

const mp4source = document.querySelector('#mp4source')

...

            console.log('call renderVideo()')
            const renderResult = await renderVideo(files);
            console.log('renderVideo() finished. renderResult=',renderResult)
            mp4source.src = renderResult

I can see in my html file in my chrome webpage devtools console, that data is being returned and gets printed out, I'm just not sure how to handle this string data for my video file to make it appear on the webpage:

renderVideo() finished. renderResult= data:image/png;base64,GkXfo6NChoEBQveBAULygQRC84EIQoKIbWF0cm9za2FCh4EEQoWBAhhTgGcBAAAAC0APWxFNm3TCv4T+wiwATbuLU6uEFUmpZlOsgaFNu4tTq4QWVK5rU6yB8U27jFOrhBJUw2dTrIIB1E27jlOrhBxTu2tTrIQLQA797AEAAAAAAABRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFUmpZsu/hLA0O5Qq17GDD0JATYCNTGF2ZjU4LjQ1LjEwMFdBjUxhdmY1OC40NS4xMDBzpJAgTn1WHXX52GUlw+lW90wkRImIQRzeoAAAAAAWVK5rQN2/hEsGuLSuAQAAAAAAAD3XgQFzxYjtk28iSHTlJJyBACK1nIN1bmSGj............. long text was truncated etc

EDIT changed my ffmpeg command to export an mp4 video, changed header to be video/mp4, and verified it is getting added to the html src element but the video still does not appear

Answer 1

solved by reading the comment on this post: Base64 value is not working with video tag?

had to move src tag from the element to the element instead and now it works!