I had a problem rendering 360 videos to canvas using webGL in ios 10.3. Similar symptoms of this problem indicate the well-known CORS issue for ios safari, which has not yet been fixed. Proposed workarounds revolve around a reverse proxy server or host video in the same domain.
I have a video in the same domain and I still get this problem:
SecurityError (DOM Exception 18): The operation is insecure.
Not only the video in the same domain, I also have this set on the server:
Access-Control-Allow-Origin: *
(However, in this scenario, it makes little sense that I should have a CORS problem. It’s just that a security error seems symptomatic of this problem).
This problem occurs only in ios 10.3. ios 10.2 can correctly display my 360 video. In addition, all modern desktop and Android browsers display video quality (this video in the code snippet below is just the source of the video source). Here is the line that the error indicates in the safari web inspector:
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.video);
and here is the location of the video in my file .html:
<video id="video" autoplay preload="auto" crossorigin="anonymous" style="display: none;" playsinline>
<source src="https://example.com/example360video.mp4?q=1" type="video/mp4">
</video>
I am caching using q=1Also here is the header obtained from my video via curl -v:
< HTTP/1.1 200 OK < : , 13 2017 15:51:51 GMT < : Apache/2.2.31 < : , 12 2017 15:07:57 GMT < ETag: "xxxxxxxxxxxxxx" < Accept-Ranges: bytes < Content-Length: 43720623 < Cache-Control: max-age = 2592000 < : , 13 2017 15:51:51 GMT < Access-Control-Allow-Origin: * < : < Content-Type: video/mp4
- ? - ? -, , ios 10.3, , .