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