一、准备环境
1️⃣ Windows 11 / 10(64 位) 2️⃣ 安装 Go
-
LiveKit Server 是 Go 写的
-
安装链接:https://go.dev/dl/
-
安装完成后检查:目前要求使用最新的 go版本
go version
3️⃣ Git(获取源码)
git --version
4️⃣ Chrome 或 Edge 浏览器(测试 WebRTC)
二、获取 LiveKit Server
1️⃣ 克隆官方仓库:
git clone https://github.com/livekit/livekit-server.git
cd livekit-server
2️⃣ 编译:
go build ./cmd/server
-
会生成可执行文件
server.exe(Windows 下) -
但是GIT里面的可能并不稳定,所以使用一个编译好的版本也不错
三、启动 LiveKit Server(最小配置)
在 livekit-server 目录下新建一个配置文件 livekit.yaml:
# livekit.yaml - 最小可运行配置
port: 7880
bind_addresses:
- ""
# 关键:这里配置你的 API Key 和 Secret
# "devkey" 就是你的 api_key,"secret" 就是你的 api_secret
keys:
devkey: secret
# 日志配置:设置为 debug 可以帮你捕捉到崩溃前的最后动作
logging:
level: debug
json: false
# RTC 配置:控制媒体传输
# 内部缓存和性能优化
room:
# 自动断开空房间的时间(秒)
empty_timeout: 300
# 限制单个房间的最大人数
max_participants: 50
然后在命令行运行:
server.exe --config livekit.yaml
你会看到类似:
LiveKit server starting...
RTC listening on :7880
API listening on :7881
✅ 说明 Server 已经启动成功
四、浏览器测试(最小 HTML)
1️⃣ 新建一个 test.html 文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>LiveKit 1v1 完整测试</title>
<script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; background: #f0f2f5; }
.controls { margin-bottom: 20px; background: white; padding: 15px; border-radius: 8px; }
#videos { display: flex; flex-wrap: wrap; gap: 20px; }
video { background: #000; border-radius: 8px; object-fit: cover; }
.video-container { position: relative; width: 320px; }
.label { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.local { border: 3px solid #52c41a; } /* 绿色代表自己 */
.remote { border: 3px solid #1890ff; } /* 蓝色代表对方 */
input { width: 400px; padding: 5px; margin-bottom: 5px; }
</style>
</head>
<body>
<h3>LiveKit 1v1 视频测试</h3>
<div class="controls">
<div>
地址: <input type="text" id="url" value="ws://192.168.1.2:7880"><br>
令牌: <input type="text" id="token" placeholder="粘贴你的 Token">
</div>
<button id="start" style="padding: 10px 20px; margin-top: 10px; cursor: pointer;">开始连接</button>
</div>
<div id="log" style="color: red; margin-bottom: 10px;"></div>
<div id="videos"></div>
<script>
const { Room, RoomEvent, Track } = LivekitClient;
document.getElementById("start").onclick = async () => {
const url = document.getElementById("url").value;
const token = document.getElementById("token").value;
const logEl = document.getElementById("log");
const videoContainer = document.getElementById("videos");
if (!token) {
alert("请先输入 Token!");
return;
}
logEl.textContent = "正在连接...";
try {
// 1. 创建房间对象
const room = new Room({
adaptiveStream: true,
dynacast: true,
});
// 2. 监听远端用户发布轨道 (Track)
room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
if (track.kind === Track.Kind.Video) {
renderVideo(track, participant.identity, false);
}
});
// 监听用户离开,移除对应的视频画面
room.on(RoomEvent.ParticipantDisconnected, (participant) => {
const el = document.getElementById(`container-${participant.identity}`);
if (el) el.remove();
});
// 3. 连接服务器
await room.connect(url, token);
logEl.textContent = "连接成功!正在启动摄像头...";
// 4. 开启本地摄像头和麦克风
await room.localParticipant.setCameraEnabled(true);
await room.localParticipant.setMicrophoneEnabled(true);
// 5. 显示本地预览画面
const localVideoPart = room.localParticipant.getTrackPublication(Track.Source.Camera);
if (localVideoPart && localVideoPart.videoTrack) {
renderVideo(localVideoPart.videoTrack, "自己", true);
}
logEl.style.color = "green";
logEl.textContent = "已就绪。请在另一个窗口使用不同的 Token 加入同一房间。";
} catch (err) {
console.error(err);
logEl.style.color = "red";
logEl.textContent = "错误: " + err.message;
}
};
/**
* 将视频轨道挂载到页面上
* @param track 视频轨道
* @param identity 用户标识
* @param isLocal 是否为本地视频
*/
function renderVideo(track, identity, isLocal) {
// 创建容器
const container = document.createElement("div");
container.id = `container-${identity}`;
container.className = "video-container";
// 创建视频元素并 attach
const videoEl = track.attach();
videoEl.width = 320;
videoEl.height = 240;
videoEl.className = isLocal ? "local" : "remote";
// 如果是本地视频,务必静音防止回音啸叫
if (isLocal) {
videoEl.muted = true;
}
// 添加标签
const label = document.createElement("div");
label.className = "label";
label.textContent = identity;
container.appendChild(label);
container.appendChild(videoEl);
document.getElementById("videos").appendChild(container);
}
</script>
</body>
</html>
这个页面得放到web服务器中,用你最熟悉的就可以了,
我选择使用python在网页当前目录启动一个服务,最简单不过:
python -m http.server 8080
这样就可以在浏览器中访问页面了。
http://192.168.1.2:8080/test.html
五、生成临时 JWT 测试 Token
1️⃣ 下载一个编译好的客户端,或者自己编译一个
https://github.com/livekit/livekit-cli
2️⃣ 生成测试 token:
:: 生成第一个 Token (user1)
lk token create --api-key devkey --api-secret secret --join --room my-first-room --identity user1 --valid-for 24h > token1.txt
-
输出就是第1个电脑上浏览器里用的
token -
再生成
user2的 token,进行 1v1 测试 -
写一个windows脚本gen.cmd
@echo off
echo 正在为 room: my-first-room 生成开发 Token...
:: 生成第一个 Token (user1)
lk token create --api-key devkey --api-secret secret --join --room my-first-room --identity user1 --valid-for 24h > token1.txt
echo User1 Token 已保存到 token1.txt
:: 生成第二个 Token (user2)
lk token create --api-key devkey --api-secret secret --join --room my-first-room --identity user2 --valid-for 24h > token2.txt
echo User2 Token 已保存到 token2.txt
pause
六、浏览器 1v1 测试步骤
-
打开两个浏览器标签页
-
在第一台电脑打开http://192.168.1.2:8080/test.html,填写token,点击按钮后能看到自己的视频就是对了。
-
允许摄像头 / 麦克风;
-
在第二台电脑谷歌浏览器中打开http://192.168.1.2:8080/test.html,链接后会报错,因为安全问题,这里需要一些设置,比较麻烦,具体参考 https://www.cnblogs.com/axingya/p/18517079 说的很详细。
-
设置好以后,重启浏览器,两端应该可以互相看到视频流。如果用同一个机器测试,由于摄像头只有一个,网页也会报错。
-
不要用手机测试,因为页面地址是本地的测试地址,考虑安全问题,一般都无法正确设置,所以也会报错而无法使用摄像头。
⚠️ 如果是本地 Windows + 同一个机器测试,多端要用不同身份的 token
七、注意事项
1️⃣ Windows 防火墙
-
可能阻止 RTC 端口(默认 7880)
-
需要允许 TCP/UDP 通过
2️⃣ NAT / 内网测试
-
本地测试直接 127.0.0.1 或局域网 IP
-
公网访问需要 TURN / STUN
3️⃣ Token
-
上面示例 JWT 是临时测试
-
生产环境请用 自己的 Server + JWT 签发