問(wèn)題描述

在IOS手機(jī) 解碼視頻流的時(shí)候，第一次可以正常播放，但只要IOS手機(jī)熄屏，再重新喚醒，就會(huì)一直播放失敗，無(wú)論換哪個(gè)瀏覽器都不行。安卓手機(jī)則一切正常。

經(jīng)過(guò)排查，發(fā)現(xiàn)?IOS手機(jī) 的瀏覽器會(huì)無(wú)故 webGL 的上下文對(duì)象，然后引發(fā)一些奇怪的問(wèn)題。

webglcontextlost?可能會(huì)導(dǎo)致?以下幾個(gè)現(xiàn)象，可以參考一下。

解決方案 在文章最后貼出來(lái)。

• 導(dǎo)致的現(xiàn)象1

TypeError: Argument 1 ('shader') to WebGLRenderingContext.shader Source must be an instance of WebGLShader....（如下圖）

• 導(dǎo)致的現(xiàn)象2

導(dǎo)致 gl.createShader(x)?返回結(jié)果變?yōu)?null

• 導(dǎo)致的現(xiàn)象3?

?RuntimeError: Out of bounds memory access (evaluating 'ee. Decode(n,o)')....

---

排查

以上幾種現(xiàn)象，都可能是?webglcontextlost 引起的（我是說(shuō)可能），如何判斷呢？其實(shí)只要監(jiān)聽(tīng)一下這個(gè)事件即可，代碼如下：

const canvas = document.getElementById('canvas');canvas.addEventListener("webglcontextlost", () => {console.log("webglcontextlost")
}, false);

如果控制臺(tái)輸出字符串?webglcontextlost，那么恭喜中招，建議先解決這個(gè)問(wèn)題。

可以看到，在蘋(píng)果官網(wǎng)，很多人提到了同樣的問(wèn)題，看來(lái)是官方的鍋（咱們不背）。

---

解決方案

既然是官方的鍋，解決方案 自然是升級(jí) IOS 系統(tǒng)版本（升級(jí)到17.1），搞定。

升級(jí)完測(cè)了一下，果然可以正常播放了。再次 熄屏 -> 喚醒 也可以正常播放。

另外，還有網(wǎng)友說(shuō)把 IOS系統(tǒng)?降級(jí)到更低的版本 也可以解決，不過(guò)我懶得去折騰了，有興趣的朋友可以自己試試看。?