@eva/plugin-renderer-video 2.1.0-beta.1

package/dist/plugin-renderer-video.esm.js

@@ -0,0 +1,490 @@
+import { Component, decorators, resource, OBSERVER_TYPE } from '@eva/eva.js';
+import { type } from '@eva/inspector-decorator';
+import { Renderer, RendererSystem } from '@eva/plugin-renderer';
+import { Texture, Sprite } from 'pixi.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Phaser 风格的 Video 渲染组件(Eva.js MVP 实现)。
+ *
+ * 行为:
+ * 1. ADD 时 VideoSystem 会创建一个 detached 的 `<video>` DOM 元素 + PixiJS Texture + Sprite,
+ *    Sprite 加入到 GameObject 的 PixiJS Container;
+ * 2. video 的源 (`<video>.src`) 由 `src` 决定:
+ *    - 若注册过同名 VIDEO/IMAGE 资源(且 instance.src 可用),取注册的 url;
+ *    - 否则直接当作 URL 使用。
+ * 3. 视频进入 `loadeddata` 后即可绘制;
+ * 4. CHANGE prop 时按属性增量更新(loop/muted/volume/playbackRate/src);
+ * 5. REMOVE/destroy 时停止播放、销毁 video/texture/sprite。
+ *
+ * 不支持(明确 SKIP):
+ * - HLS/DASH/MSE 高级流;
+ * - getUserMedia / 透明视频(alpha video / chroma key);
+ * - 作为 shader 纹理(Eva.js 无 GLSL 注入);
+ * - Phaser saveTexture 把视频转 sprite atlas 的工作流。
+ */
+class Video extends Component {
+    constructor() {
+        super(...arguments);
+        this.src = '';
+        this.loop = false;
+        this.autoplay = true;
+        this.muted = true;
+        this.volume = 1;
+        this.playbackRate = 1;
+        this.anchorX = 0.5;
+        this.anchorY = 0.5;
+        this.crossOrigin = 'anonymous';
+        this.playsInline = true;
+        /** Runtime 标记:System 设置,表示视频已经触发过 `ended`。 */
+        this.completed = false;
+    }
+    init(obj) {
+        if (obj)
+            Object.assign(this, obj);
+    }
+    /** 立即播放(若 video 已就绪)。 */
+    play() {
+        if (!this.videoElement)
+            return;
+        try {
+            const ret = this.videoElement.play();
+            if (ret && typeof ret.catch === 'function') {
+                return ret.catch((e) => {
+                    // eslint-disable-next-line no-console
+                    console.warn('[Video] play() rejected:', e);
+                });
+            }
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn('[Video] play() threw:', e);
+        }
+    }
+    /** 暂停。 */
+    pause() {
+        if (!this.videoElement)
+            return;
+        try {
+            this.videoElement.pause();
+        }
+        catch (_a) {
+            /* ignore */
+        }
+    }
+    /** 跳转到指定时间(秒)。 */
+    setCurrentTime(seconds) {
+        if (!this.videoElement)
+            return;
+        try {
+            this.videoElement.currentTime = Math.max(0, seconds);
+        }
+        catch (_a) {
+            /* ignore */
+        }
+    }
+    /** 把当前帧画到一个独立 canvas 上并返回,用于 snapshot(失败时返回 null)。 */
+    snapshot(area) {
+        var _a, _b, _c, _d;
+        const v = this.videoElement;
+        if (!v || v.readyState < 2)
+            return null;
+        const w = (_a = area === null || area === void 0 ? void 0 : area.width) !== null && _a !== void 0 ? _a : v.videoWidth;
+        const h = (_b = area === null || area === void 0 ? void 0 : area.height) !== null && _b !== void 0 ? _b : v.videoHeight;
+        if (w <= 0 || h <= 0)
+            return null;
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return null;
+            ctx.drawImage(v, (_c = area === null || area === void 0 ? void 0 : area.x) !== null && _c !== void 0 ? _c : 0, (_d = area === null || area === void 0 ? void 0 : area.y) !== null && _d !== void 0 ? _d : 0, w, h, 0, 0, w, h);
+            return canvas;
+        }
+        catch (_e) {
+            return null;
+        }
+    }
+}
+Video.componentName = 'Video';
+__decorate([
+    type('string'),
+    __metadata("design:type", String)
+], Video.prototype, "src", void 0);
+__decorate([
+    type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "loop", void 0);
+__decorate([
+    type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "autoplay", void 0);
+__decorate([
+    type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "muted", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "volume", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "playbackRate", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "anchorX", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "anchorY", void 0);
+__decorate([
+    type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "playsInline", void 0);
+
+/**
+ * 把 `src` 解析为可播放 URL。
+ * 1. 如果 `src` 是完整 URL(以 http(s):// 或 / 开头,或包含 .mp4/.webm/.ogv 后缀),直接使用。
+ * 2. 否则尝试从 resource manager 拿对应资源 base 元数据,优先取 `src.video.url` 或 `src.url`。
+ */
+function resolveSrc(src) {
+    if (!src)
+        return '';
+    if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('//') || src.startsWith('/')) {
+        return src;
+    }
+    if (/\.(mp4|webm|ogv|m4v|mov)(\?|#|$)/i.test(src)) {
+        return src;
+    }
+    // try resource registry
+    try {
+        const all = resource.resourcesMap || resource.resources;
+        if (all && all[src]) {
+            const meta = all[src];
+            const sources = meta.src || meta.data || {};
+            const candidate = sources.video || sources.audio || sources.image || sources;
+            if (candidate === null || candidate === void 0 ? void 0 : candidate.url)
+                return candidate.url;
+            if (candidate === null || candidate === void 0 ? void 0 : candidate.src)
+                return candidate.src;
+        }
+    }
+    catch (_a) {
+        /* ignore */
+    }
+    return src;
+}
+/**
+ * 透明 1x1 像素的 PNG，用作未就绪时的占位 texture 资源。
+ * 不直接用 Texture.EMPTY 是因为 EMPTY 的 source 在 v8 里某些路径上会触发 isValid 校验。
+ */
+const TRANSPARENT_PIXEL_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+let VideoSystem = class VideoSystem extends Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'Video';
+        this.records = {};
+    }
+    init() {
+        this.renderSystem = this.game.getSystem(RendererSystem);
+        this.renderSystem.rendererManager.register(this);
+    }
+    rendererUpdate(gameObject) {
+        var _a, _b, _c, _d, _e;
+        const record = this.records[gameObject.id];
+        if (!record)
+            return;
+        const c = record.component;
+        const v = record.video;
+        // 视频可绘制时把帧拷贝到 canvas，再通过 texture.source.update() 推到 GPU。
+        if (record.ctx && v.readyState >= 2 && v.videoWidth > 0 && v.videoHeight > 0) {
+            // 首次拿到真实尺寸时按 video 自然尺寸调整 canvas 分辨率。
+            if (!record.resizedToVideo) {
+                record.canvas.width = v.videoWidth;
+                record.canvas.height = v.videoHeight;
+                record.resizedToVideo = true;
+                // 重建 texture 以让 PixiJS 感知新的源尺寸。
+                const oldTex = record.texture;
+                const newTex = Texture.from(record.canvas);
+                record.texture = newTex;
+                record.sprite.texture = newTex;
+                if (oldTex && oldTex !== newTex) {
+                    try {
+                        oldTex.destroy(false);
+                    }
+                    catch ( /* ignore */_f) { /* ignore */ }
+                }
+            }
+            try {
+                record.ctx.drawImage(v, 0, 0, record.canvas.width, record.canvas.height);
+                // PixiJS v8: 通过 texture.source.update() 通知 GPU 上传新帧。
+                const src = (_a = record.texture) === null || _a === void 0 ? void 0 : _a.source;
+                if (src) {
+                    if (typeof src.update === 'function')
+                        src.update();
+                    else
+                        src.dirty = true;
+                }
+            }
+            catch (_g) {
+                /* drawImage 在某些跨域场景会抛 SecurityError，忽略让下一帧继续尝试 */
+            }
+        }
+        const w = (_b = c.width) !== null && _b !== void 0 ? _b : (v.videoWidth || 256);
+        const h = (_c = c.height) !== null && _c !== void 0 ? _c : (v.videoHeight || 256);
+        record.sprite.width = w;
+        record.sprite.height = h;
+        record.sprite.anchor.set((_d = c.anchorX) !== null && _d !== void 0 ? _d : 0.5, (_e = c.anchorY) !== null && _e !== void 0 ? _e : 0.5);
+    }
+    componentChanged(changed) {
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (changed.componentName !== 'Video')
+                return;
+            const component = changed.component;
+            const gameObjectId = changed.gameObject.id;
+            if (changed.type === OBSERVER_TYPE.ADD) {
+                const record = this.createRecord(component);
+                this.records[gameObjectId] = record;
+                const container = this.containerManager.getContainer(gameObjectId);
+                if (container)
+                    container.addChildAt(record.sprite, 0);
+                this.attachEndedHandler(record, changed.gameObject);
+                this.startLoad(record);
+            }
+            else if (changed.type === OBSERVER_TYPE.CHANGE) {
+                const record = this.records[gameObjectId];
+                if (!record)
+                    return;
+                const propKey = (_b = (_a = changed.prop) === null || _a === void 0 ? void 0 : _a.prop) === null || _b === void 0 ? void 0 : _b[0];
+                if (propKey === 'src') {
+                    try {
+                        record.video.pause();
+                    }
+                    catch ( /* ignore */_f) { /* ignore */ }
+                    const url = resolveSrc(component.src);
+                    record.video.src = url;
+                    record.component = component;
+                    component.videoElement = record.video;
+                    component.completed = false;
+                    record.resizedToVideo = false;
+                    try {
+                        record.video.load();
+                    }
+                    catch ( /* ignore */_g) { /* ignore */ }
+                    if (component.autoplay !== false)
+                        this.tryPlay(record.video);
+                }
+                else if (propKey === 'loop') {
+                    record.video.loop = !!component.loop;
+                }
+                else if (propKey === 'muted') {
+                    record.video.muted = !!component.muted;
+                }
+                else if (propKey === 'volume') {
+                    record.video.volume = Math.max(0, Math.min(1, (_c = component.volume) !== null && _c !== void 0 ? _c : 1));
+                }
+                else if (propKey === 'playbackRate') {
+                    record.video.playbackRate = (_d = component.playbackRate) !== null && _d !== void 0 ? _d : 1;
+                }
+            }
+            else if (changed.type === OBSERVER_TYPE.REMOVE) {
+                const record = this.records[gameObjectId];
+                if (!record)
+                    return;
+                this.tearDown(record);
+                const container = (_e = this.containerManager) === null || _e === void 0 ? void 0 : _e.getContainer(gameObjectId);
+                if (container)
+                    container.removeChild(record.sprite);
+                try {
+                    record.sprite.destroy({ children: true });
+                }
+                catch ( /* ignore */_h) { /* ignore */ }
+                delete this.records[gameObjectId];
+            }
+        });
+    }
+    createRecord(component) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const video = document.createElement('video');
+        video.crossOrigin = (_a = component.crossOrigin) !== null && _a !== void 0 ? _a : 'anonymous';
+        video.loop = !!component.loop;
+        video.muted = component.muted !== false;
+        video.volume = Math.max(0, Math.min(1, (_b = component.volume) !== null && _b !== void 0 ? _b : 1));
+        video.playbackRate = (_c = component.playbackRate) !== null && _c !== void 0 ? _c : 1;
+        video.playsInline = component.playsInline !== false;
+        video['webkit-playsinline'] = '';
+        video.preload = 'auto';
+        component.videoElement = video;
+        // 用一个 canvas 作为帧中转：PixiJS 直接把这个 canvas 当 ImageSource，
+        // 完全绕过 PixiJS v8 的 VideoSource（避免 _onPlayStart/_mediaReady 无限递归）。
+        const canvas = document.createElement('canvas');
+        canvas.width = (_d = component.width) !== null && _d !== void 0 ? _d : 256;
+        canvas.height = (_e = component.height) !== null && _e !== void 0 ? _e : 256;
+        const ctx = canvas.getContext('2d');
+        // 占位 texture：用透明 PNG 兜底，绝不传 EMPTY（v8 在某些 isValid 路径上不友好）。
+        const placeholderTex = Texture.from(TRANSPARENT_PIXEL_DATA_URL);
+        const sprite = new Sprite(placeholderTex);
+        sprite.anchor.set((_f = component.anchorX) !== null && _f !== void 0 ? _f : 0.5, (_g = component.anchorY) !== null && _g !== void 0 ? _g : 0.5);
+        return {
+            video,
+            canvas,
+            ctx,
+            texture: placeholderTex,
+            sprite,
+            component,
+            endedHandler: null,
+            resizedToVideo: false,
+        };
+    }
+    attachEndedHandler(record, _go) {
+        const handler = () => {
+            record.component.completed = true;
+            try {
+                record.video.dispatchEvent(new Event('eva-video-complete'));
+            }
+            catch (_a) {
+                /* ignore */
+            }
+        };
+        record.video.addEventListener('ended', handler);
+        record.endedHandler = handler;
+    }
+    startLoad(record) {
+        const url = resolveSrc(record.component.src);
+        record.video.src = url;
+        try {
+            record.video.load();
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+        if (record.component.autoplay !== false) {
+            // 元数据就绪后再 play，这样 videoWidth/videoHeight 已经稳定。
+            const onCanPlay = () => {
+                record.video.removeEventListener('canplay', onCanPlay);
+                record.video.removeEventListener('loadeddata', onCanPlay);
+                this.tryPlay(record.video);
+            };
+            if (record.video.readyState >= 2) {
+                this.tryPlay(record.video);
+            }
+            else {
+                record.video.addEventListener('canplay', onCanPlay);
+                record.video.addEventListener('loadeddata', onCanPlay);
+            }
+        }
+    }
+    tryPlay(video) {
+        try {
+            const p = video.play();
+            if (p && typeof p.catch === 'function') {
+                p.catch((err) => {
+                    // eslint-disable-next-line no-console
+                    console.warn('[Video] autoplay rejected:', (err === null || err === void 0 ? void 0 : err.message) || err);
+                });
+            }
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn('[Video] autoplay threw:', e);
+        }
+    }
+    tearDown(record) {
+        try {
+            record.video.pause();
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+        if (record.endedHandler) {
+            try {
+                record.video.removeEventListener('ended', record.endedHandler);
+            }
+            catch ( /* ignore */_b) { /* ignore */ }
+        }
+        try {
+            record.video.removeAttribute('src');
+            record.video.load();
+        }
+        catch ( /* ignore */_c) { /* ignore */ }
+        if (record.texture) {
+            try {
+                record.texture.destroy(false);
+            }
+            catch ( /* ignore */_d) { /* ignore */ }
+            record.texture = null;
+        }
+    }
+    destroy() {
+        var _a;
+        for (const key in this.records) {
+            const id = parseInt(key);
+            const record = this.records[id];
+            this.tearDown(record);
+            const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(id);
+            if (container)
+                container.removeChild(record.sprite);
+            try {
+                record.sprite.destroy({ children: true });
+            }
+            catch ( /* ignore */_b) { /* ignore */ }
+            delete this.records[id];
+        }
+    }
+};
+VideoSystem.systemName = 'Video';
+VideoSystem = __decorate([
+    decorators.componentObserver({
+        Video: [
+            { prop: ['src'], deep: false },
+            { prop: ['loop'], deep: false },
+            { prop: ['muted'], deep: false },
+            { prop: ['volume'], deep: false },
+            { prop: ['playbackRate'], deep: false },
+        ],
+    })
+], VideoSystem);
+var VideoSystem$1 = VideoSystem;
+
+export { Video, VideoSystem$1 as VideoSystem };

package/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/plugin-renderer-video.cjs.prod.js')
+} else {
+  module.exports = require('./dist/plugin-renderer-video.cjs.js')
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@eva/plugin-renderer-video",
+  "version": "2.1.0-beta.1",
+  "description": "@eva/plugin-renderer-video",
+  "main": "index.js",
+  "module": "dist/plugin-renderer-video.esm.js",
+  "bundle": "EVA.plugin.renderer.video",
+  "unpkg": "dist/EVA.plugin.renderer.video.min.js",
+  "files": [
+    "index.js",
+    "dist"
+  ],
+  "types": "dist/plugin-renderer-video.d.ts",
+  "keywords": [
+    "eva.js",
+    "eva-plugin-renderer-video"
+  ],
+  "author": "dingyike.dyk <dingyike.dyk@alibaba-inc.com>",
+  "license": "MIT",
+  "homepage": "https://eva.js.org",
+  "dependencies": {
+    "@eva/inspector-decorator": "^2.0.0-beta.0",
+    "@eva/eva.js": "2.1.0-beta.1",
+    "@eva/plugin-renderer": "2.1.0-beta.1",
+    "pixi.js": "^8.6.3"
+  }
+}