@next2d/media 1.18.11 → 2.0.0

package/src/Video/service/VideoEndedEventService.js

@@ -0,0 +1,22 @@
+import { VideoEvent } from "@next2d/events";
+/**
+ * @description ビデオが最終フレームに達したときの処理
+ *              Processing when the video reaches the last frame
+ *
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (video) => {
+    if (video.willTrigger(VideoEvent.ENDED)) {
+        video.dispatchEvent(new VideoEvent(VideoEvent.ENDED));
+    }
+    if (video.loop) {
+        video.currentTime = 0;
+        return;
+    }
+    video.ended = true;
+    video.changed = false;
+    video.pause();
+};

package/src/Video/service/VideoLoadedmetadataEventService.d.ts

@@ -0,0 +1,12 @@
+import type { Video } from "../../Video";
+/**
+ * @description Videoオブジェクトの幅と高さを更新する
+ *              Update the width and height of the Video object
+ *
+ * @param  {HTMLVideoElement} element
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (element: HTMLVideoElement, video: Video) => void;

package/src/Video/service/VideoLoadedmetadataEventService.js

@@ -0,0 +1,21 @@
+/**
+ * @description Videoオブジェクトの幅と高さを更新する
+ *              Update the width and height of the Video object
+ *
+ * @param  {HTMLVideoElement} element
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (element, video) => {
+    // update metadata
+    video.currentTime = 0;
+    video.duration = element.duration;
+    video.videoWidth = element.videoWidth;
+    video.videoHeight = element.videoHeight;
+    // reset
+    const offscreenCanvas = new OffscreenCanvas(video.videoWidth, video.videoHeight);
+    video.$context = offscreenCanvas.getContext("2d");
+    video.$offscreenCanvas = offscreenCanvas;
+};

package/src/Video/service/VideoProgressEventService.d.ts

@@ -0,0 +1,11 @@
+import type { Video } from "../../Video";
+/**
+ * @description ビデオ読み込み中の進捗状態の確認イベント処理関数
+ *              Event processing function to check the progress status of video loading
+ *
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (video: Video, event: ProgressEvent) => void;

package/src/Video/service/VideoProgressEventService.js

@@ -0,0 +1,15 @@
+import { ProgressEvent as Next2DProgressEvent } from "@next2d/events";
+/**
+ * @description ビデオ読み込み中の進捗状態の確認イベント処理関数
+ *              Event processing function to check the progress status of video loading
+ *
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (video, event) => {
+    if (video.willTrigger(Next2DProgressEvent.PROGRESS)) {
+        video.dispatchEvent(new Next2DProgressEvent(Next2DProgressEvent.PROGRESS, false, event.loaded, event.total));
+    }
+};

package/src/Video/usecase/VideoBuildFromCharacterUseCase.d.ts

@@ -0,0 +1,13 @@
+import type { Video } from "@next2d/media";
+import type { IVideoCharacter } from "../../interface/IVideoCharacter";
+/**
+ * @description characterを元にTextFieldを構築
+ *              Build TextField based on character
+ *
+ * @param  {Video} video
+ * @param  {IVideoCharacter} character
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (video: Video, character: IVideoCharacter) => void;

package/src/Video/usecase/VideoBuildFromCharacterUseCase.js

@@ -0,0 +1,22 @@
+/**
+ * @description characterを元にTextFieldを構築
+ *              Build TextField based on character
+ *
+ * @param  {Video} video
+ * @param  {IVideoCharacter} character
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (video, character) => {
+    if (!character.videoData) {
+        character.videoData = new Uint8Array(character.buffer);
+        character.buffer = null;
+    }
+    video.loop = character.loop;
+    video.autoPlay = character.autoPlay;
+    video.videoWidth = character.bounds.xMax;
+    video.videoHeight = character.bounds.yMax;
+    video.volume = character.volume;
+    video.src = URL.createObjectURL(new Blob([character.videoData], { "type": "video/mp4" }));
+};

package/src/Video/usecase/VideoCanplaythroughEventUseCase.d.ts

@@ -0,0 +1,11 @@
+import type { Video } from "../../Video";
+/**
+ * @description 再生可能処理
+ *              Playable processing
+ *
+ * @param  {Video} video
+ * @return {Promise}
+ * @method
+ * @protected
+ */
+export declare const execute: (video: Video) => Promise<void>;

package/src/Video/usecase/VideoCanplaythroughEventUseCase.js

