HLS 360 - CORS - Your browser/device not supported

orbis-automation commented 4 years ago

Description

Doesn't work on any mobile browser, but works on Desktop OSX Chrome and Windows Chrome

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://unpkg.com/video.js/dist/video-js.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <video-js id="my_video_1" class="vjs-default-skin" controls> </video-js>
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="./dist/videojs-vr.js"></script>
    <script>
      var player = videojs("my_video_1");
      player.src({
        src: "/myStream.m3u8",
        type: "application/x-mpegURL",
        withCredentials: true,
      });
      if (!player.mediainfo) {
        player.mediainfo = {};
      }
      if (!player.mediainfo.projection) {
        player.mediainfo.projection = "360";
      }
      player.vr({ projection: "AUTO" });
    </script>
  </body>
</html>

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

Open on mobile phone with any browser

Results

Expected

Expected to see 360 HLS stream on Gear VR(Samsung S7, Samsung S10), Oculus Go, Mobile Chrome, like I do on desktop

Actual

Getting error message "Your browser/device does not support HLS 360 video. See http://webvr.info for assistance

Error output

video.js:84 VIDEOJS: ERROR: (CODE:web-vr-hls-cors-not-supported undefined) Your browser/device does not support HLS 360 video. See http://webvr.info for assistance. MediaError {code: "web-vr-hls-cors-not-supported", message: "Your browser/device does not support HLS 360 video. See http://webvr.info for assistance."}

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

7.7.5

browsers

Chrome 81, Oculus browser, Samsung Internet 11.1.2.2

OSes

Android

gkatsev commented 4 years ago

Have a link to your stream? It sounds like it doesn't have CORS enabled, so, I would recommend making sure that's available. See https://enable-cors.org/

mrkos67 commented 4 years ago

I'm experiencing the same thing with HLS/360 streams.

CORS is enabled (ran into another, similar issue, throwing the same CORS error on Desktop/Chrome, but I fixed it with adding the attribute crossorigin="anonymous" on the video tag itself after verifying CORS was enabled on my google bucket).

First noticed on an actual Samsung Note 10, confirmed in Browserstack across all Android/Chrome devices I've tried. The video still plays within the video tag and reacts to controls + api commands like play and pause, but it's only the flat video (i.e. the video isn't getting applied as a texture to the THREE object for 3d panning).

All Android/Firefox devices I've tried in Browserstack not only don't show the error on screen, but also don't show the video, even though it seems the video is still there and reacts to api commands and generating video events.

helge79 commented 4 years ago

It simply does not work (see #106 or #198) but definitely worked before.

IMHO some policy change took place in Chrome for Android which disallows to place textures on objects when streaming content, i.e. hls or dash. My wild guess is that the crossorigin setting simply applies to the video content so setting it on a manifest would have no effect, see my comment in #106. But that's just a guess.

However it can be done somehow - see nsfw-related tube sites. With videojs-vr only <video> with a video-source works fine while <video> with a manifest does not work anymore.

RaviJayagopal commented 4 years ago

I have the same issue. It works on browser (Windows; Chrome, Firefox & Opera all work fine on desktop).

Does not work on iPhone 7 Plus. Get the following error:

"The media playback was aborted due to a corruption problem or because the media used features your browser did...."

Here's the link: https://www.webmasterinabox.net/browse-button-test-56/

tmadison-gpsw commented 4 years ago

@RaviJayagopal Same here on Pixel 4 Chrome.

naren0021 commented 3 years ago

@tmadison-gpsw Did you manage to resolve the above error , I am facing the same issue, Thank you in advance

David2k13 commented 3 years ago

crossorigin="anonymous"

vnext-nguyen-quyen commented 2 years ago

Add property: crossorigin="anonymous" to HTML video tag, work for me.

brootle commented 1 year ago

@gkatsev can you probably update videojs or videojs-vr plugin in a way so I don't have to add crossorigin="anonymous" to HTML video tag? I didn't dig in much, but I faced same problem... adding crossorigin property to video tag fixes the problem, but it looks as a hack and I don't really know why I need to do that update.

I checked your solution for Brightcove https://player.support.brightcove.com/plugins/360degvr-video-plugin.html and it works without adding crossorigin="anonymous" even when the video source is requested from different domain, so maybe I am just missing something? Thanks!

For the reference, here is player example with VR 360 at Codepen https://codepen.io/brootle/pen/oNMYEWJ

videojs / videojs-vr