tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/RoomParticipantView/StreamPlayManager/StreamInfoManager.ts

@@ -0,0 +1,209 @@
+import { FillMode } from '../../../types';
+import { VideoStreamQuality } from './types';
+import type { StreamInfo } from './types';
+import type { VideoStreamType } from '../../../types';
+
+/**
+ * 流信息管理器 - 负责视图绑定和流信息管理
+ * TODO: StreamInfoManager 里面信息的增加和删除应该只和 onUserVideoStateChanged 的回调同步
+ * 职责：
+ * 1. 管理流信息的存储和查询
+ * 2. 处理视图的绑定和解绑
+ * 3. 提供流状态查询接口
+ * 4. 管理视图ID转换
+ */
+export class StreamInfoManager {
+  // 存储流信息的映射表，key: userId_streamType, value: 流信息
+  private streamInfoMap: Map<string, StreamInfo> = new Map();
+
+  public addView(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    view: HTMLDivElement;
+    initVisible?: boolean;
+  }): StreamInfo {
+    const { userId, streamType, view, initVisible } = options;
+    const streamKey = this.getStreamKey(userId, streamType);
+
+    const streamInfo = this.streamInfoMap.get(streamKey) || {
+      views: new Map(),
+      isPlaying: false,
+      videoQuality: VideoStreamQuality.LD,
+      fillMode: FillMode.Fit,
+    };
+
+    if (!streamInfo.views.has(view)) {
+      streamInfo.views.set(view, { isVisible: initVisible || false });
+    }
+    this.streamInfoMap.set(streamKey, streamInfo);
+    console.log(`[StreamPlay][StreamInfoManager] 视图添加: ${streamKey}, 视图数量: ${streamInfo.views.size}`);
+    return streamInfo;
+  }
+
+  public removeView(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    view: HTMLDivElement;
+  }): StreamInfo | null {
+    const { userId, streamType, view } = options;
+    const streamKey = this.getStreamKey(userId, streamType);
+    const streamInfo = this.streamInfoMap.get(streamKey);
+
+    if (!streamInfo) {
+      return null;
+    }
+
+    streamInfo.views.delete(view);
+    if (streamInfo.views.size === 0) {
+      this.streamInfoMap.delete(streamKey);
+      console.log(`[StreamPlay][StreamInfoManager] remove stream info: ${streamKey}`);
+      return null;
+    }
+    this.streamInfoMap.set(streamKey, streamInfo);
+    console.log(`[StreamPlay][StreamInfoManager] ${streamKey} remove view: ${view}, remaining view count: ${streamInfo.views.length}`);
+    return streamInfo;
+  }
+
+  public setViewVisible(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    view: HTMLDivElement;
+    isVisible: boolean;
+  }): StreamInfo | null {
+    const { userId, streamType, view, isVisible } = options;
+    const streamInfo = this.getStreamInfo(userId, streamType);
+    if (!streamInfo) {
+      return null;
+    }
+    const oldStreamViewInfo = streamInfo.views.get(view);
+    if (oldStreamViewInfo) {
+      oldStreamViewInfo.isVisible = isVisible;
+    } else {
+      streamInfo.views.set(view, { isVisible });
+    }
+    this.streamInfoMap.set(this.getStreamKey(userId, streamType), streamInfo);
+    return streamInfo;
+  }
+
+  public updateStreamInfo(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    updates: Partial<StreamInfo>;
+  }): StreamInfo | null {
+    const { userId, streamType, updates } = options;
+    const streamKey = this.getStreamKey(userId, streamType);
+    const streamInfo = this.streamInfoMap.get(streamKey);
+
+    if (!streamInfo) {
+      return null;
+    }
+
+    Object.assign(streamInfo, updates);
+    this.streamInfoMap.set(streamKey, streamInfo);
+
+    return streamInfo;
+  }
+
+  public getStreamInfo(userId: string, streamType: VideoStreamType): StreamInfo | null {
+    const streamKey = this.getStreamKey(userId, streamType);
+    return this.streamInfoMap.get(streamKey) || null;
+  }
+
+  public isStreamPlaying(userId: string, streamType: VideoStreamType): boolean {
+    const streamInfo = this.getStreamInfo(userId, streamType);
+    return streamInfo?.isPlaying || false;
+  }
+
+  public getPlayingStreams(): Array<{
+    userId: string;
+    streamType: VideoStreamType;
+    viewCount: number;
+    videoQuality?: VideoStreamQuality;
+  }> {
+    const playingStreams: Array<{
+      userId: string;
+      streamType: VideoStreamType;
+      viewCount: number;
+      videoQuality?: VideoStreamQuality;
+    }> = [];
+
+    Array.from(this.streamInfoMap.entries()).forEach(([streamKey, streamInfo]) => {
+      if (streamInfo.isPlaying) {
+        const [userId, streamType] = this.parseStreamKey(streamKey);
+        playingStreams.push({
+          userId,
+          streamType: streamType as VideoStreamType,
+          viewCount: streamInfo.views.size,
+          videoQuality: streamInfo.videoQuality,
+        });
+      }
+    });
+
+    return playingStreams;
+  }
+
+  public getAllStreams(): Array<{
+    userId: string;
+    streamType: VideoStreamType;
+    streamInfo: StreamInfo;
+  }> {
+    const allStreams: Array<{
+      userId: string;
+      streamType: VideoStreamType;
+      streamInfo: StreamInfo;
+    }> = [];
+
+    for (const [streamKey, streamInfo] of this.streamInfoMap) {
+      const [userId, streamType] = this.parseStreamKey(streamKey);
+      allStreams.push({
+        userId,
+        streamType: streamType as VideoStreamType,
+        streamInfo,
+      });
+    }
+
+    return allStreams;
+  }
+
+  public getVisibleViewIdList(userId: string, streamType: VideoStreamType): string[] {
+    const streamInfo = this.getStreamInfo(userId, streamType);
+    if (!streamInfo) {
+      return [];
+    }
+    return Array.from(streamInfo.views.entries()).filter(([_, viewInfo]) => viewInfo.isVisible).map(([view]) => view.id || '');
+  }
+
+  public getAllViewIdList(userId: string, streamType: VideoStreamType): string[] {
+    const streamInfo = this.getStreamInfo(userId, streamType);
+    if (!streamInfo) {
+      return [];
+    }
+    return Array.from(streamInfo.views.keys()).map(view => view.id || '');
+  }
+
+  public isViewExists(view: string | HTMLDivElement): boolean {
+    if (typeof view === 'string') {
+      return !!document.getElementById(view);
+    }
+    return !!view && document.contains(view);
+  }
+
+  public getValidViews(views: (string | HTMLDivElement)[]): (string | HTMLDivElement)[] {
+    return views.filter(view => this.isViewExists(view));
+  }
+
+  public clear(): void {
+    this.streamInfoMap.clear();
+  }
+
+  private getStreamKey(userId: string, streamType: VideoStreamType): string {
+    return `${userId}_${streamType}`;
+  }
+
+  private parseStreamKey(streamKey: string): [string, string] {
+    const parts = streamKey.split('_');
+    return [parts.slice(0, parts.length - 1).join('_'), parts.slice(-1)[0]];
+  }
+}
+
+export default StreamInfoManager;

