添加webglContextLostError 事件

demo/.vitepress/config.js

@@ -28,7 +28,7 @@ module.exports = {
                     {text: 'LVS分享', link: 'https://jessibuca.com/pro-doc/2023-11-25-live-video-stack-wancheng.pdf'},
                 ]
             },
-            {text: '点播播放器(ProVod)', link: '/player-pro-vod'},
+            {text: '点播(ProVod)', link: '/player-pro-vod'},
             {
                 text: "ProVod-More",
                 items:[

demo/index.md

@@ -73,10 +73,14 @@ features:
   details: 支持1*1，2*2，3*3外加不规则多屏显示
 - title: 支持语音通讯(Pro)
   details: 支持web端语音通讯
-- title: 支持国标SM-4加密(Pro)
-  details: 支持国标SM-4加密
-- title: 支持XOR加密(Pro)
-  details: 支持XOR加密
+- title: 支持国标SM-4加密直播流(Pro)
+  details: 支持国标SM-4加密直播流
+- title: 支持XOR加密直播流(Pro)
+  details: 支持XOR加密直播流
+- title: 支持MP4H264/H265点播(Pro)
+  details: 支持硬解码(MSE + WCS)和软解码(WASM + WASM(SIMD)) 播放
+- title: 支持HLSH264/H265点播(Pro)
+  details: 支持硬解码(MSE + WCS)和软解码(WASM + WASM(SIMD)) 播放
 - title: 更多
   details: 请到Pro文档页单独查看
 ---

demo/player-pro-vod.md

@@ -20,51 +20,9 @@ sidebar: false
 <Rice/>
 # 正在开发中，敬请期待
 
+开发进度：HLS(98%),MP4(98%)
 
-开发进度：HLS(95%),MP4(95%)
 
-HLS体验版本请前往
+[测试地址](pro-demo.html#点播demo-支持mse、wcs、wasm、simd)
 
-#### https
-[https://jessibuca.com/pro/play-vod-demo-hls.html](https://jessibuca.com/pro/play-vod-demo-hls.html)
 
-#### http
-[http://jessibuca.monibuca.com/pro/play-vod-demo-hls.html](http://jessibuca.monibuca.com/pro/play-vod-demo-hls.html)
-
-
-MP4体验版本请前往
-
-#### https
-[https://jessibuca.com/pro/play-vod-demo-mp4.html](https://jessibuca.com/pro/play-vod-demo-mp4.html)
-
-#### http
-[http://jessibuca.monibuca.com/pro/play-vod-demo-mp4.html](http://jessibuca.monibuca.com/pro/play-vod-demo-mp4.html)
-
-
-M7S-Crypto 加密流体验版本请前往
-
-#### https
-[https://jessibuca.com/pro/play-vod-demo-crypto-m7s.html](https://jessibuca.com/pro/play-vod-demo-crypto-m7s.html)
-
-#### http
-[http://jessibuca.monibuca.com/pro/play-vod-demo-crypto-m7s.html](http://jessibuca.monibuca.com/pro/play-vod-demo-crypto-m7s.html)
-
-
-SM4-Crypto 加密流体验版本请前往
-
-#### https
-[https://jessibuca.com/pro/play-vod-demo-crypto-sm4.html](https://jessibuca.com/pro/play-vod-demo-crypto-sm4.html)
-
-#### http
-[http://jessibuca.monibuca.com/pro/play-vod-demo-crypto-sm4.html](http://jessibuca.monibuca.com/pro/play-vod-demo-crypto-sm4.html)
-
-XOR-Crypto 加密流体验版本请前往
-
-#### https
-[https://jessibuca.com/pro/play-vod-demo-crypto-xor.html](https://jessibuca.com/pro/play-vod-demo-crypto-xor.html)
-
-#### http
-[http://jessibuca.monibuca.com/pro/play-vod-demo-crypto-xor.html](http://jessibuca.monibuca.com/pro/play-vod-demo-crypto-xor.html)
-
-
-离线版请前往 [下载](https://jessibuca.com/pro.zip)

demo/test-url.md

@@ -12,81 +12,81 @@
 -
 <Rice/>
 
-# 直播测试地址
-## flv
+## 直播测试地址
+### flv
 
-### H264
+#### H264
 
-#### node-media 854*480
+##### node-media 854*480
 
 https://live.nodemedia.cn:8443/live/b480_264.flv
 
-#### vigokit 当前时间 (1040 * 634)
+##### vigokit 当前时间 (1040 * 634)
 
 wss://live.vigokit.com:8443/live/time.flv
 
-#### vigokit 1280 * 720
+##### vigokit 1280 * 720
 wss://live.vigokit.com:8443/live/tcl_264.flv
 
-#### volcfcdnrd 有 sei 数据（1920 * 1080）
+##### volcfcdnrd 有 sei 数据（1920 * 1080）
 
 http://pull-demo.volcfcdnrd.com/live/st-4536523_yzmhde.flv
 
-#### node-media 4k 3840 * 2160
+##### node-media 4k 3840 * 2160
 https://live.nodemedia.cn:8443/live/sony_4k_264.flv
 
 
 
-### H265
+#### H265
 
 
-#### node-media 854*480
+##### node-media 854*480
 
 https://live.nodemedia.cn:8443/live/b480_265.flv
 
-#### vigokit 1280 * 720
+##### vigokit 1280 * 720
 wss://live.vigokit.com:8443/live/tcl_265.flv
 
-#### 西瓜视频（1920 * 1080）
+##### 西瓜视频（1920 * 1080）
 
 http://pull-demo.volcfcdnrd.com/live/st-4536521_yzmuhevcd.flv
 
-## hls
+### hls
 
-### H264
+#### H264
 
-#### 西瓜视频（1280 * 720） m3u8 + ts
+##### 西瓜视频（1280 * 720） m3u8 + ts
 
 https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8
 
-#### （1280,720）m3u8 + ts
+##### （1280,720）m3u8 + ts
 
 > 这个是点播地址，不是直播地址，如果要只是测试播放器的H265支持程度，可以将缓存延迟设置为100000 这种，放播放器不做延迟丢帧操作就行了。
 
 https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
 
-### H265
+#### H265
 
-#### 西瓜视频（854 * 480） m3u8 + ts
+##### 西瓜视频（854 * 480） m3u8 + ts
 
 > 这个是点播地址，不是直播地址，如果要只是测试播放器的H265支持程度，可以将缓存延迟设置为100000 这种，放播放器不做延迟丢帧操作就行了。
 
 https://voddemo-play.volcvod.com/8d1417d814b24fee8b8b0c2747f303e5/main.m3u8?a=0&auth_key=1765632280-d3569ddc77d445ab8647746220f67766-0-0222f8289976f07f8c91c230753ce911&br=384&bt=384&cd=0%7C0%7C0&ch=0&cr=1&cs=&cv=1&dr=0&ds=2&er=0&l=202212142122085BF19BF20712C413A9A2&lr=&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amg6c2o0aTg6ZTQzNGRnM0ApZzlnZzNlPGRlNzZmZTg5NWdfZy9gMHFrYTBgLS1kYy9zczQxNi4wYmItLTVgYTFjXjU6Yw%3D%3D&vl=&vr=
 
 
-#### (768* 320) m3u8 + ts
+##### (768* 320) m3u8 + ts
 
 > 这个是点播地址，不是直播地址，如果要只是测试播放器的H265支持程度，可以将缓存延迟设置为100000 这种，放播放器不做延迟丢帧操作就行了。
 https://cdn-static.m-m10010.com/demo/hls/output.m3u8
 
 
 
-# 点播测试地址
+## 点播测试地址
 
 
-## hls
+### hls
 
-### h264
+#### h264
 https://vod.lyhuicheng.com/20230719/oc5MCoON/index.m3u8
 
 https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 // 1280 * 720
@@ -100,23 +100,23 @@ https://test-streams.mux.dev/x36xhzz/url_6/193039199_mp4_h264_aac_hq_7.m3u8
 https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8 // 1080p
 
 
-### h265
+#### h265
 https://voddemo-play.volcvod.com/8d1417d814b24fee8b8b0c2747f303e5/main.m3u8?a=0&auth_key=1765632280-d3569ddc77d445ab8647746220f67766-0-0222f8289976f07f8c91c230753ce911&br=384&bt=384&cd=0%7C0%7C0&ch=0&cr=1&cs=&cv=1&dr=0&ds=2&er=0&l=202212142122085BF19BF20712C413A9A2&lr=&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amg6c2o0aTg6ZTQzNGRnM0ApZzlnZzNlPGRlNzZmZTg5NWdfZy9gMHFrYTBgLS1kYy9zczQxNi4wYmItLTVgYTFjXjU6Yw%3D%3D&vl=&vr=
 
-## flv
+### flv
 
-### h264
+#### h264
 https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
 
 
-## mp4
+### mp4
 
-### h265
+#### h265
 
 
 https://2dland.cn/test/test_video_h265.mp4   // 4k
 
 
-### h264
+#### h264
 
 https://artplayer.org/assets/sample/video.mp4

package.json

@@ -1,6 +1,6 @@
 {
     "name": "jessibuca",
-    "version": "3.2.9",
+    "version": "3.2.12",
     "scripts": {
         "build": "npx cross-env NODE_ENV=production rollup -c",
         "build:wasm": "python wasm/make.py --wasm && npm run build && npm run build:demo",

src/constant/index.js

@@ -210,7 +210,9 @@ export const EVENTS_ERROR = {
     mediaSourceBufferListLarge: 'mediaSourceBufferListLarge',
     mediaSourceAppendBufferEndTimeout: 'mediaSourceAppendBufferEndTimeout',
     wasmDecodeError: 'wasmDecodeError',
-    webglAlignmentError: 'webglAlignmentError'
+    webglAlignmentError: 'webglAlignmentError',
+    webglContextLostError: 'webglContextLostError',
+
 }
 
 

src/jessibuca.js

@@ -408,6 +408,14 @@ class Jessibuca extends Emitter {
                 });
             })
 
+            this.player.once(EVENTS_ERROR.webglContextLostError, () => {
+                this.pause().then(() => {
+                    this.debug.log('Jessibuca', 'webglContextLostError and paused');
+                }).catch(() => {
+                    this.debug.warn('Jessibuca', 'webglContextLostError and paused error')
+                });
+            })
+
 
             this.player.once(EVENTS_ERROR.mediaSourceH265NotSupport, () => {
                 this.pause().then(() => {

src/video/canvasLoader.js

@@ -10,7 +10,7 @@ import {
     supportOffscreen
 } from "../utils";
 import createWebGL from "../utils/webgl";
-import {CANVAS_RENDER_TYPE, CONTROL_HEIGHT, EVENTS, SCREENSHOT_TYPE, VIDEO_ENC_TYPE} from "../constant";
+import {CANVAS_RENDER_TYPE, CONTROL_HEIGHT, EVENTS, EVENTS_ERROR, SCREENSHOT_TYPE, VIDEO_ENC_TYPE} from "../constant";
 import CommonLoader from "./commonLoader";
 import saveAs from "../utils/file-save";
 
@@ -32,6 +32,7 @@ export default class CanvasVideoLoader extends CommonLoader {
         this.contextGlDestroy = null;
         this.bitmaprenderer = null;
         this.renderType = null;
+        this.isContextGlRenderLost = false;
         this.videoInfo = {
             width: '',
             height: '',
@@ -60,19 +61,19 @@ export default class CanvasVideoLoader extends CommonLoader {
         }
 
         this.renderType = null;
+        this.isContextGlRenderLost = false;
 
         this.player.debug.log(`CanvasVideoLoader`, 'destroy');
     }
 
 
     _initContextGl() {
         this.contextGl = createContextGL(this.$videoElement);
-        if(this.contextGl){
+        if (this.contextGl) {
             const webgl = createWebGL(this.contextGl, this.player._opt.openWebglAlignment);
             this.contextGlRender = webgl.render;
             this.contextGlDestroy = webgl.destroy
-        }
-        else {
+        } else {
             this.player.debug.error(`CanvasVideoLoader`, 'init webgl fail');
         }
     }
@@ -119,7 +120,16 @@ export default class CanvasVideoLoader extends CommonLoader {
                 this.bitmaprenderer.transferFromImageBitmap(msg.buffer);
                 break;
             case CANVAS_RENDER_TYPE.webgl:
-                this.contextGlRender(this.$videoElement.width, this.$videoElement.height, msg.output[0], msg.output[1], msg.output[2]);
+                if (this.isContextGlRenderLost) {
+                    return;
+                }
+                try {
+                    this.contextGlRender(this.$videoElement.width, this.$videoElement.height, msg.output[0], msg.output[1], msg.output[2]);
+                } catch (e) {
+                    this.player.debug.error('CanvasVideoLoader', 'render', e);
+                    this.isContextGlRenderLost = true;
+                    this.player.emitError(EVENTS_ERROR.webglContextLostError)
+                }
                 break;
             case CANVAS_RENDER_TYPE.webcodecs:
                 // can use  createImageBitmap in wexin