直播视频组件 (Web React)

npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
npm install sass --save-dev

import React, { useCallback, useEffect } from "react";
import { MessageBox, Dialog, UIKitProvider } from "@tencentcloud/uikit-base-component-react";
import TUIRoomEngine, { TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
import { LiveView, LiveListEvent, useLiveListState, useRoomEngine } from "tuikit-atomicx-react";
import styles from "./LivePlayer.module.scss";

interface LivePlayerProps {
  className?: string;
  liveId?: string;
}

const LivePlayer: React.FC<LivePlayerProps> = ({ className }) => {
  const roomEngine = useRoomEngine();
  const { currentLive, joinLive, subscribeEvent, unsubscribeEvent } = useLiveListState();

  useEffect(() => {
    if (!currentLive?.liveId) {
      joinLive({ liveId: ''});  // 输入您要加入的直播间 ID，也可以是来自外部传入的组件参数或者 URL 参数等。
    }
  }, [currentLive?.liveId, joinLive]);

  const handleAutoPlayFailed = useCallback(() => {
    MessageBox.alert({
      content: '内容已准备就绪，点击【播放】按钮开始播放',
      confirmText: '播放',
      showClose: false,
      modal: false,
    });
  }, []);

  const handleKickedOutOfLive = useCallback(() => {
    Dialog.open({
      content: '你已被踢出直播间',
      confirmText: '确认',
      className: styles.livePlayer__liveDialog,
      showCancel: false,
      showClose: false,
      modal: true,
      center: true,
      onConfirm: () => {
        Dialog.close();
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
      onClose: () => {
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
    });
  }, []);

  const handleLiveEnded = useCallback(() => {
    Dialog.open({
      content: '直播已结束',
      confirmText: '确认',
      className: styles.livePlayer__liveDialog,
      showCancel: false,
      showClose: false,
      modal: true,
      center: true,
      onConfirm: () => {
        Dialog.close();
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
      onClose: () => {
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
    });
  }, []);

  // Setup event listeners
  useEffect(() => {
    if (roomEngine.instance) {
      roomEngine.instance.on(TUIRoomEvents.onAutoPlayFailed, handleAutoPlayFailed);
    } else {
      TUIRoomEngine.once("ready", () => {
        roomEngine.instance?.on(TUIRoomEvents.onAutoPlayFailed, handleAutoPlayFailed);
      });
    }

    subscribeEvent(LiveListEvent.ON_LIVE_ENDED, handleLiveEnded);
    subscribeEvent(LiveListEvent.ON_KICKED_OUT_OF_LIVE, handleKickedOutOfLive);

    return () => {
      roomEngine.instance?.off(TUIRoomEvents.onAutoPlayFailed, handleAutoPlayFailed);
      unsubscribeEvent(LiveListEvent.ON_LIVE_ENDED, handleLiveEnded);
      unsubscribeEvent(LiveListEvent.ON_KICKED_OUT_OF_LIVE, handleKickedOutOfLive);
    };
  }, [handleAutoPlayFailed, handleLiveEnded, handleKickedOutOfLive, roomEngine.instance, subscribeEvent, unsubscribeEvent]);

  return (
    <UIKitProvider theme="dark">
      <div className={`${styles.livePlayer} ${className || ''}`}>
        <LiveView />
      </div>
    </UIKitProvider>
  );
};

export default LivePlayer;