Three.js: Safari / IOS 上的 HLS 现在无法正常工作

它正在绘制到画布并使用画布渲染器进行渲染，尽管会丢帧。 webgl 需要一些东西。

这是一种美。 我使用代理的 HLS 流稍微修改了 kpano 演示。

它现在可以在 Safari OSX 上运行，但不能在 IOS 9 上运行。任何想法有什么区别？ 可悲的是，我不是 webgl 标志的专家，也不是他们甚至做什么的专家。 在IOS9上它仍然是一个黑框。

http://dev.electroteque.org/threejs/webgl.html

最后一个链接是黑色矩形/声音仅在 safari 9.1.3 / mac os x 10.11.6

什么是 HLS？

@makc真的吗？ 我有 OSX 10.10 和 Safari 10。这解释了 Apple 最近的破坏性变化。 Safari 10。所以如果我们是 Safari 10，我们都很好。

@mrdoob HLS = Apple 流媒体。 即用于直播和视频点播。 直播将成为 Terradeck 设备的常态。 即http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

任何想法可能存在什么差异？ 我尝试在第一个示例中更改一些内容。 第二个例子是原始的 webgl 函数。

所以 texImage2D 会部分渲染 HLS，但不会在 IOS 上渲染，也许是因为它不是 Safari 10？

请原谅我报告了一些 webkit 错误票。

他们已经破坏了对 IOS 更新的 CORS 代理黑客攻击。 据报道，macOS 也没有修复 Safari 中的 CORS 问题。

我现在必须弄清楚如何解决他们的破坏行为。 我必须让它工作以进一步测试在 IOS 上工作的 HLS。 Apple 真的让我大汗淋漓地灭火，哈哈。

如果我能获得 OSX 渲染，那将是一个开始。 我只需要弄清楚 Three.js 有什么不同？

我仍在尝试使用减少方法来比较不同之处。 一旦我弄清楚了，我也可以让 IOS 工作。

可能是 Three.js 中额外的着色器程序导致了渲染问题？ 我并没有跨越它，而是试图在原始 webgl 示例中复制three.js 在那个等距柱状示例中所做的事情。 是否有用于此的示例着色器代码？

我在这里找到了一些原始函数，希望我可以完全复制three.js正在做的事情。 我不能直接复制着色器程序，因为有些变量是像世界位置一样在外部设置的。

https://bl.ocks.org/mbostock/5446416

我可能刚刚遇到了这个问题，也可能是一个相关的问题。 我在 S3 存储桶上有 h264 mp4 文件，我将它们作为 blob 加载到 video.src。

如果我使用基于亚马逊网络的上传器上传到我的 S3 存储桶，当直接加载到 Mobile Safari (iOS 10.0.1) 时，视频可以正常播放，但是如果我尝试使用我的 Three.js 查看器播放它们，那么我只会得到一个黑屏。 但是，如果我使用 Cyber​​duck 上传到 S3 存储桶，它们会直接在 Mobile Safari 和three.js 中正常播放。

看起来 Cyber​​duck 正在设置元数据“Content-Type=video/mp4”，而 AWS 上传器是“Content-Type=application/octet-stream”。 当我手动将此元数据设置为 video/mp4 时，一切正常。

奇怪的问题，一个让我头疼的问题。 让我知道这是否与这张票存在相同的潜在问题，或者我是否应该创建一个新的。

谢谢，
达斯汀

这适用于 HLS mate，如 mpegts 片段或碎片文件而不是 mp4。 Mp4 在 Safari 和 IOS 上都很好。 我检查了 Cyber​​duck 中的 mimetype，它说 mpegts 是正确的。

相同的流在原始 webgl 示例中对我有用，当然只是不在 IOS 上。 您的问题似乎与我的相似，尽管在黑色框架中。 根本没有渲染。

@danrossi不错。 我将专门为我的问题创建一个新票证。 谢谢。

我认为这是问题所在： www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
我目前正在尝试为three.js 实施相同的解决方法，但还没有走得太远。

@phaseOne。 这是一个 safari 问题，作为 OSX 和 IOS 上的问题。 Mp4 适用于 IOS 和 OSX。 我会修改 antialias 。

仍然无法弄清楚两者之间的差异。 原始的 webgl 示例仍然无法在 IOS 上运行，但让它在 OSX 上运行是一个开始。

我想知道是否可以找到一个可以使用的等距矩形着色器程序。

更多信息： http :

我意识到这是一个浏览器错误，但考虑到这些 WebGL 错误需要多长时间才能修复，因此可能需要实施变通方法。

在通过画布使用纹理的情况下，视频在 safari 中显示。
但是，由于 iOS 中仍然存在 CORS 问题，因此它仅适用于 Same Origin。
https://bugs.webkit.org/show_bug.cgi?id=135379

我对webgl不熟悉，但请参考以下内容。
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT我想我知道你的意思是使用 canavasrender。 我确实尝试过做减法。

我认为这是有效的，但由于 cpu 导致严重的丢帧和播放性能问题。 在IOS上显然更糟。 Ipad 3 已经为 webgl 丢帧了。

@danrossi我有一点误解。 抱歉。 我发送了一个误导的东西。

我已经确认了使用原始 webgl 和着色器的 elevr 项目存在同样的问题。 必须破解那个才能回去。 那里的某些东西会导致渲染问题，并且会同样影响three.js。

我已经在 elevr 中确认它正在自动清除绑定导致它破裂的纹理，即

webGL.gl.bindTexture(webGL.gl.TEXTURE_2D, null);

如果这被注释掉它正在工作。

这也导致了一个问题，我不确定它的用途。

webGL.gl.pixelStorei(webGL.gl.UNPACK_FLIP_Y_WEBGL, true);

也许在 Three.js 中有一个自动清除属性在做同样的事情？

我看到很多引用

state.bindTexture(_gl.TEXTURE_2D, null);

但不知道它可能在哪里。 是否需要这样做？

代码太疯狂了，无法追踪导致纹理绘制问题的原因。 似乎有一些与这种纹理结合的东西。

@danrossi是否有任何页面可以正确呈现它？

对不起，噪音伙伴。 我做了更多的AB测试。 这确实是我提到的，因为我也不得不在 elevr 演示中将其注释掉。

_gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY);
https://github.com/mrdoob/three.js/blob/6c7f000734f8579da37fb39e5c2e9e5e2dfb14f8/src/renderers/webgl/WebGLTextures.js#L411

这导致了问题。 然而，没有它，纹理是颠倒的。 我将添加另一个测试以显示它现在可以正常工作。

http://dev.electroteque.org/threejs/hlsbroken.html
http://dev.electroteque.org/threejs/hls.html

我发现的另一个原始示例，注释掉了 FLIP_Y。 现在可能是 Webkit 错误？

http://dev.electroteque.org/threejs/webgl3.html

对flipY 的唯一参考是this 但webkit nightly 仍然是一个问题

https://bugs.webkit.org/show_bug.cgi?id=162491

如果我禁用我认为会破坏硬件加速的flipY，它是否正常工作？

texture = new THREE.VideoTexture( video );
                texture.minFilter = THREE.LinearFilter;
                texture.format = THREE.RGBFormat;
                texture.magFilter = THREE.LinearFilter;
                texture.flipY = false;

http://dev.electroteque.org/threejs/hlsflipy.html

现在试图看看它是否是一个 webkit 错误。 现在如何旋转纹理以解决它？

现在如何旋转纹理以解决它？

为什么不只是翻转几何体 uv 或在着色器中执行此操作

@makc我不知道该怎么做。

只是为了进一步了解。 这个 FlipY“修复”在 IOS 9 上没有帮助，只是对其进行了测试。

现在还有其他问题。 仅仅追踪这个就花了几天时间。

从表面上看，这可能是所有 webkit 的问题，而不是 Three.JS。 像往常一样对此感到抱歉。

我也在那里提交了一份报告https://bugs.webkit.org/show_bug.cgi?id=163866

我不知道该怎么做。

http://jsfiddle.net/hfj7gm6t/2182/

@makc确认翻转 uv 有帮助。 它如何与此相反？

uv.setY (i, 1 - uv.getY (i));

http://dev.electroteque.org/threejs/hls.html

问题在 IOS 上仍然很明显。

@马克。 这个着色器程序很可能正在做翻转，这是在演示源之一。

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

在原始演示中发现它似乎正在工作，因为它没有使用 FlipY 标志，它似乎在着色器程序中使用它。

http://dev.electroteque.org/threejs/webglnoflip.html

不知道如何将其集成到three.js 中？ 使用着色器程序会更好吗？

