New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video perfomance #5

Open
mrsln opened this Issue Mar 27, 2018 · 10 comments

Comments

Projects
None yet
6 participants
@mrsln

mrsln commented Mar 27, 2018

Hi!
Using pre-installed test apps I was able to navigate to a page in my local network. The page only has a <video /> tag. I found out that mp4 HD videos freeze for a second every several seconds but it plays smoothly when the video quality is 360p. However, the Youtube app is able to play crispy HD videos smoothly. How can I achieve the same quality?
Thank you!

@chbae

This comment has been minimized.

Contributor

chbae commented Mar 29, 2018

@mrsln
webOS OSE doesn't support H/W acceleration for HTML5 video tag. So the mp4 HD videos using video tag is not played well. Maintainer of webOS OSE multimedia will reply it soon.

@chbae chbae added the enhancement label Mar 29, 2018

@xxx0202xxx

This comment has been minimized.

xxx0202xxx commented Mar 29, 2018

@mrsln @chbae
The source code has limitation of using H/W acceleration about HTML5 video tag.
So you can get a performance issue in this case.

I will consider supporting H/W acceleration in the next update for the HTML5 video tag.

Thanks

@mrsln

This comment has been minimized.

mrsln commented Mar 29, 2018

Thank you very much for the reply!
Do you have any idea how Youtube app is able to play crispy videos?

@chbae

This comment has been minimized.

Contributor

chbae commented Mar 29, 2018

Do you have any idea how Youtube app is able to play crispy videos?

That does not use video tag and webOS OSE supports H/W acceleration in Media Source Extensions case like youtube.

@rip3rs

This comment has been minimized.

rip3rs commented Mar 29, 2018

hmmm could it be because VTG is enabled even in horizontal mode?
From LG DS by using texture on the video tag it enables the rotation of the video but by doing so, CSS translateX animations tend to stutter.
by doing a css body { transform: rotate(90deg) } the video will rotate accordingly.
Could it be that VTG is ALWAYS on?

@SangrokKang

This comment has been minimized.

SangrokKang commented Mar 29, 2018

@rip3rs I don't think that VTG is working on webOS OSE. VTG is only applied to the webOS Signage product. I think that webOS OSE does not have the VTG feature.

@mrsln

This comment has been minimized.

mrsln commented Mar 30, 2018

thanks @chbae! It totally worked: I got smooth hd video on RPI %)

@IuriiStavnichuk

This comment has been minimized.

IuriiStavnichuk commented May 10, 2018

@mrsln
I have the same video performance issue, could you please explain how did you solve it?

@mrsln

This comment has been minimized.

mrsln commented May 10, 2018

@lemketron I'm happy to help. I don't remember the specifics but you have to stream the video (which can be accomplished on the client side) in a right format. Here's a working example.

First you need to encode the video in right way. Here's ffmpeg command to acomplish that:

ffmpeg.exe -i input_file -movflags empty_moov+omit_tfhd_offset+frag_keyframe+default_base_moof+isml -c:a aac output_file

and then play it like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    video {
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <video muted></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = './bmw22.mp4';
      // ./mp4info frag_bunny.mp4 | grep Codec
      var mimeCodec = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';

      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }

      function sourceOpen (_) {
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
          sourceBuffer.addEventListener('updateend', function (_) {
            mediaSource.endOfStream();
            video.play();
          });
          sourceBuffer.appendBuffer(buf);
        });
      };

      function fetchAB (url, cb) {
        console.log(url);
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
          cb(xhr.response);
        };
        xhr.send();
      };
    </script>
  </body>
</html>

Hope it helps!

@IuriiStavnichuk

This comment has been minimized.

IuriiStavnichuk commented May 10, 2018

@mrsln
Using your approach, I see only a very slight stutter on my RP3, it's much better than before.
Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment