Video perfomance - Githubissues

mrsln commented 6 years ago

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 commented 6 years ago

@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.

xxx0202xxx commented 6 years ago

@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 commented 6 years ago

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

chbae commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

IuriiStavnichuk commented 6 years ago

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

mrsln commented 6 years ago

@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 commented 6 years ago

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

SteffenDE commented 4 years ago

The HTML5 video tag seems to work just fine on a Raspberry Pi 4 and the latest 2.1.0 build. Great work!

webosose / build-webos

Video perfomance #5