我现在还在调试IOS。

这个很有趣。 通过尝试将该计算复制到此示例中，它似乎正在翻转它，但仍然严重缩放。

http://dev.electroteque.org/threejs/webglflipped.html

所以 gl_Position 控制它的位置。

 gl_Position = vec4(aVertexPosition.x*2.0-1.0,1.0-aVertexPosition.y*2.0,0,1);

使用着色器程序会更好吗？

着色器程序每帧执行一次，而在整个过程开始之前只在几何中翻转一次 uv。

@makc可能最好只是在开始时设置值。 如果我是对的，这些 uv 值是着色器程序中的变量并用于计算？

我在来源中看到了一些对 gl_Position 的引用。 不确定这是否正确，但有这样一个

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

谢谢。

我在 IOS Safari 上用 webgl 尝试了各种技巧，看看我是否可以得到一个框架来渲染，现在它只是黑色的。 Mp4没问题。

这方面的资源不多。 我相信我的发现人们也在寻找。 顺便说一句，它适用于直播，但也适用于 VOD。

我让某人测试了一些东西。 他们相信这个带有 FLIPY 修复的原始 webgl 示例适用于 IOS 10，但three.js 版本实际上并没有在它们上崩溃。

我注意到它使用了 NEAREST 过滤器，这使得纹理块状，我试图复制那个但同样的问题。

所以这些都不起作用

http://dev.electroteque.org/threejs/hls.html
http://dev.electroteque.org/threejs/hls2.html

但这是给他们的，虽然我的 IOS 9 没有

http://dev.electroteque.org/threejs/webglworking.html

经过一些非常繁重和痛苦的测试后，我对演示和问题进行了微调。

跨 OSX 10.11 和 macOS 、IOS 9 和 10 的 HLS 都需要 FlipY 解决方法。原始 webgl 示例不使用 FlipY，因为它在着色器程序中执行。 使用three.js，几何必须翻转。

IOS 10 上的 HLS 渲染正在显示，但存在严重的颜色伪影问题。 帧停止工作，但我认为这是模拟器和丢帧的问题。 我现在没有可以更新到 IOS 10 的设备。它根本没有出现在 IOS 9 上。两者都需要用于 mp4 和 HLS 的 CORS 代理。

一旦我确认它不是模拟器，我现在可能必须提供另一张关于 IOS 10 上 HLS 的颜色渲染问题的票。

这绝对是痛苦的，难怪没有人想要支持 Safari，但人们需要它工作。

我不得不在这里提供不同的 rgb 格式设置。 默认的产生垂直 coiourbars ， rgba 一种颜色不正确。 但是在模拟器中。 我现在无法正确测试 IOS 10，因为我的 Ipad 设备已不受支持。 我会尝试拿一部装有 IOS 10 的 Iphone 来确认。

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/threejsrgba-hls.html

http://dev.electroteque.org/webgl/webgl.html
http://dev.electroteque.org/webgl/webglrgba.html

请专注于这两个例子。 RGB 标志在实际设备上没有区别，模拟器在使用 RGBA 格式时会产生错误的输出但类似的输出。

带有 HLS 的 IOS 9 / 10/ OSX Safari 需要 FlipY 解决方法。

我已经能够用 HLS webGL 渲染复制颜色问题，现在需要第二张票，尽管我不确定 Webkit flakey 错误是否是 Three.js 问题。

如此多的巨大缺陷和错误导致这成为一个表演障碍。

因此，此类 HLS webgl 输出仅部分适用于 IOS 10 而不是 IOS 9。现在许多设备都停留在 9 上。 我需要为 9 找到一个解决办法。

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/webgl.html

你好！ 我也有同样的问题。 你现在有什么解决办法吗？

是的，它在那些演示中，但请检查有关 IOS 10 的色彩空间问题的第二张票。似乎 Webkit/Apple 代表不会努力让它在 IOS 9 上运行，这意味着旧设备（例如 Ipad 3）被排除在外，尽管无论如何，它几乎无法渲染 5fps。 必须先集中精力让 IOS 10 正常运行。

尽管已向 Webkit 报告了此问题，但它可以解决此问题。 这是所有 Safari 上的问题。

http://dev.electroteque.org/webgl/webgl.html似乎不起作用。 我在 ios10 上测试了页面。 但是当页面加载时 safari 崩溃。

使用 Threejs 示例。

我测试了此问题上列出的所有示例。 似乎只有http://dev.electroteque.org/webgl/webglrgba.html有效。 但它有一个色彩空间问题。

@wuyingfengsui这是在 IOS 10 Iphone 上工作。

http://dev.electroteque.org/webgl/threejs-hls.html

您可能正在检查我打赌的模拟器。 这是一个巨大的问题。 它不仅不会更新显示绿色色条的框架。 使用 RGBA 标志时，它可以在模拟器上运行。 那里有一个奇怪的图形问题。

在实际的 IDevice 上，您会在使用 RGB 标志时看到色彩空间问题，就像在模拟器中使用 RGBA 标志一样！

我暂时无法正确测试 IOS 10，因为 Ipad 3 已经过时，但幸运的是我可以使用 Iphone。

还要注意上面的 CORS 代理 url。

现在参考这个关于色彩空间问题

https://github.com/mrdoob/three.js/issues/10067

以及这张 webkit 票，我怀疑他们是否会费心修复它并推送发布。

https://bugs.webkit.org/show_bug.cgi?id=164540

当我在 ios 10 iphone 7 上将 RGB 更改为 RGBA 时，我发现它有效。

好的，所以它对于不同的设备是不同的，很好。 我已将其更新为 RGBA。 这个怎么样 ？

http://dev.electroteque.org/webgl/threejs-hls.html

@danrossi它有效。

@wuyingfengsui我将不得不更新与此相关的 webkit 票证。 我看到还有其他颜色标志要弄乱，希望其中一个是正确的。 我尝试了不同的 HLS 流，它们是相同的。

您可以在three.js 常量中看到有一系列值可供使用。 即这些。 还有处理的字节类型标志。 反复试验和非常累人的反复试验。

https://github.com/mrdoob/three.js/blob/dev/src/constants.js#L126

遗憾的是，IOS 9 已经完全冗余了，它无法工作。 较旧的设备永远不会获得 IOS 10。

我相信有某种破坏正在发生，而且我相信它在 Safari 10 发布之前就可以工作了？ 由于与 Apple 和有时与 Android 的所有不一致，我的测试阶段花了几个月的时间。 当我测试 HLS 时，我相当肯定它是有效的。

我不熟悉 webGL。 我认为在 webkit 修复它之前无法解决它。

这就是将纹理上传到 webgl 的内容。 那里的那些标志很有趣。

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

@wuyingfengsui如果他们花了 5 年多的时间来部分“修复”macOS 中的 CORS 问题，那么请不要屏住呼吸。

这就是为什么必须有人坐在那里想办法解决问题，可悲的是，这就是我自己哈哈。

如果以原始 webgl 示例为例，这些标志可能会被弄乱。 或者通过three.js使用常量和属性“格式”和“类型”来做，类型是字节类型，格式是你见过的颜色格式，RGBA几乎没有让它起作用。

明天我会花一些时间来浏览每个标志，希望一个组合有效。

@danrossi 进展如何？

我只是尝试弄乱所有可能的标志，什么也没有。 它只能接受 RGB 和 RGBA 标志并且字节类型是无符号的。 其他选项只显示黑色画布。 不知道还能做什么？

@danrossi感谢您的工作。 我发现Hls.js使用 MSE 播放 hls 视频。 但 Safari Mobile 不支持 MSE。

@wuyingfengsui这是 IOS 的本机 HLS 问题，我上面的修复解决了 Safari OSX 的错误。

使用 Dash 流式传输时，即使使用代理工作，旧版 Safari 也存在 CORS 问题。 也许在 macOS 中他们也修复了这个问题？

除了使用上面的代码修复在three.js 中提供一种变通方法之外，可能没有什么可以做的。

我怀疑 webkit 和 Apple 会修复它。 所以现在所有人都在关注这张票。 RGB 标志的东西现在与 IOS 10 渲染有关。 困在它上面的 IOS 9 和更旧的设备被塞满了。

https://github.com/mrdoob/three.js/issues/10067

这里有任何更新吗？ 有没有人让它在 iOS 上使用固定颜色渲染？

请参考这张票。

https://github.com/mrdoob/three.js/issues/10067

我怀疑 HLS 工作是否会进入到three.js，它必须在它之外。

该解决方法的代码如下

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBAFormat;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
texture.flipY = false;

