基础连接
最简单的 WetRTC 双向音视频通话示例。
完整代码
ts
import { WetRTC, type SignalChannel } from '@wetspace/wetrtc'
// signal 实现见 signal-channel.ts
declare const signal: SignalChannel
const localVideo = document.querySelector<HTMLVideoElement>('#local')!
const remoteVideo = document.querySelector<HTMLVideoElement>('#remote')!
// ── 创建 WetRTC ──
const rtc = new WetRTC({
signal,
direction: 'sendrecv',
logLevel: 'info',
})
// ── 获取本地媒体 ──
const localStream = await rtc.media.getUserMedia({
video: { width: 1280, height: 720 },
audio: true,
})
localVideo.srcObject = localStream
for (const track of localStream.getTracks()) {
rtc.addTrack(track, localStream)
}
// ── 监听事件 ──
rtc.on('statechange', (state, prev) => {
console.log(`状态: ${prev} → ${state}`)
})
rtc.on('track', (ev) => {
remoteVideo.srcObject = ev.streams[0]
})
rtc.on('error', (err) => {
console.error(`[${err.code}] ${err.message}`)
})
// ── 发起连接 ──
await rtc.connect()
// await rtc.disconnect()
// rtc.dispose()HTML 模板
html
<!DOCTYPE html>
<html>
<head>
<title>WetRTC Demo</title>
<style>
.videos { display: flex; gap: 16px; }
video { width: 400px; height: 300px; background: #000; border-radius: 8px; }
</style>
</head>
<body>
<div class="videos">
<video id="local" autoplay muted playsinline></video>
<video id="remote" autoplay playsinline></video>
</div>
<button id="connect">连接</button>
<button id="disconnect">挂断</button>
<script type="module" src="./main.ts"></script>
</body>
</html>