// 用户侧
<iframe
    id="myIframe"
    src="https://open.xiling.baidu.com/cloud/realtime?token=自行填写&initMode=noAudio&cameraId=0
    frameBorder="0"
    allow="microphone;camera;midi;encrypted-media;autoplay;" // 可用权限
/>

/* eslint-disable @typescript-eslint/no-explicit-any */
// 参考文献 https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
import { useCallback, useEffect, useState } from 'react'
import {v4 as uuidV4} from 'uuid';
import DHIframe from '@bddh/starling-dhiframe';

import useAudioRender from './hook/useAudioRender';

import './App.css'

const dhIframe = new DHIframe('digital-human-iframe'); 

enum ReadyState {
  UNINSTANTIATED = -1,
  CONNECTING = 0,
  OPEN = 1,
  CLOSING = 2,
  CLOSED = 3,
}

// 可以有声播放则返回true,否则返回false
function checkPlayUnMute(): Promise<boolean> | boolean {
  if (typeof navigator.userActivation !== 'undefined' && typeof navigator.userActivation.hasBeenActive !== 'undefined') {
    return navigator.userActivation.hasBeenActive;
  }
  return new Promise((resolve) => {
    const audioElem: HTMLAudioElement = document.createElement('audio');
    audioElem.src = 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBAAAAABAAEAESsAACJWAAACABAAZGF0YQAAAAA=';
    audioElem.muted = false;

    const playPromise: Promise<void> | undefined = audioElem.play();

    if (playPromise !== undefined) {
      playPromise
        .then(() => {
          // 自动播放成功
          resolve(true);
        })
        .catch((error: Error) => {
          if (error.name === "NotAllowedError" || error.name === "AbortError") {
            // 自动播放被禁止或中止
            resolve(false);
          } else {
            // 其他错误
            resolve(false);
          }
        });
        audioElem.remove();
    } else {
      // 如果 play() 返回 undefined，可能是浏览器不支持 Promise 风格的 play()
      audioElem.remove();
      resolve(false);
    }
  });
}

function App() {
  // 实时视频流远端准备完毕，可以进行textRender等驱动指令的发送
  const [realTimeVideoReady, setRealTimeVideoReady] = useState(false);
  const [wsConnected, setWsConnected] = useState(false);
  // 浏览器限制导致的有声视频无法自动播放,所以这里进行静音后自动播放
  const [videoIsMuted, setVideoIsMuted] = useState(false);
  const [commandId] = useState(uuidV4());
  // 是否可以自动播放，检测完成状态
  const [checkOver, setCheckOver] = useState(false);
  // 超时即将消失tip
  const [showTimeoutTip, setShowTimeoutTip] = useState(false);
  // 数字人前置loading页面
  const [showLoadingPage, setShowLoadingPage] = useState(false);

  const {playAudio, playMultiAudio} = useAudioRender(dhIframe); // pcm格式音频播放

  const onMessage = useCallback((msg: any) => {
    if (msg.origin === 'https://open.xiling.baidu.com') {
      const {type, content} = msg.data;
      const {action, requestId} = content;
      switch (type) {
        case 'rtcState':
          if (content.action === 'remoteVideoConnected') {
            setRealTimeVideoReady(true);
          }
          if (content.action === 'localVideoMuted' && content.body) {
            setVideoIsMuted(true);
          }
          break;
        case 'wsState':
          if (content.readyState === ReadyState.OPEN) {
            setWsConnected(true);
          }
          else if (content.readyState === ReadyState.CLOSED || content.readyState === ReadyState.CLOSING) {
            setWsConnected(false);
          }
          break;
        case 'msg':
          if (requestId === commandId && action === 'RENDER_COMPLETED') {
            console.info(`数字人驱动完成, 驱动id为${requestId}`);
            const newCommandId = uuidV4();
            // 解开注释可以进行持续播报
            // setCommandId(newCommandId); 
            dhIframe.sendMessage({
              action: 'TEXT_RENDER',
              body: '我已经完成一次驱动，这是我说的第n句话',
              requestId: newCommandId
            });
          }
          else if (action === 'DISCONNECT_ALERT') {
            setShowTimeoutTip(true);
          }
          else if (action === 'TIMEOUT_EXIT') {
            const iframeDom = document.getElementById('digital-human-iframe');
            iframeDom?.remove();
          }
          break;
        default:
          break;
      }
    }
  }, [commandId]);

  // 播放开场白
  const playWelcome = () => {
    setVideoIsMuted(false);
    dhIframe.sendCommand({
      subType: 'muteAudio',
      subContent: false
    });
    dhIframe.sendMessage({
      action: 'TEXT_RENDER',
      body: '你好，这是我的开场白自我介绍，我是数字人',
      requestId: commandId
    });
  }

  // 打断数字人
  const handleInterrupt = () => {
    dhIframe.sendMessage({
      action: 'TEXT_RENDER',
      body: '<interrupt></interrupt>',
      requestId: commandId
    });
  }

  const goNextPage = () => {
    setShowLoadingPage(false);
    setVideoIsMuted(false);
  }

  useEffect(() => {
    const checkPlayUnMuteFun = async () => {
      const result = await checkPlayUnMute(); // 500ms左右
      setVideoIsMuted(!result);
      setCheckOver(true);
    }
    checkPlayUnMuteFun();
  }, [])

  useEffect(() => {
    if (realTimeVideoReady && wsConnected && checkOver && !videoIsMuted) {
      dhIframe.sendMessage({
        action: 'TEXT_RENDER',
        body: '这是我的开场白自我介绍，我是数字人',
        requestId: commandId
      });
  }
  }, [realTimeVideoReady, wsConnected, checkOver, videoIsMuted, commandId]);

  useEffect(() => {
    dhIframe.registerMessageReceived(onMessage);
    return () => {
      dhIframe.removeMessageReceived(onMessage);
    };
  }, [onMessage]);

  if (showLoadingPage) {
    return (
      <div onClick={goNextPage}>
        前置loading页，点击进入下个页面
      </div>
    )
  }


  return (
    <>
      {videoIsMuted && <div className="tip1" onClick={playWelcome}>取消静音，播报开场白</div>}
      {showTimeoutTip && <div className="tip2" onClick={playWelcome}>长时间无交互，数字人马上消失了，点我一下，进行交互</div>}
      <div className="button-wrapper">
        <button onClick={playWelcome}>文本播报</button>
        <button onClick={playAudio}>音频播报</button>
        <button onClick={playMultiAudio}>多段拼接音频播报</button>
        <button onClick={handleInterrupt}>打断播报</button>
      </div>
      <iframe
        id="digital-human-iframe"
        src="https://open.xiling.baidu.com/cloud/realtime?token=自行填写&initMode=noAudio&cameraId=自行填写&figureId=自行填写"
        width="450"
        height="800"
        allow="autoplay"
      >
      </iframe>
    </>
  )
}