var geometry = new THREE.SphereBufferGeometry( 500, 64, 44 );
geometry.scale( - 1, 1, 1 );

var uv = geometry.getAttribute('uv');
for (var i = 0; i < uv.count; i++) {
     uv.setY (i, 1 - uv.getY (i));
}

如果您想弄乱 webgl 标志，请使用原始 webgl 示例。 我尝试了所有可能的选择，但现在一无所获。 它确实被破坏了，并且 webkit 没有响应。

http://dev.electroteque.org/webgl/webgl.html

谢谢。 除了 HLS 之外，还有其他视频格式可以流式传输到 iOS 视频标志吗？ 是否可以在没有渲染问题的情况下流式传输 H.264？

@pedrofranceschi mp4 很好。 这只是 HLS，它提供了在 IOS 上实时流式传输 360 视频的选项。

与此票证相关的翻转修复需要仅应用于 HLS 流和 Safari。 此 FlipY 修复程序在 IOS 9 上不起作用，它会将无法获得 IOS 10 的旧设备拒之门外。

我一直用于测试的 Ipad 3 永远不会让 HLS 和 WebGl 工作。 我不得不在较新的 Iphone 上进行测试。 IOS 10 模拟器几乎无法工作，并且存在与其他问题类似的颜色伪影问题。

至少 IOS 10 上 Iphone 的内联标志起作用了，内联视频和 webgl 现在是可能的，但 CORS 仍然是一个问题。 CORS 仅在 macOS 上的 Safari 中修复。

我之所以强调 Safari，只是因为它是另一个经典的 webkit 错误，并且其他浏览器上的 HLS.JS 流是可以的。

我发现它可以通过添加额外的画布来修复。 但它只适用于 iOS 10。看看这个提交： https :

那是一个非事件。 它使用带有 drawImage 的画布渲染。 不是 WebGL。 所以就像使用three.js画布渲染器一样。 Canvas 渲染器在 IOS 上真的很糟糕，导致掉帧，无法使用。 这是你的修复吗？

质量不是很好。 但它有效:)

掉帧不仅仅是一个质量问题:)

@mrdoob我已经尝试使用画布渲染器作为一种解决方法，但它为我做了这个。 我不确定它的问题是什么，它显示了一个网格。 轮换也不对。 加载一个 mp4 文件，它可以正确显示，但仍然是网格线。

这样做仍然会丢帧。

http://dev.electroteque.org/webgl/canvas-hls.html

@丹罗西

@mrdoob这个问题是关于 Safari 上的 HLS。 做所有这些演示真的很难。 但我做了一些组合。

我也刚刚发现 Chrome 现在拒绝播放 mp4，除非它使用 Safari CORS 代理版本的 mp4 啊。

至于奇怪的 CanvasRenderer 问题，它可能会暂时解决 IOS 10 的 HLS 问题。这里是组合，以便展示它的作用以及一些可能的奇怪旋转值偏移。 代码都是一样的。 纹理上有一个网格。

对于 Safari

http://dev.electroteque.org/webgl/webgl-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

铬

http://dev.electroteque.org/webgl/webgl-webm.html
http://dev.electroteque.org/webgl/canvas-webm.html

@danrossi Safari 版本也不适用于 iOS 10……

这应该适用于 IOS 10，但您应该会看到颜色伪影。

http://dev.electroteque.org/webgl/threejs-hls.html

那些其他的是 CanvasRenderer 测试，以尝试解决 IOS 问题，它至少应该在桌面浏览器上工作，而不是。

这应该适用于任何 IOS，但我不太关心那个。

http://dev.electroteque.org/webgl/webgl-mp4.html

我不相信 CanvasRender 解决方案对 IOS 来说是一个很好的解决方案，但它是一种选择。 因为它不仅仍然需要 CORS 代理，画布绘制只会导致丢帧。 Safari OSX 可以使用 Threejs-hls.html 中的 FlipY 解决方法

我已经更新了画布演示，它似乎不需要在外部绘制。

但是球体几何存在一个奇怪的问题，我无法弄清楚，因此图片无法正确渲染或旋转，它全部歪斜成一个点。

单击左上角区域，并尝试使用轨道控件进行拖动。

网格问题是我需要向 MeshBasicMaterial 添加“过度绘制：0.5”以阻止它显示网格。

使用 CanvasRenderer 时，都不需要在 safari 上使用 CORS 代理。 接下来我将尝试查看 SoftwareRenderer，看看它是否会在 CanvasRenderer 丢弃太多帧时工作得更好。

http://dev.electroteque.org/webgl/canvas-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

考虑到 CanvasRenderer 由于明显的丢帧而被标记为折旧。 我想唯一的最后手段是使用 SoftwareRenderer 尝试视频纹理。 该更改似乎尚未起作用，并且找不到示例设置。 它只是一块黑色的画布。

颜色故障的任何解决方法？ 一切都是蓝色的

@andreabadesso我有两张票设置，也许我应该合并它们。

对于 OSX，进行 FlipY 工作将解决这个令人讨厌的问题。 对于 IOS 10 ，完全需要其他的东西。

画布绘图是一个巨大的失败，它甚至没有开箱即用地正确渲染，宝石似乎扭曲了。 它也会掉帧。

我现在正在尝试使用仍然依赖画布绘图的“SoftwareRenderer”。 我现在得到的只是一张黑色画布，所以什么都没有。 零文档如何使用它来处理视频纹理。

没有其他选择，webkit 不会响应，我已经尝试了所有可能的 webgl 标志。 我可以回去尝试弄乱编码，但 HLS 是从工作 mp4 文件中打包的。

同时，如果有人需要一个绝望的解决方案，这将监视 .ts 文件，将它们转换为 .mp4 并发出一个 websocket，以便客户端可以下载 mp4 中的下一个片段（正在 ios10 上运行）：

https://github.com/Lab21k/node-hls-mp4-ws/

如果有人感兴趣，我可以提供完整的解决方案。

@andreabadesso你有关于你的解决方案的客户端实现吗？

那是极其狡猾的。 你不仅还需要一个 CORS 代理，它还试图实时通过 FFMPEG :O IOS 甚至做 websockets 吗？ 我知道它不能做 webrtc。

尝试通过画布绘图仍然通过 SoftwareRenderer 选项获取视频纹理也很糟糕。 这只是一个黑框。 这两个选项都是死胡同，我希望至少 SoftwareRenderer 可以处理视频纹理，只显示图像纹理。

大家好，过去一天我一直在研究颜色问题，我找到了一种适用于我的用例的解决方法。 这个线程非常有用，我想做出贡献。
问题只是红色和蓝色被交换了。 所以我使用 ffmpeg 来预切换这些颜色。 随着颜色在 Threejs 上重新切换，视频恢复到正常外观。
这不是最佳解决方案，但确实有效。 （在 IOS 10.2 上测试）

@Yralec

我认为这是编码问题或编码问题。

不过，这对 wowza 直播没有帮助。 没有人可能控制实时编码器的工作方式。 也许是点播。

你有 ffmpeg 标志来确认吗？

还是很惊人的。 除了仍然需要的 FlipY 问题之外，这听起来对于three.js 来说不是问题。

我就是无法理解为什么 Webkit 是这样的。

@丹罗西

这是我使用的命令：
ffmpeg -i in.mp4 -hls_time 10 -hls_list_size 0 -vf "colorchannelmixer=rr=0.0:rb=1.0:bb=0.0:br=1.0,vflip" -pix_fmt yuv420p out.m3u8
正如你所看到的，我也在翻转输出，所以我不需要自己在 Threejs 中这样做。

好的，我正要问这个。

编写一个交换蓝色和绿色的着色器不是更容易吗？

@mrdoob我对着色器知之甚少，所以对我来说不是（我什至没有想到这一点），但是如果您知道如何编写一个可以交换红色和蓝色的着色器，这几乎肯定是一个更好的解决方案。
直播也可能最终奏效。

@mrdoob我认为你在做某事。 再次抱歉，这已成为另一个 Webkit 问题。 尽管如此，FlipY 修复仍然无法避免。

我做了一些研究，似乎有一个像这样的通道顺序交换，我现在是着色器的专家。

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob在我的原始 webgl 示例中，我尝试了类似的操作，但程序已损坏并导致错误。 所以这是它从纹理中获取颜色的地方，这显然是非常虚假的，“bgra”交换了红色和蓝色通道。

还不知道如何从中获得有效的解决方案。

 gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,txt).bgra;}");

只是复制和粘贴时出现程序错误。

使用上面的这段代码。 我可以确认正在渲染的内容是 IOS 10 中可见的内容，因此它应该希望反转着色器中交换的红色和模糊颜色？

