<<<<<<< HEAD

trtc-simple-react

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

使用方式

推荐使用 cnpm install trtc-simple-react

import VideoForReact from "trtc-simple-react-plus-xx";
const Ipad = () => {
    // 监听页面错误
    listenerError()
    // 获取视频链接参数
    const videoParams = getContent(VIDEO_PARAMS);
    const videoRef = useRef(null);
    // 是否挂断
    const [isRingOff, setIsRingOff] = useState(false)
    // 1:前置，0：后置
    const [cameraMode, setCameraMode] = useState(1)

    useEffect(() => {
        // initVideo()
        Promise.all([initVideo(),scanCodePaymentData()])
        return () => {
            clear()
        }
    }, [])
    // 获取微信支付二维码
    const [QRCodeVO,setQRCodeVO]=useState({})
    /**
     * name,title,hospital,department,skill
     */
    const [DoctorVO,setDoctorVO]=useState({})
    const scanCodePaymentData = async () => {
        const res = await scanCodePaymentAPI({
            "consultationFee": 1,
            "description": "asd",
            "orderNo": "112",
            "patientId": 0
        })
        console.log("二维码=>",res)
        setQRCodeVO(res.data)
    }

    // 视频初始化
    const initVideo = () => {
        if (videoRef.current) {
            videoRef.current.handleJoin()
        }
    }

    // 清除数据
    const clear = () => {
        if (videoRef.current) {
            videoRef.current.handleLeave();
        }
        removeAllParams()
    }

    // 切换摄像头
    useEffect(() => {
        if (videoRef.current) {
            videoRef.current.switchCamera()
        }
    }, [cameraMode]);

    // 挂断视频
    useEffect(() => {
        if (isRingOff) {
            clear()
        }
    }, [isRingOff])


    return <>
        {
            !isRingOff && <div className={"box"}>
                <div className={"video"}>
                    <SimpleVideoReact
                        ref={videoRef}
                        config={{
                            roomId: videoParams.roomId,
                            sdkAppId: videoParams.sdkAppId,
                            userId: videoParams.userId,
                            userSig: videoParams.userSig,
                            showLocal: true,
                            showRemote: true,
                            showDevice: true,
                            showCamera: true,
                            showMic: false,
                        }}
                        customStyle={{
                            width: "864px",
                            height: "487px",
                            localStreamWidth: "864px",
                            localStreamHeight: "487px",
                            remoteStreamWidth: "160px",
                            remoteStreamHeight: "90px",
                            mode: "vertical-L",
                        }}
                        remoteStatus={(status) => console.log("remoteStatus", status)}
                        localStatus={(status) => console.log("localStatus", status)}
                        clientStatus={(status) => console.log("clientStatus", status)}
                        otherStatus={(status) => console.log("otherStatus", status)}
                    ></SimpleVideoReact>
                    {/*镜头翻转与挂断组件*/}
                    <div className="ring-off">
                        <RingOffAndFlipCamera
                            flipCameraFn={(e) => setCameraMode(e)}
                            ringOffFn={(e) => setIsRingOff(e)}
                        />
                    </div>
                    {/*二维码组件*/}
                    <div className={"qr-show"}>
                        <QRCode  QRCodeParams={QRCodeVO} />
                    </div>
                    {/*医生信息显示组件*/}
                    <div className={"doctor-show"}>
                        <DoctorInfo/>
                    </div>
                </div>
            </div>
        }</>


}
export default Ipad

export default VideoTest

import VideoForReact from "trtc-simple-react-plus-xx";

新版本目前支持二种页面pc,pad，例如：trtc-simple-react-plus-pc

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	和腾讯服务自动重连中

=======

video-react

介绍

腾讯视频通讯封装

软件架构

软件架构说明

安装教程

1. xxxx
2. xxxx
3. xxxx

使用说明

1. xxxx
2. xxxx
3. xxxx

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

fe0493ade0193c850c231b28ad5dc6fa94d1a7b9