即时通信 IM 直播视频组件 (Web React)

一、核心功能

二、步骤1：环境配置及开通服务

在进行快速接入之前，你需要参考 准备工作（Web React），满足相关环境配置及开通对应服务。

三、步骤2：安装依赖

npmpnpmyarnnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react –savenpm install sass –save-devpnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactpnpm add sass –devyarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn add sass –dev

四、步骤3：加入直播间

在你的项目中引入并使用 LiveView 组件，可直接复制如下代码示例至你的项目中，观看对应直播间的直播视频。

LivePlayer.tsxLivePlayer.module.scssimport 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;@mixin scrollbar { &::-webkit-scrollbar { width: 6px; background: transparent; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: var(–uikit-color-gray-3); border-radius: 3px; border: 2px solid transparent; background-clip: padding-box; &:hover { background: var(–uikit-color-gray-3); } }}.livePlayer { display: flex; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; @include scrollbar;}.livePlayer__liveDialog { text-align: center;}

五、下一步

接入直播视频组件后，你可能还想继续接入弹幕消息、礼物、观众列表等功能，可以参阅下表指引文档，继续接入这些功能。