http://dev.electroteque.org/webgl/webglbgra.html

@Yralec确认反转着色器上的颜色通道顺序在 IOS10 中被反转。 在模拟器中，我不得不将颜色格式更改为 rgba 以使其渲染而不会出现奇怪的线条。

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

@mrdoob如何在内置着色器程序上应用这种纹理颜色变化？

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob。 更正。 这可能是人们会使用的一种。

gl_FragColor = texture2D( tEquirect, sampleUV )

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

如何访问它以更改它？

@danrossi你可以在 JS 中破解这样的东西

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );

我相信我需要将着色器复制到 THREE.ShaderMaterial 中，但不知道如何应用纹理？

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";


                var uniforms =  {
                    tEquirect: { value: null },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

另一种方式是不灵活的，因为它必须仅适用于 IOS 中的 HLS 流。

实际上这在 safari 中呈现，但 FlipY 修复中断了。 它倒置播放。 心神不宁。 所有这些努力都归功于 Apple 和 Webkit 哈哈。

var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

@WestLangley补丁似乎不起作用。 我应该看到颜色反转但没有。

gl_FragColor=texture2D(sm,txt).bgra;

这是交换 [b]lue 和 [r]ed 的正确着色器：默认顺序是 rgba，所以 bgra 交换它们。

FlipY 修复中断

txt -> vec2(txt.x, 1.0 - txt.y) 例如

不知道怎么做

http://jsfiddle.net/p2duvg51/14/

该补丁似乎不起作用。 我应该看到颜色反转但没有。

也许你应用补丁太晚了

@makc是的，在我的原始 webgl 示例中，它在着色器中进行翻转。

我相信如果翻转是在我的 Threejs 示例中发布的 UV 代码上完成的，它不会在着色器中逐帧翻转。 我认为这会消除不必要的计算处理。

在原始 webgl 示例中，它在顶点着色器上翻转

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

然后在片段着色器中这会反转颜色通道。

precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx).bgra;}

试图在three.js中复制它是现在的问题。

对不起，这似乎有效，但 FlipY 修复不起作用。 我忘了添加 bgra。

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV ).bgra;\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";




                var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

如果我将默认的 tFlip 值更改为 1，它会以正确的方式显示，那么 HLS 的 FlipY 问题的另一个修复选项？

tFlip: { value: 1 }

视频已决定停止在模拟器中渲染，但至少我看到了颜色变化。 尽管调试它肯定会替换着色器代码，但该补丁无法正常工作。

似乎我可以使用该值进行翻转，只给它一个正的 1 而不是负的。

一旦他们弃用了像我的 Ipad 3 这样的旧设备，我就无法访问 IOS10。我必须在外部驱动器上启动的 macOS 上加载模拟器，因为我的软件只能在 10.10 中运行。 所有这些破坏的欢乐时光。

我不知道它是否正在更新框架并正确旋转。

希望这个例子适用于 IOS 10。这是我现在能做的最好的。 在 Safari 中，它应该显示反转颜色。

http://dev.electroteque.org/webgl/threejs-hls.html

使用着色器材料会破坏图像的缩放比例、几何形状并停止相机旋转这样的工作

camera.position.x = (Math.PI / 2);

必须尝试让这个补丁工作。

这似乎有效，尽管它仍然与相机位置混淆。 我不认为这是一个可行的选择。 这样做会产生更多的错误。 与使用 MeshBasicMaterial 的渲染不同。

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                THREE.ShaderLib[ 'equirect'].uniforms.tEquirect = { value: texture };
                THREE.ShaderLib[ 'equirect'].uniforms.tFlip = { value: 1 };

                var material2 = new THREE.ShaderMaterial( {
                    uniforms: THREE.ShaderLib[ 'equirect'].uniforms,
                    vertexShader: THREE.ShaderLib[ 'equirect'].vertexShader,
                    fragmentShader: THREE.ShaderLib[ 'equirect' ].fragmentShader
                });

如果我尝试使用基本材料，它将无法正常工作。 IE

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                var material  = new THREE.MeshBasicMaterial( { map : texture } );

与其尝试破解内置着色器，不如创建一个自定义着色器。

干得好！ 😀

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 75, WIDTH / HEIGHT );

var scene = new THREE.Scene();

// geometry

var geometry = new THREE.SphereGeometry( 1, 32, 16 );

// material

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

// material

var material = new THREE.ShaderMaterial( {
    uniforms: {
        texture: new THREE.Uniform( texture )
    },
    vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( 1.0 - uv.x, uv.y );", // fipY: 1.0 - uv.y
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join( "\n" ),
    fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        "   gl_FragColor = texture2D( texture, vUV ).bgra;",
        "}"
    ].join( "\n" ),
    side: THREE.BackSide
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );

function animate( time ) {
    requestAnimationFrame( animate );
    mesh.rotation.y = time * 0.0001;
    renderer.render( scene, camera );
}

animate();

https://jsfiddle.net/9jy92zxn/

不只呈现黑屏。

@danrossi这对我

var material = new THREE.ShaderMaterial({
      uniforms: {
        texture: { value: texture }
      },
      vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( uv.x, 1.0 - uv.y );",
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
      ].join("\n"),
      fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        " gl_FragColor = texture2D( texture, vUV  ).bgra;",
        "}"
      ].join("\n")
    });

记得更新颜色类型和变量名

它在这里呈现......（Chrome 55，OSX）

这个问题是关于带有 HLS 流和 Safari 的视频纹理，尤其是 IOS 恐怕：|

我看不到 meshbasic_frag 是如何工作的以及如何对其应用纹理。 这就是它正在使用的。

我看不到正在使用或选择的 equirect_frag 程序。

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

这就是我所看到的。

我认为你应该忘记meshbasic_frag和equirect_frag 。 尝试使用我的代码作为基础并替换它：

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

像这样：

var video = document.getElementById( 'video' );
var texture = new THREE.VideoTexture( video );

@mrdoob

背面导致了问题。 这个着色器程序肯定比通常的要干净得多。 有什么不同 ？

使用自定义着色器我失去了原来的 FlipY 修复。

for (var i = 0; i < uv.count; i++) {
    uv.setY (i, 1 - uv.getY (i));
}

我不得不稍微修改顶点代码，x 被翻转，而 y 需要反转。 我马上把它放上来。

var uniforms = {
    texture: { value: texture }
};

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, 1.0 - uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV ).bgra;",
    "}"
].join( "\n" );

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    //side: THREE.BackSide
});

这个着色器程序肯定比通常的要干净得多。 有什么不同 ？

魔法！ 😉

@mrdoob谢谢冠军。 对噪音感到抱歉，但再次责怪苹果公司。

所以对于 equirectangle 视频，不应该更新演示以使用它吗？ 那么 MeshBasicMaterial 使用的着色器程序对于此类视频纹理是不必要的吗？ 我将跨浏览器和不同的视频格式对其进行测试。

我们要关门吗？

这是更新的演示

http://dev.electroteque.org/webgl/threejs-bgra.html

所以对于 equirectangle 视频，不应该更新演示以使用它吗？ 那么 MeshBasicMaterial 使用的着色器程序对于此类视频纹理是不必要的吗？

嗯， MeshBasicMaterial更灵活，人们不需要编写着色器。 只是，对于这种特定情况，编写自定义着色器来解决该问题会更简单。

我们要关门吗？

是的！

它在 IOS 10 上运行良好。只是模拟器上的帧没有更新。 将不得不等待硬件。 我会关闭另一张票。

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV );",
    "}"
].join( "\n" );

对翻盖稍作调整，同一个程序正在使用 webm 处理 chrome。

@mrdoob我相信这个着色器适用于所有具有视频纹理的浏览器。 只有 Safari 上的 HLS 需要翻转修复“1.0 - uv.y”。 只有带 HLS 的 IOS10 才需要颜色通道反转。

非常疯狂的变通层，包括 CORS 代理。

我相信这比由 meshbasicmaterial 提供的着色器性能更好。 这应该是视频纹理的标准吗？ 旋转似乎适用于顶点代码。

大家好
我正在尝试使用three.js制作一个显示HLS实时流的360vr播放器（.m3u8与hls.js一起播放）
它在启用了 webgl 的 Safari osx 上工作，但在 ipad 10.2 上，我所有的尝试都迷失在黑色画布中（声音正常）
如果我禁用 vr360 模式，视频流在所有设备上都能正常工作。
我尝试了一些建议的方法，但我仍然有黑色画布渲染。
有人知道如何解决吗？