package/src/components/RoomParticipantView/StreamPlayManager/StreamPlayer.ts

@@ -0,0 +1,183 @@
+import { TRTCVideoFillMode, TRTCVideoMirrorType, TRTCVideoRotation } from '@tencentcloud/tuiroom-engine-js';
+import { useRoomEngine } from '../../../hooks/useRoomEngine';
+import { useLoginState } from '../../../states/LoginState';
+import { TUIVideoStreamType, VideoStreamType, FillMode } from '../../../types';
+import { VideoStreamQuality } from './types';
+
+const roomEngine = useRoomEngine();
+const { loginUserInfo } = useLoginState();
+
+/**
+ * 流播放器 - 负责视频流的播放控制
+ * 职责：
+ * 1. 管理视频流的播放和停止
+ * 2. 处理本地和远程流的不同逻辑
+ * 3. 设置视频渲染参数
+ * 4. 管理流类型转换
+ */
+export class StreamPlayer {
+  public async startPlayVideo(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    videoQuality?: VideoStreamQuality;
+    viewIdList: string[];
+  }): Promise<void> {
+    const { userId, streamType, videoQuality, viewIdList } = options;
+    if (viewIdList.length === 0) {
+      console.warn(`[StreamPlayer] ${userId}_${streamType} No valid views to play video`);
+      throw new Error(`[StreamPlayer] ${userId}_${streamType} No valid views to play video`);
+    }
+
+    try {
+      const playStreamType = this.getPlayStreamType(streamType, videoQuality);
+      if (userId === loginUserInfo.value?.userId) {
+        if (playStreamType === TUIVideoStreamType.kCameraStream || playStreamType === TUIVideoStreamType.kCameraStreamLow) {
+          await roomEngine.instance?.setLocalVideoView({ view: viewIdList });
+        }
+      } else {
+        await roomEngine.instance?.setRemoteVideoView({
+          userId,
+          streamType: playStreamType,
+          view: viewIdList,
+        });
+        await roomEngine.instance?.startPlayRemoteVideo({
+          userId,
+          streamType: playStreamType,
+        });
+
+        console.log(`[StreamPlayer] startPlayRemoteVideo: ${userId}_${streamType}, videoQuality: ${videoQuality}`);
+      }
+    } catch (error) {
+      console.error('[StreamPlayer] startPlayVideo error:', error);
+      throw error;
+    }
+  }
+
+  public async stopPlayVideo(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    videoQuality?: VideoStreamQuality;
+  }): Promise<void> {
+    const { userId, streamType, videoQuality } = options;
+
+    try {
+      const playStreamType = this.getPlayStreamType(streamType, videoQuality);
+
+      if (userId === loginUserInfo.value?.userId) {
+        if (playStreamType === TUIVideoStreamType.kCameraStream || playStreamType === TUIVideoStreamType.kCameraStreamLow) {
+          await roomEngine.instance?.setLocalVideoView({ view: null });
+        }
+      } else {
+        await roomEngine.instance?.stopPlayRemoteVideo({
+          userId,
+          streamType: playStreamType,
+        });
+      }
+    } catch (error) {
+      console.error('[StreamPlayer] stopPlayVideo error:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 更新视频视图绑定
+   */
+  public async updateVideoView(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    viewIdList: string[];
+  }): Promise<void> {
+    const { userId, streamType, viewIdList } = options;
+
+    if (viewIdList.length === 0) {
+      console.warn('[StreamPlayer] No valid views to update');
+      return;
+    }
+
+    try {
+      const playStreamType = this.getPlayStreamType(streamType);
+
+      if (userId === loginUserInfo.value?.userId) {
+        if (playStreamType === TUIVideoStreamType.kCameraStream || playStreamType === TUIVideoStreamType.kCameraStreamLow) {
+          await roomEngine.instance?.setLocalVideoView({ view: viewIdList });
+        }
+      } else {
+        // 远程视频流
+        await roomEngine.instance?.setRemoteVideoView({
+          userId,
+          streamType: playStreamType,
+          view: viewIdList,
+        });
+      }
+
+      console.log(`[StreamPlayer] 视图更新: ${userId}_${streamType}, 视图数量: ${viewIdList.length}`);
+    } catch (error) {
+      console.error('[StreamPlayer] updateVideoView error:', error);
+      throw error;
+    }
+  }
+
+  public async updateVideoQuality(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    videoQuality: VideoStreamQuality;
+  }): Promise<void> {
+    const { userId, streamType, videoQuality } = options;
+    if (userId === loginUserInfo.value?.userId || streamType === VideoStreamType.Screen) {
+      return;
+    }
+
+    const playStreamType = this.getPlayStreamType(streamType, videoQuality);
+    await roomEngine.instance?.startPlayRemoteVideo({
+      userId,
+      streamType: playStreamType,
+    });
+  }
+
+  public async setRenderParams(options: {
+    userId: string;
+    streamType: VideoStreamType;
+    renderParams: {
+      fillMode?: FillMode;
+    };
+  }): Promise<void> {
+    const { userId, streamType, renderParams } = options;
+    const trtcCloud = roomEngine.instance?.getTRTCCloud();
+    const trtcStreamType = this.getPlayStreamType(streamType);
+    const fillModeMap = {
+      [FillMode.Fill]: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
+      [FillMode.Fit]: TRTCVideoFillMode.TRTCVideoFillMode_Fit,
+    };
+    const fillMode = fillModeMap[renderParams.fillMode || FillMode.Fit];
+    try {
+      if (userId === loginUserInfo.value?.userId) {
+        await trtcCloud?.setLocalRenderParams({
+          mirrorType: TRTCVideoMirrorType.TRTCVideoMirrorType_Auto,
+          rotation: TRTCVideoRotation.TRTCVideoRotation0,
+          fillMode,
+        });
+      } else {
+        await trtcCloud?.setRemoteRenderParams(userId, trtcStreamType, {
+          mirrorType: TRTCVideoMirrorType.TRTCVideoMirrorType_Auto,
+          rotation: TRTCVideoRotation.TRTCVideoRotation0,
+          fillMode,
+        });
+      }
+    } catch (error) {
+      console.error('[StreamPlayer] setRenderParams error:', error);
+      throw error;
+    }
+  }
+
+  private getPlayStreamType(streamType: VideoStreamType, videoQuality?: VideoStreamQuality): TUIVideoStreamType {
+    if (streamType === VideoStreamType.Screen) {
+      return TUIVideoStreamType.kScreenStream;
+    }
+    if (videoQuality === VideoStreamQuality.LD) {
+      return TUIVideoStreamType.kCameraStreamLow;
+    }
+    return TUIVideoStreamType.kCameraStream;
+  }
+}
+
+export default StreamPlayer;