1.0.2 • Published 6 months ago
live-component-react v1.0.2
基于腾讯云直播二次开发的react组件
使用方式
1.安装
npm install live-component-react2.在index.html中引入sdk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.1.min.js" charset="utf-8"></script>
<div id="root"></div>
</body>
</html>3.使用
import React from 'react';
import "./app.css";
// import LiveComponentReact from "../pages/index.jsx";
import LiveComponentReact from "../../dist/index.js";
import {useRef, useState} from "react";
//直播地址，通过调取后端接获取
const pushUrl = "webrtc://208393.push.tlivecloud.com/abc/abc-1737527193016?txSecret=2a4594595a042a6d19e070b0a008da71&txTime=6791E119"
const Test = () => {
const [videoDevicesList, setVideoDeviceList] = useState(null)
const [audioDevicesList, setAudioDevicesList] = useState(null)
const ref = useRef(null);
/**
* @description 开始直播
*/
const startLive = () => {
ref.current.startLive()
}
/**
* @description 停止直播
*/
const stopLive = () => {
ref.current.stopLive()
}
/**
* @description 开启相机
*/
const startCamera = () => {
ref.current.startCamera()
}
/**
* @description 关闭相机
*/
const stopCamera = () => {
ref.current.stopCamera()
}
/**
* @description 开启麦克风
*/
const startMicrophone = () => {
ref.current.startMicrophone()
}
/**
* @description 关闭麦克风
*/
const stopMicrophone = () => {
ref.current.stopMicrophone()
}
/**
* @description 开始共享屏幕
*/
const startScreenCapture = () => {
ref.current.startScreenCapture()
}
/**
* @description 停止共享屏幕
*/
const stopScreenCapture = () => {
ref.current.stopScreenCapture()
}
/**
* @description 切换摄像头
*/
const switchCamera = (deviceId) => {
ref.current.switchCamera(deviceId)
}
/**
* @description 切换麦克风
*/
const switchMicrophone = (deviceId) => {
ref.current.switchMicrophone(deviceId)
}
const getDevicesList = async () => {
const getDevicesList_ = await ref.current.getDevicesList()
console.log("getDevicesListFU", getDevicesList_)
setVideoDeviceList(getDevicesList_.videoDevices)
setAudioDevicesList(getDevicesList_.audioDevices)
}
return (
<div>
<LiveComponentReact className={'app'} pushUrl={pushUrl} ref={ref}/>
{/*<LiveComponentReact pushUrl={pushUrl} ref={ref}/>*/}
<div className={'btn_group'}>
{/*<div >*/}
<button onClick={() => startLive()}>开始直播</button>
<button onClick={() => stopLive()}>关闭直播</button>
<button onClick={() => startCamera()}>打开相机</button>
<button onClick={() => stopCamera()}>关闭相机</button>
<button onClick={() => startMicrophone()}>打开麦克风</button>
<button onClick={() => stopMicrophone()}>关闭麦克风</button>
<button onClick={() => startScreenCapture()}>共享屏幕</button>
<button onClick={() => stopScreenCapture()}>停止共享屏幕</button>
<button onClick={() => getDevicesList()}>获取设备</button>
{videoDevicesList && videoDevicesList.map((item, index) => {
return (<button key={item.deviceId} onClick={(e) => switchCamera(item.deviceId)}>
切换摄像头 {index + 1}
</button>
);
})}
{
audioDevicesList && audioDevicesList.map((item, index) => {
return (
<button key={item.deviceId}
onClick={(e) => switchMicrophone(item.deviceId)}>切换麦克风 {index + 1}</button>
)
})
}
</div>
</div>
)
}
export default Test