FlipY 和颜色通道反转修复在此线程中。

我跟踪的 Webkit 错误是陈旧的，最终引起了一些傲慢。 它仍然是开放的，但没有人会费心去看它们。

您需要 Safari 的 FlipY 修复程序。 所以仍然在three.js 纹理上禁用它。

这是我为播放器解决方案设计的正式 es6 方法。 在追捕这个废话后几个月，我仍然做噩梦哈哈。

感谢 mrdoob 提出着色器材料解决方案的冠军。 我现在在所有浏览器上都使用它。 它是一种比生成的着色器更简单的着色器。 它仅适用于视频纹理。

 static getVertexShader(unflipY) {
        return [
            "varying vec2 vUV;",
            "void main() {",
            "   vUV = vec2( uv.x, " + (unflipY ? "1.0 - uv.y" : "uv.y") + ");", // fipY: 1.0 - uv.y
            "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
            "}"
        ].join( "\n" );
    }

    static getFragmentShader(invertColour) {
        return  [
            "uniform sampler2D texture;",
            "varying vec2 vUV;",
            "void main() {",
            "   gl_FragColor = texture2D( texture, vUV )" + (invertColour ? ".bgra" : "") + ";",
            "}"
        ].join( "\n" );
    }

    static createShaderMaterial(texture, unflipY, invertColour) {

        texture.flipY = !unflipY;

        if (invertColour) {
            texture.format = THREE.RGBAFormat;
        }

        return new THREE.ShaderMaterial( {
            uniforms: { texture: { value: texture } },
            vertexShader: WebVRUtils.getVertexShader(unflipY),
            fragmentShader: WebVRUtils.getFragmentShader(invertColour)
        });
    }

用法

 let invertColour = false;

        if (WebVRUtils.isSafari) {
            this.hasHLS = hasHls;
            invertColour = hasHls && WebVRUtils.isIpad;
        }

        this.material = WebVRUtils.createShaderMaterial(this.texture, this.hasHLS, invertColour);

好的，three.js中_gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL,texture.flipY)行的注释使得Safari中的视频显示（10.0.2，之前的版本只需要在开发工具中启用webgl，这个选项现在不可用）但我在 iPad 和 iPhone 上仍然有问题（这是我的目标）
关于 shaderMaterial 解决方案，我不知道如何在我的代码中准确应用它...
谢谢您的支持

MacOs Safari 10 也需要在我的测试中禁用 FlipY。

