livekit搭建与使用浏览器测试


一、准备环境

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

三、启动 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 测试步骤

  1. 打开两个浏览器标签页

  2. 在第一台电脑打开http://192.168.1.2:8080/test.html,填写token,点击按钮后能看到自己的视频就是对了。

  3. 允许摄像头 / 麦克风;

  4. 在第二台电脑谷歌浏览器中打开http://192.168.1.2:8080/test.html,链接后会报错,因为安全问题,这里需要一些设置,比较麻烦,具体参考 https://www.cnblogs.com/axingya/p/18517079 说的很详细。

  5. 设置好以后,重启浏览器,两端应该可以互相看到视频流。如果用同一个机器测试,由于摄像头只有一个,网页也会报错。

  6. 不要用手机测试,因为页面地址是本地的测试地址,考虑安全问题,一般都无法正确设置,所以也会报错而无法使用摄像头。

⚠️ 如果是本地 Windows + 同一个机器测试,多端要用不同身份的 token


七、注意事项

1️⃣ Windows 防火墙

  • 可能阻止 RTC 端口(默认 7880)

  • 需要允许 TCP/UDP 通过

2️⃣ NAT / 内网测试

  • 本地测试直接 127.0.0.1 或局域网 IP

  • 公网访问需要 TURN / STUN

3️⃣ Token

  • 上面示例 JWT 是临时测试

  • 生产环境请用 自己的 Server + JWT 签发

相关推荐
REDcker2 天前
WebCodecs VideoDecoder 的 hardwareAcceleration 使用
前端·音视频·实时音视频·直播·webcodecs·videodecoder
learndiary3 天前
Deepin国产系统搭建B站桌面直播环境要点
linux·直播·deepin·b站
西部秋虫19 天前
迷你视频会议系统(FlashMeeting)
opencv·ffmpeg·视频会议·回声抑制
不老刘20 天前
LiveKit 本地部署全流程指南(含 HTTPS/WSS)
golang·实时音视频·livekit
REDcker24 天前
RTSP 直播技术详解
linux·服务器·网络·音视频·实时音视频·直播·rtsp
zhuweisky1 个月前
实现鸿蒙(HarmonyOS)视频聊天、屏幕分享
harmonyos·鸿蒙·视频聊天·屏幕分享
yun68539921 个月前
音视频简单搭建livekit环境并初步认识
音视频·livekit
aqi001 个月前
FFmpeg开发笔记(九十九)基于Kotlin的国产开源播放器DKVideoPlayer
android·ffmpeg·kotlin·音视频·直播·流媒体
aqi002 个月前
FFmpeg开发笔记(九十八)基于FFmpeg的跨平台图形用户界面LosslessCut
android·ffmpeg·kotlin·音视频·直播·流媒体
aqi002 个月前
FFmpeg开发笔记(九十七)国产的开源视频剪辑工具AndroidVideoEditor
android·ffmpeg·音视频·直播·流媒体