@@ -0,0 +1,26 @@
+import { Event } from "@next2d/events";
+import { execute as videoApplyChangesService } from "../service/VideoApplyChangesService";
+import { $isAudioContext, $pushMutedVideos } from "../../MediaUtil";
+/**
+ * @description 再生可能処理
+ *              Playable processing
+ *
+ * @param  {Video} video
+ * @return {Promise}
+ * @method
+ * @protected
+ */
+export const execute = async (video) => {
+    if (video.autoPlay) {
+        if (!$isAudioContext()) {
+            video.muted = true;
+            $pushMutedVideos(video);
+        }
+        await video.play();
+    }
+    video.loaded = true;
+    videoApplyChangesService(video);
+    if (video.willTrigger(Event.COMPLETE)) {
+        video.dispatchEvent(new Event(Event.COMPLETE));
+    }
+};

package/src/Video/usecase/VideoPlayEventUseCase.d.ts

@@ -0,0 +1,11 @@
+import type { Video } from "../../Video";
+/**
+ * @description ビデオ再生中のイベント処理関数
+ *              Event processing function during video playback
+ *
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (video: Video) => number;

package/src/Video/usecase/VideoPlayEventUseCase.js

@@ -0,0 +1,31 @@
+import { $getPlayingVideos } from "../../MediaUtil";
+import { VideoEvent } from "@next2d/events";
+import { execute as videoApplyChangesService } from "../service/VideoApplyChangesService";
+/**
+ * @description ビデオ再生中のイベント処理関数
+ *              Event processing function during video playback
+ *
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (video) => {
+    if (video.paused || !video.loaded) {
+        return 0;
+    }
+    if (video.willTrigger(VideoEvent.PLAY)) {
+        video.dispatchEvent(new VideoEvent(VideoEvent.PLAY));
+    }
+    videoApplyChangesService(video);
+    const playingVideos = $getPlayingVideos();
+    if (playingVideos.indexOf(video) === -1) {
+        playingVideos.push(video);
+    }
+    if (video.$context && video.$videoElement) {
+        video.$context.drawImage(video.$videoElement, 0, 0, video.videoWidth, video.videoHeight);
+    }
+    return requestAnimationFrame(() => {
+        execute(video);
+    });
+};

package/src/Video/usecase/VideoRegisterEventUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { Video } from "../../Video";
+/**
+ * @description HTMLVideoElementにイベントを登録する
+ *              Register events on HTMLVideoElement
+ *
+ * @param  {HTMLVideoElement} element
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (element: HTMLVideoElement, video: Video) => void;

package/src/Video/usecase/VideoRegisterEventUseCase.js

@@ -0,0 +1,29 @@
+import { execute as videoCanplaythroughEventUseCase } from "./VideoCanplaythroughEventUseCase";
+import { execute as videoLoadedmetadataEventService } from "../service/VideoLoadedmetadataEventService";
+import { execute as videoProgressEventService } from "../service/VideoProgressEventService";
+import { execute as videoEndedEventService } from "../service/VideoEndedEventService";
+/**
+ * @description HTMLVideoElementにイベントを登録する
+ *              Register events on HTMLVideoElement
+ *
+ * @param  {HTMLVideoElement} element
+ * @param  {Video} video
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (element, video) => {
+    element.addEventListener("loadedmetadata", () => {
+        videoLoadedmetadataEventService(element, video);
+    }, { "once": true });
+    element.addEventListener("progress", (event) => {
+        videoProgressEventService(video, event);
+    });
+    element.addEventListener("canplaythrough", async () => {
+        await videoCanplaythroughEventUseCase(video);
+        element.volume = video.volume;
+    }, { "once": true });
+    element.addEventListener("ended", () => {
+        videoEndedEventService(video);
+    });
+};

package/src/Video.d.ts

@@ -0,0 +1,245 @@
+import type { ICharacter } from "./interface/ICharacter";
+import type { LoaderInfo } from "@next2d/display";
+import { DisplayObject } from "@next2d/display";
+/**
+ * @description サーバーまたはローカルに保存された録画済みビデオファイルを再生する Video オブジェクトです。
+ *              ビデオストリームを再生するには、attachNetStream() を使用して、ビデオを Video オブジェクトに関連付けます。
+ *              次に、addChild() を使用して、Video オブジェクトを表示リストに追加します。
+ *              A Video object that plays a recorded video file stored on a server or locally.
+ *              To play a video stream, use attachNetStream() to attach the video to the Video object.
+ *              Then, add the Video object to the display list using addChild().
+ *
+ * @class
+ * @memberOf next2d.media
+ * @extends  DisplayObject
+ */
+export declare class Video extends DisplayObject {
+    /**
+     * @description キーフレーム総数
+     *              Total number of keyframes
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    duration: number;
+    /**
+     * @description ビデオを拡大 / 縮小する際にスムージング（補間）するかどうかを指定します。
+     *              Specifies whether the video should be smoothed (interpolated)
+     *              when it is scaled.
+     *
+     * @type {boolean}
+     * @default true
+     * @public
+     */
+    smoothing: boolean;
+    /**
+     * @description ビデオをループ生成するかどうかを指定します。
+     *              Specifies whether to generate a video loop.
+     *
+     * @type {boolean}
+     * @default false
+     * @public
+     */
+    loop: boolean;
+    /**
+     * @description ビデオの自動再生の設定。
+     *              Setting up automatic video playback.
+     *
+     * @type {boolean}
+     * @default true
+     * @public
+     */
+    autoPlay: boolean;
+    /**
+     * @description 現在のキーフレーム
+     *              Current keyframe
+     *
+     *
+     * @member {number}
+     * @public
+     */
+    currentTime: number;
+    /**
+     * @description ビデオの幅をピクセル単位で指定する整数です。
+     *              An integer specifying the width of the video, in pixels.
+     *
+     * @member {number}
+     * @default 0
+     * @public
+     */
+    videoWidth: number;
+    /**
+     * @description ビデオの高さをピクセル単位で指定する整数です。
+     *              An integer specifying the height of the video, in pixels.
+     *
+     * @member {number}
+     * @default 0
+     * @public
+     */
+    videoHeight: number;
+    /**
+     * @description ビデオが読み込まれているかどうかを返します。
+     *              Returns whether the video has been loaded.
+     *
+     * @type {boolean}
+     * @default false
+     * @public
+     */
+    loaded: boolean;
+    /**
+     * @description ビデオが終了したかどうかを返します。
+     *              Returns whether the video has ended.
+     *
+     * @type {boolean}
+     * @default false
+     * @public
+     */
+    ended: boolean;
+    /**
+     * @description Videoの機能を所持しているかを返却
+     *              Returns whether the display object has Video functionality.
+     *
+     * @type {boolean}
+     * @readonly
+     * @public
+     */
+    readonly isVideo: boolean;
+    /**
+     * @type {HTMLVideoElement}
+     * @default null
+     * @public
+     */
+    $videoElement: HTMLVideoElement | null;
+    /**
+     * @type {OffscreenCanvas}
+     * @default null
+     * @public
+     */
+    $offscreenCanvas: OffscreenCanvas | null;
+    /**
+     * @type {OffscreenCanvasRenderingContext2D}
+     * @default null
+     * @public
+     */
+    $context: OffscreenCanvasRenderingContext2D | null;
+    /**
+     * @type {boolean}
+     * @default true
+     * @public
+     */
+    paused: boolean;
+    /**
+     * @type {number}
+     * @default -1
+     * @private
+     */
+    private _$timerId;
+    /**
+     * @type {number}
+     * @default 1
+     * @private
+     */
+    private _$volume;
+    /**
+     * @type {string}
+     * @default ""
+     * @private
+     */
+    private _$src;
+    /**
+     * @param {number} [width = 0]
+     * @param {number} [height = 0]
+     *
+     * @constructor
+     * @public
+     */
+    constructor(width?: number, height?: number);
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return {string}
+     * @const
+     * @static
+     */
+    static get namespace(): string;
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return {string}
+     * @const
+     * @public
+     */
+    get namespace(): string;
+    /**
+     * @description ビデオコンテンツへの URL を指定します。
+     *              Specifies the URL of the video content.
+     *
+     * @member {string}
+     * @default ""
+     * @public
+     */
+    get src(): string;
+    set src(src: string);
+    /**
+     * @description ビデオがミュートされているかどうかを返します。
+     *              Returns whether the video is muted.
+     *
+     * @member {boolean}
+     * @default false
+     * @public
+     */
+    get muted(): boolean;
+    set muted(muted: boolean);
+    /**
+     * @description ボリュームです。範囲は 0（無音）～ 1（フルボリューム）です。
+     *              The volume, ranging from 0 (silent) to 1 (full volume).
+     *
+     * @member {number}
+     * @default 1
+     * @public
+     */
+    get volume(): number;
+    set volume(volume: number);
+    /**
+     * @description ビデオの再生を一時停止します。
+     *              Pauses the video playback.
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    pause(): void;
+    /**
+     * @description ビデオファイルを再生します。
+     *              Plays the video file.
+     *
+     * @returns {void}
+     * @method
+     * @public
+     */
+    play(): Promise<void>;
+    /**
+     * @description 指定された位置に最も近いキーフレームをシークします。
+     *              Seeks the keyframe closest to the specified location.
+     *
+     * @param  {number} offset
+     * @return {void}
+     * @method
+     * @public
+     */
+    seek(offset: number): void;
+    /**
+     * @description character 情報を元に DisplayObject を構築
+     *              Build DisplayObject based on character
+     *
+     * @param  {ICharacter} character
+     * @param  {LoaderInfo} [loader_info=null]
+     * @return {void}
+     * @method
+     * @protected
+     */
+    $sync(character: ICharacter, loader_info?: LoaderInfo | null): void;
+}