是的，也适用于我的（除了之前的 9.xx 版本）
但我需要在移动设备上使用播放器，因此该解决方案不是我的解决方案:-(

您需要在 IOS 上进行 FlipY 修复和颜色通道反转。 并且仅适用于 IOS 10。在 IOS 9 上没有好处。这使得许多旧设备被排除在外。 因为 Apple 已经像我的 Ipad 3 一样贬值了它们。 IOS 10 支持内联播放，所以无论如何都会更可取。

我现在正在考虑在 iOS 中解决这个问题。 但我对评论有点困惑。

对于 HLS 视频：

• iOS 以错误的顺序提供颜色通道（bgra 而不是 rgba）。 但是，这些值在其他方面是正确的。
• macOS 正在生成需要在 X 轴上翻转的纹理。 这可以通过使用 setPixelStorei(UNPACK_FLIP_Y_WEBGL, true) 解决
• iOS 正在生成需要在 X 轴上翻转的纹理，但上述解决方法不起作用。

这样对吗？

答案就在上面的这张票中。

就像给你们提个醒一样，显然最新的 iOS 10.3.3 更新修复了 bgr 问题，这将使解决方法......反过来工作。 我没有使用three.js，所以对于任何问题/分类，请参考您自己的测试或SO问题。

正如预期的那样。 很标准。 谢谢你的提醒。

他们应该做正确的事情并更新我制作并保持打开和陈旧的票证。 如果有修复，则更新所有开发人员。 他们还没有。 所以现在必须检查次要版本吗？

IOS 11 应该有 CORS 修复，但还没有。

我设法获得了 xcode 9 beta。 它没有配备 10.3.3 模拟器，只有 10.3.1 和 11。我在 11 中测试过，似乎仍然需要反向 rgba。 否则我应该看到绿色显示或根本没有。 我将不得不通过禁用修复来运行更多测试。

IOS11 模拟器是个垃圾。 没有 10.3.3 IOS 模拟器。 IOS11 显然已经修复了 CORS。

现在 iOS 11 已经向公众发布了，我一直在运行一些测试，但我无法在此线程中为 iPhone iOS 11 使用此修复程序（尚未尝试 iPad）。

我可以使用 HLS 使其在 iPhone 和 iPad 上的 iOS 10.3.3 上运行（使用 CORS hack、FlipY 和颜色修复）。
在 iPhone iOS 11 上，我有一个带有 HLS 的黑屏（使用 CORS hack、FlipY 和颜色修复）。 我认为还有其他问题需要解决，但到目前为止我还没有解决。

关于 CORS 问题，它似乎在 iOS 11 中至少对于 MP4 渐进式下载有所改进，但由于上述原因，我无法确认 HLS。

如果有人运气好，请更新：/

我正在尽我最大的努力获得一个全新的 ipad 甚至能够获得 IOS11。

模拟器没有修复，所以失败了。

我必须确认我是否必须在那里进行反黑客攻击。 或者如果可以切换回 rgb 颜色通道。

HLS 的黑色渲染并不是一个好的开始，只是他们通常的破坏行为，需要数年时间才能恢复回归。 这就是 IOS9 上发生的事情。

CORS 应该已在 IOS11 中修复并且不需要代理

@danrossi我现在在 iOS 11 上也面临这个问题，如果你想出解决这个问题的办法，请告诉我。 iOS 10 在 CORS 修复和 Flip Y 的情况下仍然可以正常工作，但 iOS 11 只能播放音频。

我仍然需要使用 IOS11 获得新的 ipad。 HLS 在 IOS11 测试版模拟器中工作？ 它可能与 CORS 相关。 rgb 通道翻转将显示反转颜色。 那么黑色可能与 CORS 相关吗？

我试过没有我的 CORS 代理和它，但我仍然遇到同样的问题。 我也试过不使用 Flip Y 只是为了它，它没有任何改变。 只有声音，没有视频：/

在ios11设备上还是一样的问题，只有声音没有视频。有没有人解决过这个问题？

我通过将视频绘制到 2D 画布并使用该 2D 画布作为 webgl 中的纹理来实现它。

我在ios11上无法正确获取2D画布纹理，能贴一下代码吗？

这是一个非常糟糕的主意。 画布绘图是处理器密集型的。

我已经针对这个问题更新了 webkit 票证。 他们根本没有解决这个问题。 我什至为我的解决方案提供了完整的着色器和源代码。 你声称现在不起作用。

我知道其他人遇到了问题。 但是在我得到一个真正的全新设备之前，我还不能正确地测试它。 模拟器显示正确。 已经遇到了计划过时的情况，即使是 Iphone 5 也无法获得 IOS 11。

又是这张票。 https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU这是我的示例代码： https : //htmlvideocanvas-sibabi.c9users.io/hello-world.html （仅在 ios 上打开）
@danrossi是对的，这不是最好的解决方案。 它基本上是对字节数组进行内存复制，而不是绑定指针。 然而，它在苹果维护该项目的同时完成了这项工作。 我仍在评估这种方法，并准备好使用 mp4 后备方法。

我花了整整两个月的时间在每个人的帮助下对着色器进行了微调，当然非常感谢。 这只是意味着我们有更多的时间来对抗他们寻找另一种解决方法。

我希望有一个。

他们根本没有费心去尝试修复翻转 / HLS / webgl 问题，您可以在我制作的那张票中看到。

毕竟他们只是解决了 CORS 问题。 虽然我不确定他们是否设法让 Dash 工作。

Apple / webkit 是我的眼中钉。 这可能意味着我必须自己尝试修复它，而且我不使用 C++。 如果我修好它会很有趣，但我想保留我的头发。

有人可以发布他们的代码让我看看，只是为了确保启用/禁用 FlipY。

在这里看到我的评论。 我对这种破坏性的混乱有绝对的了解。 在纹理上禁用翻转应该显示图片但颠倒。 这里是黑框。 回到起点。 它们导致了在 IOS9 中存在问题的回归。

https://bugs.webkit.org/show_bug.cgi?id=163866#c19

我正在关闭甚至从未看过或处理过的原始 webkit 票证。 并尽快开始一个新的，因为收集证据需要时间。

它已经超越了最初的 FlipY 问题。 在发布操作系统之前，他们似乎从不费心检查 HLS 是否与 WebGL 兼容。

我已经关闭了原始的 webkit 票，以开始一个新的特别是带有 webgl 的 HLS 视频纹理完全损坏，还没有可能的解决方法。 原来的 FlipY 变通方法不再相关。

我发现所有的 webkit webgl 一致性测试都使用 Mp4。

他们从来没有费心去测试苹果自己的流媒体格式。 因此，为什么它已经被破坏并且仍然被全新的 IOS 11 更新破坏。

看这里了解更多

https://bugs.webkit.org/show_bug.cgi?id=163866#c22

@danrossi你有新打开的 webkit 票的链接吗？ 我自己刚刚在 iOS11 上偶然发现了这个问题，并且很想跟踪任何进展。

我为他们的工作自筹资金。 我正在使用从 Khronos 测试 mp4 文件生成的 HLS 运行一致性测试。 它声称它通过了，但测试无法证明它是否显示任何内容。 画布甚至不显示在这里。 实际上，我什至认为该测试在 IOS 上根本无法正常运行。 没有日志。

我必须使用他们自己的测试文件来证明 HLS 纹理不起作用。 我已经构建了其他测试文件，并将上传以制作票证。

我希望需要一些 webgl 参数或另一个需要像上次一样禁用的参数。

好的，就我看到的 webkit 测试文件而言。 它们不是为 IOS 测试而设计的。 没有用户点击功能来播放。 Mp4 出于某种原因可以自动播放我在 IOS 11 上发现的虽然没有指定属性但 HLS 仍然不能。

我不相信任何测试都是专门针对 IOS 进行的，而且绝对没有针对 HLS 进行测试。

因此，问题。 简直糟透了。

我有我需要提交票的东西。

就我所见。 webgl webkit 测试存在缺陷。 他们不关心 webgl 画布输出。 他们将视频以非常小的尺寸绘制到画布上作为预览输出。

他们有 webgl 画布，但它的尺寸非常小，所以你甚至看不到它的渲染与否。

我不得不修改 HLS 的测试，但它们没有通过。 现在我增加了黑色的 webgl 画布的大小。

在我修改代码以添加用户后，单击测试实际上开始在 IOS 上运行。

据我所知，从未对 HLS 进行过测试，而且测试存在缺陷。 所以它绝对破坏了每个人。

干得好。 我真的对 Apple 失去了耐心，需要多少个人工作才能解决他们的问题并为他们运行测试。

https://bugs.webkit.org/show_bug.cgi?id=179417

两天了，不急着看。 我怀疑这永远不会得到解决。 花了几年时间，多个版本的 IOS 和设备升级 CORS 才得以修复？

我将尝试使用 webgl 标志和着色器代码，看看是否可以做任何事情。

请人们去那里并引起一些噪音。 因为它甚至还没有被看过。 就像他们根本不关心在自己的浏览器中测试 HLS 一样。

@jernoble你能指出谁能在 webkit 团队中帮助我们解决这个问题吗？ 如果有人可以调查它或向我们提供更新，我们将不胜感激。 GitHub 上的问题很长，但总结如下： https :

嗨@radiantmediaplayer。 @grorg和我都是在这个问题上 ping 的合适人选。 我会将自己抄送给那个 WebKit 错误并创建一个跟踪它的雷达。

大家好。 我使用@sorob所述的临时画布发布了适用于 iOS 11 的示例解决方法。 您可以在http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html 中看到它的运行情况。 不过我对 Three.js 并不熟悉，所以它只是普通的 javascript 。

画布渲染器。 那就是软件渲染。 不值得生产。

我和@danrossi在一起。 除了维护 2 个完全不同的解决方案来显示 HLS 内容之外的性能问题是不切实际的。 我们需要深入了解 iOS webkit 问题。 新的 webkit 票证显示活动，这是一个积极的信号。 希望我们能想出一些办法，即使这意味着等待 iOS 11.*。

@danrossi我刚刚注意到此问题已关闭。 你会重新打开它吗？

全新的问题在这里。 它与 Three.JS 无关，所以我想是为了存档。

所需的测试水平是疯狂的。 像找到 IOS10 一样解决了我的问题。 看看那里。

到目前为止没有任何工作可以解决它。 有人终于看到了，而不是在我们的控制之下。 与纹理看到 HLS 的上下文的共享引用有关的事情与可能修复它的 Mp4 不同。 据我所知，但他们实际上必须花时间去做。 我无法像在 Windows 上那样设置这样的构建环境。

但是查看 webkit 代码解释了我认为为什么 IOS10 与 HLS 有奇怪的颜色问题。 它不使用色彩空间代码。 因此，代码可以解决 IOS10/Safari 的这两个问题。

https://bugs.webkit.org/show_bug.cgi?id=179417

你好呀。 看来我自己必须回滚并为 IE11 视频纹理支持实现画布渲染器。 它不适用于 WebGL。 有人在问这件事。

我估计它需要被查看的速度，可能需要大约 2 年才能修复。

IOS 11 将不得不忍受我认为 HLS 的软件渲染。 在垃圾箱中，整个 IOS 都是针对 VR 的。 我将自己实现这一点。

@redgetan ，任何想法如何使用three.js 实现？ 我尝试使用 CanvasRenderer 并且我在纹理上看到一个网格框架并且没有正确渲染球体几何。

画布三演示仅显示正在渲染的 2D 视频。

抱歉，您使用的是 webgl 渲染，但使用画布作为纹理图像源。 看看我能不能复制。 使用画布作为纹理时，它不会为我正确渲染和旋转。

好吧，出于某种原因，我不得不这样做。

正常使用 webgl 渲染器。 但是对于画布纹理和视频绘图，我必须设置尺寸

imageContext.drawImage( video, 0, 0, image.width, image.height );

它现在正在正确渲染。 将在 IOS 11 上运行测试。

@danrossi让我们知道它在 iOS 11 上的运行情况。我实际上可能在某个时候也需要走这条路。

好的不用担心。 如果它似乎有效，我将很快在线添加带有 fps 统计视图的基本测试。 它现在可能需要任何东西。

有没有办法在 IOS 上检查处理器性能？

我做了一个画布纹理测试。 它正在工作，但更高分辨率的视频可能会使其翻倒。

此 HLS 质量低，因此保持 40 fps。 更高分辨率的 mp4 但质量也较低，保持在 30fps。

生产分辨率文件可能会得到 10fps。 这是一个新的Ipad。

http://dev.electroteque.org/webgl/three-canvas.html

这个问题是否与我现在在此页面上面临的问题有关： https :

在 Mac 或 macOS 设备上的 Safari 浏览器中打开它。 即使在 chrome 浏览器或 mozilla 中，ipad 或 iphone 也无法处理这个页面。

我得到一个黑色页面，但在 Mac 上的普通 chrome 中，它可以工作

@vongohren您需要使用我为 HLS 发现的 FlipY 变通方法和 macOS Safari 以及我们在这张票中制定的着色器。

然而，我刚刚回到我的 webkit 票证，他们声称他们修复了 10.13 的 FlipY 问题。 我相信这是High Sierra。 因为我使用的是基于云的 macOS，所以没有机会对我进行测试。

这将需要另一个平台版本检查，以便不需要针对 10.13 进行 FlipY 变通。 所以版本 13 以下的任何东西都需要它。 我有大约 4 个不同的平台和浏览器版本检查 macOS 和 IOS 来解决多个错误。 IOS 11检查是开启软件纹理渲染！

如果您可以查看 10.13，这可能会有所帮助。

这是我所有门票的详细信息。

https://bugs.webkit.org/show_bug.cgi?id=179417#c8
https://bugs.webkit.org/show_bug.cgi?id=176491

https://bugs.webkit.org/show_bug.cgi?id=180863#c3

@danrossi Iv 得到了 10.13，但你得到了一个可以测试的演示？

我现在使用的 Three.js 版本是这些修复的新版本，所以不确定在哪里应用它们。
我找到了一个叫做 data.flipY 的东西，并将它设置为 false。 但对我的应用程序没有任何帮助。

我通过这个库使用了three.js： https :

CORS 问题？

这行得通吗？

http://dev.electroteque.org/webgl/three-hls.html

或这个

http://dev.electroteque.org/webgl/three-hls-flipy.html

我的大量测试文件列表在这些票中。

可以在纹理上禁用 FlipY

texture.flipY = false;

一切都在本地，所以不明白为什么应该影响 cors。 但是这两个链接在 Mac 10.13 上的 Safari 和 chrome 上都显示为黑色

而flipY功能，并没有做太多，而不仅仅是翻转图片。 但是还是黑的

听起来在 10.13 中遇到了与 IOS 11 相同的问题，其中 FlipY 工作被破坏了。 这是很好的信息。 还有一个要报告的错误。 它是如此凌乱，让我发疯。 我将在 IOS 票证中更新它。 在 10.12 中，需要解决 FlipY 错误并为其制作单独的票证。

所以就像我现在的 VR 功能一样。 您必须对IOS 11和10.13进行平台版本检查，并为hls提供软件渲染画布纹理模式。

这是我用于功能检查的一些静态工具，尤其是 cors 支持或使用 cors 代理源。 显然现在我必须检查大于 13 的版本才能暂时打开像 IOS 11 这样的软件渲染。

static get supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false,
            userAgent = navigator.userAgent;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

    static isNewIOS(userAgent) {
        const version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1];
        _isLatestIOS = (+version >= 11);
        return _isLatestIOS;
    }

