/**
* @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