export default App

// npm 方式：
npm i @bddh/starling-dhiframe
// yarn 方式
yarn add @bddh/starling-dhiframe

import DHIframe from '@bddh/starling-dhiframe';
// digital-human-iframe需要和 iframe 的 id 地址保持一致
const dhIframe = new DHIframe('digital-human-iframe'); 
// 使用方式
dhIframe.sendMessage({
  action: 'TEXT_RENDER',
  body: '你好，这是我的开场白自我介绍，我是数字人',
  requestId: commandId
});

const onMessage = msg => {
    console.log(msg.data);
    // {type, content} = msg.data;
};

// 增加监听
dhIframe.registerMessageReceived(onMessage);
// 移除监听
dhIframe.removeMessageReceived(onMessage);

enum ReadyState {
  UNINSTANTIATED = -1,
  CONNECTING = 0,
  OPEN = 1,
  CLOSING = 2,
  CLOSED = 3,
}

import {v4 as uuidV4} from 'uuid';
// data 格式类型
const jsonStr = {action: 'TEXT_RENDER', body: '你好', requestId: uuidV4()}; // requestId不加默认使用sdk自生成的id
// 发送消息
dhIframe.sendMessage({
  action: 'TEXT_RENDER',
  body: '你好，这是我的开场白自我介绍，我是数字人',
  requestId: commandId
});

// 驱使数字人视频静音指令
dhIframe.sendCommand({
    subType: 'muteAudio',
    subContent: mute // mute: true/false
});

// tts数据驱动数字人播报
dhIframe.sendAudioData({
  action: 'AUDIO_RENDER',
  body: base64String,
  requestId: uuidV4()
})

相关配置：
entry=true

按钮触发方法：
dhIframe.playVideo(true);

dhIframe.sendMessage({action: 'TEXT_RENDER', body: '<interrupt></interrupt>'});

<div className="iframe-wrapper">
<iframe
    id="digital-human-iframe"
    src="https://open.xiling.baidu.com/cloud/realtime?token=自行填写&initMode=noAudio&cameraId=自行填写&figureId=自行填写&resolutionWidth=1080&resolutionHeight=1920&mode=corp"
    allow="autoplay"
>
</div>
.iframe-wrapper {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
}

#digital-human-iframe {
    position: absolute;
    width: 140vw;
    height: 120vh;
    top: -20vh;
    left: -20vw;
}