Repository: aframevr/aframe

Issue #4134: iOS 12.2 video HLS Wrong Color / Occasional black screen
Created: 2019-04-24T06:50:46Z
Recently iOS version 12.2 was pushed to everyone and it seemed to break video playback of aframe.
Problem 1: Color not mapped correctly
iOS seemed fixed the color BRGA problem since iOS 11 for native HLS, link . However, aframe still apply the ios10hls shader for playback on iOS native hls. This is messing up the colors to a wrong one. Using standard "flat" shader should be good enough for color.
Problem 2: Native HLS occasional black screen upon video Playback.
I have provided a sample code snippet. There is a certain chance such that canvas would display black screen. One finding is that when you change device orientation or enter / exit VR mode, the playback would become normal again. Could anyone advice how to fix this? Thanks!
Another thing that I found is that, some videos cannot play on iOS 12.2, like this one: https://github.com/mrdoob/three.js/raw/dev/examples/textures/sintel.mp4. While the example of aframe still works: https://aframe.io/examples/showcase/videosphere/. This is similar to Problem 2 that orientation change or enter / exit VR mode could put the playback back to normal. Could anyone advice?

A-Frame Version: 0.9.1
Platform / Device: iOS 12.2 Safari
Reproducible Code Snippet or URL:

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
    <style>
      #overlay {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        background-color: #000000;
        color: #ffffff;
      }
      #overlay > div {
        text-align: center;
      }
      #overlay > div > button {
        height: 20px;
        width: 100px;
        background: transparent;
        color: #ffffff;
        outline: 1px solid #ffffff;
        border: 0px;
        cursor: pointer;
      }
      #overlay > div > p {
        color: #777777;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <a-scene>
      <assets>
        <video id="video" loop crossorigin="anonymous" webkit-playsinline src="https://bitmovin.com/player-content/playhouse-vr/m3u8s/105560.m3u8">
        </video>
      </assets>
      <a-videosphere src="#video" rotation="0 -90 0"></a-videosphere>
    </a-scene>

    <div id="overlay">
      <div>
        <button id="startButton">Click to Play</button>
        <p>Automatic video playback with audio requires a user interaction.</p>
      </div>
    </div>

    <script>
      var overlay = document.getElementById('overlay');
      var startButton = document.getElementById( 'startButton' );
      var video = document.getElementById('video');
      startButton.addEventListener( 'click', function () {
        video.play();
        overlay.style = 'display:none';
      }, false );
    </script>

  </body>
</html>

Duplicate issue #4677: Color of HLS video on ios devices seems to be broken
Created: 2020-09-08T10:34:25Z
Description:
On using HLS (.m3u8) video on apple devices, the color of the final video is distorted.
Original video -

What we see inside Aframe -



A-Frame Version: 1.0.4 (Latest)


Platform / Device: IPhone 7/ IPhone X / IPhone XS / IPad 6th Generation


Reproducible Code Snippet or URL:
https://honored-recondite-wolverine.glitch.me/
https://glitch.com/edit/#!/honored-recondite-wolverine?path=index.html%3A20%3A41


Solution
It seems like there is an extra check for ios + hls - 
  
    
      aframe/src/systems/material.js
    
    
         Line 159
      in
      4a44a80
    
  
  
    

        
          
           if (this.sceneEl.isIOS && 
        
    
  

 which might not be needed anymore.  (Ref mrdoob/three.js#9754 (comment) )


Commenting the check fixes the color on the video -
      if (this.sceneEl.isIOS &&
          isHLS(videoEl.src || videoEl.getAttribute('src'),
                videoEl.type || videoEl.getAttribute('type'))) {
        // Actually BGRA. Tell shader to correct later.
        //texture.format = THREE.RGBAFormat;
        // texture.needsCorrectionBGRA = true;
        // Apparently needed for HLS. Tell shader to correct later.
        //texture.flipY = false;
        //texture.needsCorrectionFlipY = true;
      }
https://brook-changeable-celery.glitch.me/
https://glitch.com/edit/#!/brook-changeable-celery?path=script.js%3A14%3A2

Happy to file for a P.R. for removing the code if the maintainers feel that might be the right way to go.

Closing comment (2020-09-08T14:38:08Z): Dup? #4134