trtc-simple-react

本插件基于腾讯云 TRTC 二次开发

使用方式

推荐使用 cnpm install trtc-simple-react

import VideoForReact from "trtc-simple-react";

class Video extends Component {
constructor(props) {
    super(props);
    this.video = null;
    this.init = (element) => {
            this.video = element;
        };
    }
componentDidMount() {
    this.video.handleJoin();//初始化视频
}
componentWillUnmount(){
		this.video.handleLeave();//关闭视频流
	}
handleWatchRemoteStatus(status) {
		console.log(status);
		}
	handleWatchLocalStatus(status) {
		console.log(status);
	}
	handleWatchClientStatus(status) {
		console.log(status);
	}
	handleWatchOtherStatus(status) {
		console.log(status);
	}
render() {
return (
    <VideoForReact
        ref={this.init}
        config={{
            roomId: "",
            sdkAppId: ,
            userId: "",
            userSig: "",
            showLocal: "",
            showRemote: "",
            showDevice: "",
        }}
        customStyle={{
            width: "",
            height: "",
            localStreamWidth: "",
            localStreamHeight: "",
            remoteStreamWidth:"",
            remoteStreamHeight: "",
            mode: "",
         }}
					remoteStatus={(status) => this.handleWatchRemoteStatus(status)}
						localStatus={(status) => this.handleWatchLocalStatus(status)}
						clientStatus={(status) => this.handleWatchClientStatus(status)}
						otherStatus={(status) => this.handleWatchOtherStatus(status)}
					  >
       </VideoForReact>
    );
    }
}

config 和 customStyle 参数说明

config={//必填
    roomId: "",//房间号，两端相同
    sdkAppId: ,//appid
    userId: "",//userid 两端不能相同
    userSig:"",//通过接口换取的身份密钥，
    showLocal: true, //是否显示自己视频
    showRemote: true, //是否显示对方视频
    showDevice: true, //是否显示设备切换按钮
		showCamera: true,//是否显示摄像头切换按钮 ，showDevice为true时有效 按钮位置相对于本地流底部10px
    showMic: true,//是否显示麦克风切换按钮，showDevice为true时有效 按钮位置相对于本地流底部10px
}
customStyle={
    width: "", //整个video的宽 单位px 默认300px
    height: "", //整个video的高单位px 默认300px
    localStreamWidth: "", //本地流宽度px 默认80px
    localStreamHeight: "", //本地流高度px 默认80px
    remoteStreamWidth: "", //远端流宽度px 默认300px
    remoteStreamHeight: "", //远端流高度px 默认300px
    mode: "", //around----常规   symmetry-L/symmetry-R  横向， vertical-L/vertical-R  上下  ，默认aroud
}
remoteStatus - localStatus- clientStatus - otherStatus 返回为obj 如下
	status=	{
			type:'local', //local,remote,other,client
			msg:'localStream-play-success'
		}
		//远端流状态-unpublish远端离开房间停止推流
	//error 当出现不可恢复错误后，会抛出此事件
	//client-banned 被动退出房间事件
	//join-fail 加入房间失败
	//localStream-play-success 本地流播放成功
	//localStream-failed-to-play 本地流播放失败
	//remoteStream-failed-to-play 远端流播放失败
	//remoteStream-play-success 远端流播放成功
	//getDevices fail  获取麦克风摄像头权限失败
	//NotFoundError 找不到满足请求参数的媒体类型（包括：音频、视频、屏幕分享）。例如：PC 没有摄像头，但是请求浏览器获取视频流，则会报此错误。
	//NotAllowedError  用户拒绝了当前的浏览器实例的访问音频、视频、屏幕分享请求。
	//NotReadableError 尽管用户已经授权使用相应的设备，但是由于操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
	//OverconstrainedError cameraId/microphoneId 参数的值无效
	//AbortError 由于某些未知原因导致设备无法被使用
	//connection-state-changed:DISCONNECTED	和腾讯服务连接断开
	//connection-state-changed:CONNECTING  	和腾讯服务正在连接中
	//connection-state-changed:CONNECTED	和腾讯服务已连接
	//connection-state-changed:RECONNECTING	和腾讯服务自动重连中