动画直播组件接入

curl -X POST https://api.sports.csap.ai/api/v1/widget/token \
  -H "X-API-Key: $API_KEY" -H "Content-Type: application/json" \
  -d '{"config":"wgt_1a2b3c4d","origin":"https://www.example.com","ttl":7200}'
# → {"code":0,"data":{"token":"…","expires_at":1794240000,"embed_url":"/widget/anim?cfg=wgt_1a2b3c4d&token=…"}}

<iframe id="live-anim" style="width:100%;height:640px;border:0" allow="autoplay; fullscreen"
  src="https://api.sports.csap.ai/widget/anim?cfg=wgt_1a2b3c4d&match=auto&token=<令牌>"></iframe>
<script>
  // 组件告诉页面它需要多高
  addEventListener('message', (e) => {
    const f = document.getElementById('live-anim');
    if (e.source === f.contentWindow && e.data && e.data.type === 'anim-widget-size') f.style.height = e.data.height + 'px';
  });
</script>

<!-- App Key 可以放在页面源码里;只在白名单域名下能播 -->
<iframe src="https://api.sports.csap.ai/widget/embed?app_key=pk_3f9a…&match=4651805&view=3d"
        style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen"></iframe>

<!-- 脚本在它所在的位置建 iframe -->
<script src="https://api.sports.csap.ai/widget/embed.js" data-app-key="pk_3f9a…"
        data-match="4651805" data-view="2.5d" async></script>
<script>
  document.addEventListener('animwidget:goal', (e) => console.log('进球', e.detail.score));
  document.addEventListener('animwidget:end', (e) => console.log('完场', e.detail.score));
  document.addEventListener('animwidget:error', (e) => console.warn(e.detail.reason)); // 没能播放的原因
</script>

const crypto = require('crypto');
const secret = process.env.WIDGET_APP_SECRET;        // App Secret 只放服务端
const match = '4651805';
const exp = Math.floor(Date.now() / 1000) + 3600;    // 过期时间(Unix 秒),最长 7 天
const sig = crypto.createHmac('sha256', secret).update(match + ':' + exp).digest('hex');
// 把 exp 和 sig 写进页面:
// https://api.sports.csap.ai/widget/embed?app_key=pk_3f9a…&match=${match}&exp=${exp}&sig=${sig}