m3u8 resource not work on iphone12

[suconghou]

mp4 url is ok , but m3u8 url not work , it maybe a IOS bug , maybe we can try render video as canvas replace video element.

[WoodNeck]

Can you share the code using the video with panoviewer? I've heard that m3u8 requires MIME type attribute so maybe that's the cause.

• https://stackoverflow.com/a/23225645

[suconghou]

https://codepen.io/suconghou/pen/abBKdEm

it is not about the MIME type , three.js I have also tried, maybe the webgl api on iphone12 cannot get data from m3u8 video element correctly.

[WoodNeck]

I think you can use video.js with our panoviewer. Here's some demo code for it:

• https://codepen.io/woodneck/pen/dyOKGBm
• https://naver.github.io/egjs-view360/examples/panoviewer/etc/videojs.html

[suconghou]

@WoodNeck did you try https://codepen.io/woodneck/pen/dyOKGBm on iphone12 , all the video element of course plays well ( both my example and your example ) , the main point is the rendered webgl canvas not correct

[WoodNeck]

@suconghou Sorry, I misunderstood as your example didn't work on my env. I've just tested it on my iPad, and found it couldn't load video texture. (also not triggering ready event) I agree that this is an iOS bug, and I've also found some similar issues

• https://bugs.webkit.org/show_bug.cgi?id=179417
• https://github.com/mrdoob/three.js/issues/9754

I'll work on it soon.

[suconghou]

yes , I had works on it for days, the only way I can imagine is to use a middle canvas to fix it when the resource is m3u8

[WoodNeck]

Thanks for the suggestion, I'll try that :)

[suconghou]

is there any progress ? waiting for this .

[WoodNeck]

@suconghou Sorry but it'll take a while as I'm working on the other project 😥

[suconghou]

@WoodNeck 😥 I am going to read the code and fix it by myself , any suggestions for me how can I come to the point

[suconghou]

clone & npm install ; but can not run npm start error

[12:00:05] admin:egjs-view360 git:(master*) $ npm start

> @egjs/view360@3.4.3-snapshot start
> webpack-dev-server --open --host 0.0.0.0

sh: webpack-dev-server: command not found

after npm i webpack-dev-server got

[12:02:43] admin:egjs-view360 git:(master*) $ npm start               

> @egjs/view360@3.4.3-snapshot start
> webpack-dev-server --open --host 0.0.0.0

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
node:internal/modules/cjs/loader:927
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'

what's the version of webpack-dev-server, maybe you should add webpack-dev-server in your package.json

[WoodNeck]

@suconghou Sorry that I can't lend some time for this issue at the moment 😭

that start script is actually just leftover when we're using webpack for the build script. We don't actually have any proper automated watch & serve script for a development environment. For now, you can try npm run build for every change and npm run demo:prebuild-latest to apply the change. The actual demo server is can be run by calling demo:start script, which will require jekyll so please install that before.

Or you can reference dev script in my other repository

• https://github.com/naver/egjs-view3d/blob/main/package.json
• https://github.com/naver/egjs-view3d/blob/main/rollup.config.dev.js

PRs welcome!

[juanuys]

I've also experienced issues with iOS Safari (version 14.5, using the simulator). Here's a pen to illustrate:

https://codepen.io/juanuys/pen/ZEewPMw

There's a TODO in the Javascript which you can uncomment, which will show the video element playing the HLS video correctly, but somehow it can be processed by PanoViewer and shown in a canvas.

PS if you get a modal asking for permission I've found that I have to click Deny for it to work.

This is what I expect to see (desktop Safari):

However, instead I see this green screen (iOS14.5 Safari, via simulator):

[WoodNeck]

Well, sorry for the long wait but it looks like it's an issue with iOS. I've tried the solutions mentioned on other libraries & Stackoverflow.

Tried:

• Copying the video texture to 2D canvas. Works on all other platforms but iOS.
• As it's mostly the CORS issue, like it's said in https://stackoverflow.com/questions/43287226/hls-video-streaming-on-ios-safari. I've tried serving the m3u8 file on the local(same) network but it doesn't work either.

I guess we'll just have to wait for an iOS update

[suconghou]

I temporarily solved this months ago , there is a fork https://github.com/suconghou/egjs-view360

It render video to canvas on iphone12, a little slower , but works .

[WoodNeck]

Forgot to mention that I've tested your fork also, it doesn't work on my env (iPad 14.7.1)

[suconghou]

new PanoViewer(this.opt.container, { video: video, projectionType: "equirectangular", useZoom: true, } );

2.

video.crossOrigin = 'anonymous' video.setAttribute('crossOrigin', 'anonymous') video.setAttribute('crossorigin', 'anonymous')

3.  add Access-Control-Allow-Origin to the m3u8 url

those works on iphone12 when I did my fork

[WoodNeck]

Some of those are new, I'll try that thanks :)

[WoodNeck]

I've tried your solution, but it still doesn't work on my iPad.

1. I served m3u8 video with Access-Control-Allow-Origin tag, used http-server's --cors option

   The above screenshot is taken from Windows Edge

2. Added crossorigin property to the video element

   
   video.style.display = "none";
   video.crossOrigin = 'anonymous'
   video.setAttribute('crossOrigin', 'anonymous')
   video.setAttribute('crossorigin', 'anonymous')

var panoViewer = new eg.view360.PanoViewer(view360Container, { video, useZoom: true, isVideo: true, projectionType: "equirectangular" } )

3. Tested on your fork
![image](https://user-images.githubusercontent.com/26213435/130409955-d8260878-261f-42e2-93d1-0ce63dfbd027.png)

---

Also, for further testing, I made my PanoViewer always use 2D canvas(`_initPixelSource`) and bind texture immediately to render frames as videojs already does that before.

[WoodNeck]

In issue #363, I found that the demo (https://codepen.io/awoodall/pen/jOwEGGQ) works correctly on my iPad, even though it uses HLS video. I guess using hls.js can be one solution to this issue. Of course, additional test using the iPhone devices is needed.

[stale[bot]]

This issue/PR has been automatically marked as stale because it has not had any update (including commits, comments, labels, milestones, etc) for 30 days. It will be closed automatically if no further update occurs in 7 day. Thank you for your contributions!

한글

이 이슈/PR은 commits, comments, labels, milestones 등 30일간 활동이 없어 자동으로 stale 상태로 전환되었습니다. 이후 7일간 활동이 없다면 자동으로 닫힐 예정입니다. 프로젝트 개선에 기여해주셔서 감사합니다.