66 lines
2.6 KiB
HTML
66 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<title>通话</title>
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #0f172a; color: #fff; font-family: sans-serif; overflow: hidden; }
|
|
#remote { width: 100%; height: 100%; object-fit: cover; background: #000; }
|
|
#local { position: absolute; right: 12px; bottom: 88px; width: 112px; height: 150px; object-fit: cover; border-radius: 8px; background: #111; border: 1px solid rgba(255,255,255,.2); }
|
|
#hint { position: absolute; left: 16px; top: 16px; font-size: 14px; }
|
|
#err { position: absolute; left: 16px; right: 16px; top: 48%; text-align: center; color: #fecaca; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<video id="remote" autoplay playsinline></video>
|
|
<video id="local" autoplay muted playsinline></video>
|
|
<div id="hint">正在连接 LiveKit…</div>
|
|
<div id="err"></div>
|
|
<script src="https://cdn.jsdelivr.net/npm/livekit-client@2.15.4/dist/livekit-client.umd.js"></script>
|
|
<script>
|
|
const q = new URLSearchParams(location.search)
|
|
const url = q.get('url') || ''
|
|
const token = q.get('token') || ''
|
|
const video = q.get('video') !== '0'
|
|
const hint = document.getElementById('hint')
|
|
const err = document.getElementById('err')
|
|
const remote = document.getElementById('remote')
|
|
const local = document.getElementById('local')
|
|
if (!video) local.style.display = 'none'
|
|
|
|
async function go() {
|
|
if (!url || !token) {
|
|
err.textContent = '缺少 LiveKit 地址或凭证'
|
|
return
|
|
}
|
|
const LK = window.LivekitClient || window.livekit
|
|
if (!LK || !LK.Room) {
|
|
err.textContent = 'LiveKit 脚本未加载'
|
|
return
|
|
}
|
|
const room = new LK.Room({ adaptiveStream: true, dynacast: true })
|
|
room.on(LK.RoomEvent.TrackSubscribed, (track) => {
|
|
if (track.kind === LK.Track.Kind.Video || track.kind === LK.Track.Kind.Audio) {
|
|
track.attach(remote)
|
|
}
|
|
})
|
|
room.on(LK.RoomEvent.Disconnected, () => { hint.textContent = '已断开' })
|
|
try {
|
|
await room.connect(url, token)
|
|
hint.textContent = '通话中'
|
|
await room.localParticipant.setMicrophoneEnabled(true)
|
|
if (video) {
|
|
await room.localParticipant.setCameraEnabled(true)
|
|
const pubs = Array.from(room.localParticipant.videoTrackPublications.values())
|
|
if (pubs[0] && pubs[0].track) pubs[0].track.attach(local)
|
|
}
|
|
} catch (e) {
|
|
err.textContent = (e && e.message) || String(e)
|
|
}
|
|
}
|
|
go()
|
|
</script>
|
|
</body>
|
|
</html>
|