Web 互动直播组件（旧方案）

<div id="playerView" style="width:100%; height:auto;"></div>
<script>
    // 1、创建 Player（播放器）对象
    let player = TWebLive.createPlayer();
    
    // 2、设置渲染界面
    player.setRenderView({ elementID: 'playerView' });
    
    // 3、填入 flv hls 地址等信息，拉 CDN 流播放，此时 url 必须以 `https://` 开头
    // 或 填入 sdkappid roomid 等信息，拉 WebRTC 低延时流播放，此时 url 必须以 `room://` 开头
    let url = 'https://'
        + 'flv=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv' + '&' // 请替换成实际可用的播放地址
        + 'hls=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8' // 请替换成实际可用的播放地址
      
    // let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}`;
    player.startPlay(url).then(() => {
        console.log('player | startPlay | ok');
    }).catch((error) => {
        console.error('player | startPlay | failed', error);
    });
</script>


<script>
    // 1、创建 IM（即时通信）对象并监听事件
    let im = TWebLive.createIM({
        SDKAppID: 0 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
    });
    // 监听 IM_READY IM_TEXT_MESSAGE_RECEIVED 等事件
    let onIMReady = function(event) {
        im.sendTextMessage({ roomID: 'your roomID', text: 'hello from TWebLive' });
    };
    let onTextMessageReceived = function(event) {
        event.data.forEach(function(message) {
            console.log((message.from || message.nick) + ' : ', message.payload.text);
        });
    };
    // 接入侧监听此事件，然后可调用 SDK 发送消息等
    im.on(TWebLive.EVENT.IM_READY, onIMReady);
    // 收到文本消息，上屏
    im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
    
    // 2、登录
    im.login({userID: 'your userID', userSig: 'your userSig'}).then((imResponse) => {
        console.log(imResponse.data); // 登录成功
        if (imResponse.data.repeatLogin === true) {
            // 标识账号已登录，本次登录操作为重复登录
            console.log(imResponse.data.errorInfo);
        }
    }).catch((imError) => {
        console.warn('im | login | failed', imError); // 登录失败的相关信息
    });
    
    // 3、加入直播间
    im.enterRoom('your roomID').then((imResponse) => {
        switch (imResponse.data.status) {
            case TWebLive.TYPES.ENTER_ROOM_SUCCESS: // 加入直播间成功
                break;
            case TWebLive.TYPES.ALREADY_IN_ROOM: // 已经在直播间内
                break;
            default:
                break;
        }
    }).catch((imError) => {
        console.warn('im | enterRoom | failed', imError); // 加入直播间失败的相关信息
    });
</script>