保利威视频的手写react代码

/**

 * @author dingxiaoming

 * @date 2023/12/19 15:21

 */

import React from "react";

class ComponentDemo extends React.Component{

    constructor(props) {

        super(props);

        this.state ={

        }

    }

    componentDidMount() {

        const script = document.createElement('script');

        script.src = 'https://player.polyv.net/livesdk/polyv-live.min.js';

        script.async = true;

        script.onload = () => {

            this.myMethod();

        };

        document.body.appendChild(script);

    }

    myMethod = ()=>{

        const PolyvLiveSdk = window.PolyvLiveSdk;

        let liveSdk = null;

        let userId = "9fb81f6484";

        let userName = '测试-' + userId;

        let userPic = 'https://livestatic.videocc.net/assets/wimages/missing_face.png';

        let params = {

            appId: "fysqhc3r1g",

            channelId: "2449628",

            timestamp:1702971377950 ,

        };

        let sign = '33DD9E6006718EA7402E62F815C716F5';

        // 第三步：创建SDK实例

        liveSdk = new PolyvLiveSdk({

            channelId: params.channelId,

            sign: sign, // 频道验证签名

            timestamp: params.timestamp, // 毫秒级时间戳

            appId: params.appId, // polyv 后台的appId

            user: {

                userId: userId,

                userName: userName,

                pic: userPic,

            },

        });

        liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT,()=>{

            liveSdk.setupPlayer({

                el:'#player',

                pptEl:'#ppt',

                pptPlaceholder:true,

                switchPlayer:true,

                controllerPosition:'ppt',

                fixedController:true,

                type:'live',

                // vid:'9fb81f640423132943b32054b51f7f65_9',

                vodType:'vodType',

                pptNavBottom:'80px',

                barrage:false,

                defaultBarrangeStatus:true,

                autoPlay:true,

            })

        })

        liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE,()=>{

        })

    }

    render() {

        return (

            <div>

                <div id="ppt" className="ppt" ></div>

                <div id="player" className="player"></div>

            </div>

        );

    }

}

export default ComponentDemo