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 签发

相关推荐
yun68539921 天前
音视频简单搭建livekit环境并初步认识
音视频·livekit
aqi009 天前
FFmpeg开发笔记(九十九)基于Kotlin的国产开源播放器DKVideoPlayer
android·ffmpeg·kotlin·音视频·直播·流媒体
aqi0015 天前
FFmpeg开发笔记(九十八)基于FFmpeg的跨平台图形用户界面LosslessCut
android·ffmpeg·kotlin·音视频·直播·流媒体
aqi0016 天前
FFmpeg开发笔记(九十七)国产的开源视频剪辑工具AndroidVideoEditor
android·ffmpeg·音视频·直播·流媒体
aqi0017 天前
FFmpeg开发笔记(一百)国产的Android开源视频压缩工具VideoSlimmer
android·ffmpeg·音视频·直播·流媒体
haibindev18 天前
【终极踩坑指南】Windows 10上MsQuic证书加载失败?坑不在证书,而在Schannel!
直播·http3·quic·流媒体
aqi001 个月前
FFmpeg开发笔记(九十五)国产的开源视频美颜工具VideoEditorForAndroid
android·ffmpeg·音视频·直播·流媒体
sno_guo1 个月前
直播抠图技术100谈之17----相机帧率和直播帧率如何定?
直播·内容运营·抠图·直播运营·直播伴侣
sno_guo1 个月前
直播抠图技术100谈之16----绿幕抠图中如何选择背景绿布
直播·抠图·抖音直播·直播卖货·obs抠图·直播 伴侣·绿幕直播间