你在这方面做了一些很棒的工作，希望你能搞定门票：D

这是画布纹理解决方法。 我必须为 IOS 11 激活它。我可能需要进行 macOS 13 版本检查并为此启用它。 如果您认为 10.13 的翻转工作已损坏？ 我得向他们汇报。

伙计，你不知道，我没有从中得到任何好处，自筹资金，除了让每个人的软件（包括我自己的功能）几乎无法在 Apple OS 上运行，哈哈。

这是我现在的完整集成，它具有包括苹果修复和变通方法在内的工作。 我现在有立方体贴图视频支持。

https://flowplayer.electroteque.org/vr360/fp6

自从几年前我第一次报告它以来，这一直在持续，它坐在那里什么都不做！

这对你有用吗？

http://dev.electroteque.org/webgl/three-canvas.html

当你说这里是画布纹理时，你指的是哪里？

那个流动播放器看起来很甜蜜！ 它看到了很多用法吗？

我应该在这个链接中看到什么： http :
当我在 Chrome 中打开它时 - 版本 63.0.3239.84（官方版本）（64 位） - 在 macOS 10.13.1 上：
我看到黑色背景，左下角有一个 FPS 表，中间底部有一个按钮说激活 AR
当我点击它时，我得到一个分屏，带有一个设置轮和一个后退按钮。 但是画布本身只是黑色的。

当我在 macOS 10.13.1 上的 Safari 版本 11.0.1 (13604.3.5) 中打开它时：
我看到左角有一个 FPS 计的飞行视频，中间底部有一个按钮说激活 AR。 我还可以四处滚动以获得完整的 360 度体验。
当我点击 VR 按钮时，我会看到一个分屏，带有一个设置轮和一个后退按钮。 和视频画布，但不能滚动，我猜是陀螺仪控制的。

但是，如果我从 VR 模式回击按钮，视频会卡在 VR 模式下，我无法再滚动，并且卡在 VR 模式开始的视图中。

该演示用于 Safari 上的 HLS 渲染。 如果您认为 flipY 修复演示在 Safari 上不起作用

http://dev.electroteque.org/webgl/three-hls-flipy.html

那么必须在 10.13 和 IOS 11 Safari 中使用画布纹理吗？

http://dev.electroteque.org/webgl/three-canvas.html

让我知道两者之间。 我不关心旋转控件只是它呈现而不是黑框。

10.13 很重要，因为我已将其添加到此处引用的 IOS 11 webkit 票证中。 假设它的“回归”完全破坏了 HLS 渲染。

@danrossi都适用于 safari，使用 hls 版本质量更高。 如果您想知道，它们都是正确的方向。

但没有人在 chrome 上工作。

好的。 太好了，我需要撤消我的报告。

所以这仍然是一个问题吗？

http://dev.electroteque.org/webgl/three-hls.html

如果是这种情况，请使用 FlipY 变通作为 macOS 的标准。

此页面上的 HLS 演示应该适用于两种浏览器。 它将使用带有 hls 插件的 chrome 媒体源流。 它还具有适用于 macOS 的 FlipY 变通方法。

https://flowplayer.electroteque.org/vr360/fp6

你是对的
http://dev.electroteque.org/webgl/three-hls.html
这不适用于 chrome 或 safari

链接流播放器，适用于两种浏览器

谢谢冠军。 我有足够的信息再次更新门票。 macOS Safari 问题与 IOS 11 不同。

您需要使用 IOS 11 的画布纹理示例。

对于 macOS Safari，禁用纹理上的 FlipY 并反转着色器上的 Y 位置以正确旋转。 您还需要在 IOS 10 HLS 的片段着色器上进行颜色通道反转。 着色器代码在上面。

所以今天早上我很高兴大约 1小时，当我设法用上述解决方法破解 iOS 11 案例时（

这是我在带有 iOS 11.2.1 的 iPhone 6 Plus 上得到的结果，动画实际上非常流畅，但它很丑陋，像素化，锯齿...

预期行为如下（Nexus 5X 与 Android 8 和最新的 Chrome - 这不使用上述解决方法）。

我们的用例是 360 HTML5 播放器，在上面的两个示例中，视频是相同的 HLS 单比特率提要http://www.rmp-streaming.com :1935/vod/sea360.mp4/playlist.m3u8

如果我将变通方法（参见下面的代码）应用于 Android，我会得到同样丑陋的渲染。 这是我应该通过这个新的解决方法得到的还是我遗漏了什么？
我尝试使用一些设置，但我没有看到任何显着的改进。

    // image 
    this.image360 = document.createElement('canvas');
    this.image360.width = this.width;
    this.image360.height = this.height;
    this.imageContext360 = this.image360.getContext('2d');
    this.imageContext360.fillStyle = '#000000';
    this.imageContext360.fillRect(0, 0, this.width, this.height);
    // texture 
    this.texture360 = new THREE.Texture(this.image360);
    this.texture360.format = THREE.RGBFormat;
    this.texture360.minFilter = THREE.LinearFilter;
    this.texture360.magFilter = THREE.LinearFilter;
    this.texture360.generateMipmaps = false;
    this.texture360.wrapS = THREE.ClampToEdgeWrapping;
    this.texture360.wrapT = THREE.ClampToEdgeWrapping;
    this.texture360.flipY = true;
    this.texture360.needsUpdate = true;
    // mesh
    let geometry = new THREE.SphereGeometry(500, 80, 50);
    geometry.scale(-1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ map: this.texture360 });
    this.mesh360 = new THREE.Mesh(geometry, material);
    this.scene360.add(this.mesh360);
    // renderer
    this.renderer360 = new THREE.WebGLRenderer({ antialias: false });
    this.renderer360.setClearColor(0x101010);
    this.renderer360.setPixelRatio(window.devicePixelRatio);
    this.renderer360.setSize(this.width, this.height, true);

我正在做这个。 我相当确定这应该正确调整大小。

video.addEventListener("loadeddata", function() {
                      video.width = THREE.Math.ceilPowerOfTwo(video.videoWidth);
                      video.height = THREE.Math.ceilPowerOfTwo(video.videoHeight);

                      image.width = video.width;
                      image.height = video.height;
                      //image.width = video.videoWidth;
                      //image.height = video.videoHeight;
                      //imageContext.fillRect( 0, 0, video.videoWidth, video.videoHeight);
                      imageContext.fillRect( 0, 0, image.width, image.height);


                      //console.log(video.videoWidth);
                });

所以我戳了一下之后就钉上了它。 看来在我们的配置中，off-dom 画布必须与当前正在播放的 HLS 呈现的大小完全相同（因此对于 ABR，每次呈现更改时都需要更新它）。 我们的测试表明这适用于 iOS 11（好总比没有好）。 如果它对其他人有帮助，请将其留在这里。

是的，因此我在 loaddata 事件中执行此操作以获取视频宽度。 我以前想过这个，它有你同样的问题。

但是对于原生 HLS，当比特率发生变化时没有事件？ 我只是亲自设置一次。 Apple 的变通方法数量已经足够令人难以置信。

据我所知，Safari 没有提供可用于检测 ABR HLS 再现更改的事件。 我们只是在每个 AnimationFrame 上使用 video.videoWidth 和 video.videoHeight 更新 off-dom 画布宽度和高度（从性能的角度来看这可能并不理想，但在这个阶段我们让它工作，我们会适应它直到另一个选项变为可用）。 我们的测试表明 video.videoWidth 和 video.videoHeight 应该在显示新的呈现时相应地更新。

是的，它的价值已经足够了。 所以这样做是多余的，特别是如果框架回调中有条件语句。 我猜现在不管用什么。

