Update: [Client][Worker/CaptureCompositor] ログ出力を増やす

client/src/components/Panel/Comment2.vue

@@ -208,7 +208,8 @@ export default Vue.extend({
         const max_comment_count = 500;
 
         // LiveCommentManager からコメントを受信したときのイベントハンドラーを登録
-        this.playerStore.event_emitter.on('LiveCommentReceived', (event) => {
+        // 非同期関数で登録することで、気持ち高速化を図る
+        this.playerStore.event_emitter.on('LiveCommentReceived', async (event) => {
 
             // 初回の過去コメント (最大50件) を受信したとき
             if (event.is_initial_comments === true) {
@@ -249,7 +250,7 @@ export default Vue.extend({
         });
 
         // LiveCommentManager からコメントの送信完了イベントを受信したときのイベントハンドラーを登録
-        this.playerStore.event_emitter.on('LiveCommentSendCompleted', (event) => {
+        this.playerStore.event_emitter.on('LiveCommentSendCompleted', async (event) => {
 
             // 送信した自分のコメントをコメントリストに追加
             this.comment_list.push(event.comment);

client/src/components/Panel/Twitter.vue

@@ -307,7 +307,8 @@ export default Vue.extend({
         this.updateTweetLetterCount();
 
         // CaptureManager からキャプチャを受け取るイベントハンドラーを登録
-        this.playerStore.event_emitter.on('CaptureCompleted', (event) => {
+        // 非同期関数で登録することで、CaptureManager でキャプチャの登録完了を待たずに処理を続行できるはず
+        this.playerStore.event_emitter.on('CaptureCompleted', async (event) => {
             this.addCaptureList(event.capture, event.filename);
         });
     },

client/src/services/player/managers/CaptureManager2.ts

@@ -289,7 +289,6 @@ class CaptureManager implements PlayerManager {
         // ***** キャプチャの実行・字幕/文字スーパー/コメントを合成 *****
 
         // 高速化のため、Promise.all() で並列に実行する
-        const create_image_bitmap_start_time = Utils.time();
         const create_image_bitmap_results = await Promise.all([
             // 現在再生中の動画のキャプチャを ImageBitmap として取得
             createImageBitmap(this.player.video),
@@ -302,7 +301,6 @@ class CaptureManager implements PlayerManager {
         const capture_image_bitmap = create_image_bitmap_results[0];
         const caption_image_bitmap = create_image_bitmap_results[1];
         const superimpose_image_bitmap = create_image_bitmap_results[2];
-        console.log('[CaptureManager] createImageBitmap():', Utils.mathFloor(Utils.time() - create_image_bitmap_start_time, 3), 'sec');
 
         // キャプチャにコメントを合成する場合、コメントを取得する
         const capture_comment_data = is_comment_composite ? this.createCaptureCommentData() : null;
@@ -314,6 +312,8 @@ class CaptureManager implements PlayerManager {
         // キャプチャの合成を実行し、字幕なしキャプチャと字幕ありキャプチャを生成する
         // Web Worker 側に ImageBitmap を移譲するため、Comlink.transfer() を使う
         // 第二引数に (第一引数内のオブジェクトに含まれる) 移譲する Transferable オブジェクトを渡す
+        console.log('[CaptureManager] Composite start:');
+        const capture_compositor_start_time = Utils.time();
         const capture_compositor = await new CaptureCompositorProxy(Comlink.transfer({
             mode: settings_store.settings.capture_caption_mode,
             capture: capture_image_bitmap,
@@ -323,6 +323,7 @@ class CaptureManager implements PlayerManager {
             capture_exif_data: capture_exif_data,
         }, image_bitmaps));
         const result = await capture_compositor.composite();
+        console.log('[CaptureManager] Composite end:', Utils.mathFloor(Utils.time() - capture_compositor_start_time, 3), 'sec');
 
         // ファイル名（拡張子なし）
         // TODO: ファイル名パターンを設定で変更できるようにする

client/src/workers/CaptureCompositor.ts

@@ -103,7 +103,6 @@ class CaptureCompositor implements ICaptureCompositor {
      */
     constructor(options: ICaptureCompositorOptions) {
         this.options = options;
-        console.log('[CaptureCompositor] Options:', options);
     }
 
 
@@ -112,6 +111,8 @@ class CaptureCompositor implements ICaptureCompositor {
      * @returns 字幕なしのキャプチャ画像と、字幕ありのキャプチャ画像の Blob オブジェクト (どちらかが null になる場合がある)
      */
     public async composite(): Promise<ICaptureCompositorResult> {
+        console.log('[CaptureCompositor] Composite start:', this.options);
+        const start_time = Utils.time();
 
         // 字幕ありキャプチャ画像から合成しているのは、this.compositeInNormalDirectMode() を実行した時点で
         // ImageBitmap が解放されてしまい、その後条件次第で実行される this.compositeInCaptionMode() でキャプチャを描画できなくなるため
@@ -138,6 +139,7 @@ class CaptureCompositor implements ICaptureCompositor {
 
         // 並列で実行して、結果を待つ
         const [capture_caption, capture_normal] = await Promise.all([capture_caption_promise, capture_normal_promise]);
+        console.log('[CaptureCompositor] Composite end:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
 
         return {
             capture_normal: capture_normal,
@@ -171,9 +173,9 @@ class CaptureCompositor implements ICaptureCompositor {
         // ImageBitmap を OffscreenCanvas に転送
         normal_direct_canvas_context.transferFromImageBitmap(this.options.capture);
         this.options.capture.close();  // ImageBitmap を解放
+        console.log('[CaptureCompositor] Normal (Direct):', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
 
         // EXIF メタデータをセットした Blob を返す
-        console.log('[CaptureCompositor] Normal (Direct):', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
         return await this.exportToBlob(normal_direct_canvas);
     }
 
@@ -217,9 +219,9 @@ class CaptureCompositor implements ICaptureCompositor {
         if (this.options.capture_comment_data !== null) {
             this.compositeComments(normal_canvas, normal_canvas_context);
         }
+        console.log('[CaptureCompositor] Normal:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
 
         // EXIF メタデータをセットした Blob を返す
-        console.log('[CaptureCompositor] Normal:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
         return await this.exportToBlob(normal_canvas);
     }
 
@@ -267,9 +269,9 @@ class CaptureCompositor implements ICaptureCompositor {
         if (this.options.capture_comment_data !== null) {
             this.compositeComments(caption_canvas, caption_canvas_context);
         }
+        console.log('[CaptureCompositor] With Caption:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
 
         // EXIF メタデータをセットした Blob を返す
-        console.log('[CaptureCompositor] With Caption:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
         return await this.exportToBlob(caption_canvas);
     }
 
@@ -304,6 +306,7 @@ class CaptureCompositor implements ICaptureCompositor {
         comment_canvas_context.textBaseline = 'top';
 
         // 指定された座標に、指定されたフォントサイズでコメントを描画
+        // TODO: なぜか Web フォントが効いてない
         for (const comment of this.options.capture_comment_data.comments) {
             comment_canvas_context.fillStyle = comment.color;
             // UI 側と同じフォント指定なので、明示的にロードせずとも OffscreenCanvas に描画できる状態にあるはず