Export movie to MP4 codec H264 MPEG-4 AVC

[etro-js]

Export movie to MP4 codec H264 MPEG-4 AVC

[jjf21]

Hello, I am experiencing same kind of issue here.

When I try to export I get a corrupted file.
On Firefox export works and file can be open with VLC,
with Chrome, I get a buggy file with the sound and only few images of the video.
If I set a video element src with the blob URL, video is correctly playing...
Looks like an encoding problem

Did you guys find a solution ?

Thanks for your help !

[clabe45]

Hello, what was the code you used to export it?

[eboujlal]

For the blob creation i passed type and codec to Vidar like this:

            this._mediaRecorder = null;
            resolve(
              new Blob(recordedChunks,
              {"type" : "video/mp4","codec":"h264"}
            ));

then after the creation of blob file i used StreamSaver, just like that,

        const fileStream = streamSaver.createWriteStream('rendered_video.mp4', {
            size: blob.size 
        });
        const readableStream = blob.stream()
        if (window.WritableStream && readableStream.pipeTo) {
          return readableStream.pipeTo(fileStream)
            .then(() => console.log('done writing'))
        }
        // Write (pipe) manually
        window.writer = fileStream.getWriter()
        const reader = readableStream.getReader()
        const pump = () => reader.read()
          .then(res => res.done
            ? writer.close()
            : writer.write(res.value).then(pump))
        pump();

but the rendered video is corrupted, i am in the final step, i created 3D/2D animation and i will share them later after i fix some bugs, i will also share a new webapp based on Vidar library in the next days, i have only one big problem now which is export movie to mp4 with h264 using JS only, i hope you can help me in that.

Animations i made until now :
3D Filp 360deg
3D Rotation 360deg
2D Rotation 360deg
2D Zoom
Fade In

[clabe45]

Is the first code block your code or vidar's? Also, what version or commit hash of vidar are you using?

Oh, awesome!! My twitter handle is @clabe45 if you want to chat more about that!

[eboujlal]

Hello i am following you like one month ago, but i can't send you a private message, here is my twitter @eboujlal .

The first code block is Vidar's code modified directly, and the second block is my own code to save blob as mp4 but it's not working, i get always a damaged mp4 video.

[clabe45]

Ah, sorry I haven't check Twitter for a while. I just followed you back so we can now chat haha

Try putting the codecs in the type option, as documented here:

movie.record({ framerate: 30, type: 'video/mp4; codecs="h264"' })

(I am not sure if that is the right name for the codec you want)

[eboujlal]

Hello, after I tried the latest update which i had to modify the whole code because the way we create instance of classes like Text or Image changed from a parameter with simple value to a parameter with object, that make it difficult to migrate to migrate from last version to the current version, but the current looks more structured and clean.

I sill have a problem with the exportation, and that is the blob i got after i record the movie :
blob:null/02e99e20-6505-48c0-beb0-7bbbe8e43950

I can export and download the video as mp4 video, but it is damaged and corrupted, and this is the problem i want to fix.

Here is the exported video :
https://user-images.githubusercontent.com/13316965/106412340-d42b5f80-6447-11eb-810c-b58c81539e49.mp4

[clabe45]

Yeah, migrating was a concern of mine, but I thought it would be better to change all the arguments to be in options sooner than later.

Can you post the code you used to call the record method of Movie?

[eboujlal]

Hello,

Here is the code i used to render the video and call record method :

$('#render').on('click', function(e){
  layersToVidar();
  $('#canvasPreview').hide();
  $('#controllers').hide();
  $('#videoSection').hide();
  $('#videoPreview').show();
  $('#waitRendering').show();
  $('#videoSection').hide();
  $('#timeLinePreview').hide();
  $('#previewModal').modal('show');
  video.record({ framerate: 60, type: "video/mp4;codecs=h264" }).then(blob => {
      const output_video = document.querySelector('#videoSection video')
      output_video.src = URL.createObjectURL(blob);
      // console.log(videoObj);
      rendered_video = blob;
      $('#waitRendering').hide();
      $('#videoSection').show();
      $('#downloader').show();
  }).catch(error => {
    throw error
  })
});

And for saving the blob file to mp4 i used StreamSaver :

$('#saveAs').on('click',function(e){
    e.preventDefault();
    const fileStream = streamSaver.createWriteStream('rendered_video.mp4', {
        size: rendered_video.size 
    });
    const readableStream = rendered_video.stream()

    if (window.WritableStream && readableStream.pipeTo) {
      return readableStream.pipeTo(fileStream)
        .then(() => console.log('done writing'))
    }

    // Write (pipe) manually
    window.writer = fileStream.getWriter()

    const reader = readableStream.getReader()
    const pump = () => reader.read()
      .then(res => res.done
        ? writer.close()
        : writer.write(res.value).then(pump))

    pump();
});

[clabe45]

I get that warning too sometimes, but I can still play it (at least when I set a video element's src to the blob url). Can you try setting a video element's src to the blob's url instead of downloading? Not sure but that might work, and then we can work from there.

[eboujlal]

I can show the rendered video, by adding this code :

const output_video = document.querySelector('#videoSection video')
output_video.src = URL.createObjectURL(blob);

But the problem still in saving the video as mp4 and with the good codec.

[clabe45]

@jjf21 you can play it but frames are dropped? That might be the realtime recording not giving enough time to process well, which is a different issue.

[clabe45]

@eboujlal Looks like a FF issue. I can open the mp4 you provided in chrome and VLC. VIdar relies on the MediaStream Recorder API.

[clabe45]

I'm going to close this. If you think this is not a browser issue, feel free to re-open.

[clabe45]

Hey everyone, it turns out the type option was being ignored by record, so it most likely is a Vidar issue. It should be fixed for the next release. You can test it with the master branch if you want. Thanks for opening the issue, it always helps to know what bugs are out there!

[clabe45]

I know it's been a while, but version 0.8.3 has been released. Should be fixed now