他们仍然无法提供再现更改事件。 我相信有一个规范但从未实施过？

解决旧的 Safari 错误的 CORS 代理，HLS 翻转修复，现在这就足够了。

很高兴这一切正常。 我已经有一个月左右的时间没有看到我的票有更新了。

我不记得在 HTML5 视频规范中看到过关于质量切换事件的内容。 有 Apple 维护的 HLS 规范，但它没有描述发生质量转换时客户端应该做什么。 像 hls.js 这样的 Libs 已经实现了这个，但这不适用于 HLS 到 Safari 中的原生 HTML5 视频。

我只是意识到我可以“polyfill”我们的 hack 以通过以固定的时间间隔查询 video.videoWidth 来检测呈现的变化，当检测到变化时，然后调用调整大小回调。 这将减少税收。 我可能会在稍后的阶段在我们的播放器中实现这一点。

@radiantmediaplayer您应该能够使用“resize”事件来检测底层 .videoWidth 和 .videoHeight 属性的变化。

大家好，在这里看到我的评论。 它正在工作。

进行测试和通过动作是一种多么痛苦的折磨。 只是没有得到适当的反馈或回应。 我是认真的！ 请不要再回归了！！

安装 OSX 11.3 测试版，它会工作。 以前的 OSX 11 需要软件渲染，OSX 10 需要翻转和颜色修复。 需要复杂的兼容性混乱和平台版本检测。

Safari macOS 仍然存在 FlipY 问题，我也没有得到任何回应，它在单独的票证中。 无论如何，我无法在那里正确测试 HLS，直到我可以尝试在我的 PC 工作站上安装 macOS。 HLS 被阻止在 vmware 中播放。

https://bugs.webkit.org/show_bug.cgi?id=179417#c43

OSX 11.3 也不需要 FlipY 变通方法，但我想我之前提到过。

这是我现在从 CORS 开始的完整 IOS 和 Safari 兼容性检查。

头脑发懵。 这个是疯了。 我什至不得不在未来证明并包含除 IOS 12 之外的任何内容。

它正在整合！ 无法检查 macOS 发生了什么。

static get supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false,
            userAgent = navigator.userAgent;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            //Safari still reports CORS support regardless a bug
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

static isNewIOS(userAgent) {
        const platform = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = +platform[1];

        _isLatestIOS = version >= 11;

        //if greater than 11.3 or 12
        _iOSHlsSupported = (_isLatestIOS && +platform[2] >= 3 || version >= 12);

        return _isLatestIOS;
    }

用法

 set hls(value) {

        //if had a HLS source and the current playlist source isn't clear scene and revert the material.
        if (this.hasHls && this.isSafari && !value) {
            this.clearScene();
            this.initScene(value);
        }

        //flipY fix
        this.hasHls = value && this.isSafari;
        //IOS10 colour inversion fix
        this.invertHLS = this.isIpad;

        //if we have hls and IOS 11 or greater
        if (this.hasHls && WebVRUtils.isLatestIOS) {

          //IOS 11.3 or greater disable flipY and colour inversion fixes
          if (WebVRUtils.iOSHlsSupported) {
              this.hasHls = false;
              this.invertHLS = false;
          } else {
            //anything below IOS 11.3 use software rendering
            this.config.software = true;
          }

        }
    }

更正最后一点。 IOS HLS 渲染实现正在运行，而且非常敏感。 渲染必须在加载数据之后开始。

一旦遇到 teximage2d 错误，就不会发生进一步的渲染，只是黑色渲染，看起来修复从未发生过。

如果渲染一有视频数据就开始，那就没问题了。 11.3之前没问题。

看起来视频又可以正常工作了（没有临时画布修复）。 已针对最新的 ios 版本 11.3 进行验证（在 iphone 6s 、7 上测试）。

是的，我想我是在 2 月 15 日更新的。在 11.3 中再次工作。 我从来没有收到更新。 我不得不专门回来检查，它正在工作！

我们修复了 iOS 11.3（以及等效的 macOS 版本）中视频 -> 纹理的许多问题。 抱歉，如果我们没有关闭/更新错误。

如果您仍然看到问题，请告诉我。 我相信直接流（例如 mp4）和 HTTP Live Streams 应该都可以工作，并且应该准确反映flipy。

这一切都是从 2 月份报告时开始的。 但我最初在去年某个时候报道过。 我随机将 IOS 测试版更新到 11.3 并开始工作。 需要上面的兼容性检查代码来处理多个平台变通方法。

IOS 10 需要翻转修复。 IOS 11.0 - 11.2 需要软件渲染工作。 11.3 > 可以正常渲染。

任何人都可以为此分享一个工作示例，一个 jsfiddle 左右吗？ 我仍然可以在 IOS 11 Safari 中看到黑屏。 对于 HLS 流，我可以听到音频但没有视频

@dhanishapa你的 iOS 版本是什么？ 是 11.3+ 吗？

不久前（~ 2018 年 5 月）我也遇到了以下 HLS 问题（？<= 11.2）：

• 视频片段在播放过程中有时会重复
• 视频有时会暂停并显示黑屏
• 视频缓冲但音频继续

在与 Vimeo 联系后（我正在使用他们的 HLS 服务），他们能够联系 Apple 开发团队并共同解决问题。

我们刚刚收到 Apple 开发团队的消息，新版本的 iOS (11.3.1) 已经发布，其中包括对您报告的播放问题的修复。 该修复程序应防止视频在黑屏上停止、重复视频片段或陷入无休止的加载状态。

我注意到当我在上传过程中提供 H264 编码的 MP4 作为源时，播放问题在低于 11.3.1 的 iOS 版本上消失了。 我在上传过程中使用 Quicktime 作为输入格式时遇到了问题。

我发现每个视频文件生成的清单之间存在一些差异（视频编解码器即“avc1.64001E,mp4a.40.2”适用于工作文件，而“hvc1.2.4.L63.90,mp4a.40.2”适用于非工作文件） ）。

也许这些信息对任何人都有用。

你好
我在 IOS Safari 上遇到 HLS 流问题。
我正在使用 cors 代理。 我尝试使用本机 hls 播放器和 html5 播放器，甚至只是尝试直接在 IOS 中播放 m3u8 链接，但它不起作用，而它在 safari（桌面 - mac）、chrome、firefox 中的工作，只是不在 IOS（iphone）中

cors 已在 IOS 11.0 中修复。 我制定的另一个重大修复是在 11.3 中。 11.3现在应该出来了。 仅 IOS 10 和 9 需要代理。

它对我有用🙆🏽‍♂️

这是映射到球体（ playhouse-vr 的 360 视频）的 HLS 流的故障演示。

在 macOS v10.13.4 + Safari v11.1 和 iOS 11.4.1 + Safari 上测试

我现在在 iOS 14.0 Safari 和 iPadOS 14.0 Safari 上看到一个新的黑屏问题。 完全相同的播放器适用于 iOS 13.7 Safari 和 iPadOS 13.7 Safari。 我尝试更新到three.js r120（从r116）但无济于事。 macOS Safari 14 没问题。 有没有人看到同样的事情？ 有关支持 iOS 14 的下一步是什么的任何提示？

是的，查看https://bugs.webkit.org/show_bug.cgi?id=215908和https://bugs.webkit.org/show_bug.cgi?id=216250以了解 iOS 14 回归。 希望它们都能得到快速解决，因为许多站点可能会受到影响。

这是与 Safari 永无休止的战斗。 我期待再次投诉我自己的 360 功能。 每次修复它们都需要几个月的时间。 我在上面找到了原始的解决方法。 所以是时候找到更多的解决方法了！！ Webkit 不测试 HLS，他们没有针对 WebGL 的 HLS 测试我不得不自己做一些。

我在我的功能中删除了不同 IOS 的所有臃肿解决方法。 但是其中一个必须使用11.0的canvas软件渲染......我仍然需要做平台检查。 使用 IOS 13，他们现在已经破坏了平台检查。 我不得不在纸板项目中解决这个问题。 我发现 HLS 不会立即呈现，并且在 IOS 13 中需要一段时间，但必须重新审视我是如何解决该问题的。

他们只是不在乎。 没有 WebXR api，没有像 Android 刚刚实现的 Wakelock api。

根据我的工作，我必须重新配置呈现更改。 并禁用轨道控制上的缩放。 这会停止 IOS 13 中的黑色渲染。 IOS 14 必须检查。

            video.addEventListener("resize", () => {
                vrVideo.update();
                vrVideo.fullScreenResize(false);
            });

我已经测试了 14.2。 HLS 好的。 修复上面的就可以了...