linux 运行开源音视频livekit，实现html视频语音聊天。_网页播放器

环境：

idea：2022.3.3

spring boot：2.6.13

linux版本：centos 7.9

先附上官方本地安装文档：

步骤：

1、首先在linux里面安装运行livekit：

1.任意目录创建文件livekit,cd到livkit目录，然后在livekit目录下运行下面的命令。
2.安装服务
curl -ssl https://get.livekit.io | bash


3.先测试运行,8.218.***.**替换成你的ip,是云服务器就替换成公网ip，局域网就用局域网ip
livekit-server --dev --node-ip=8.218.***.** --bind 0.0.0.0

结束运行按键盘：ctrl+c

4.带配置文件运行
可以直接根据配置文件运行
livekit-server --config ./livekit.yaml --node-ip=8.218.***.** --bind 0.0.0.0
结束运行按键盘：ctrl+c

5.后台运行，在livekit目录创建run.sh文件，然后运行命令
sh run.sh

livekit.yaml文件的内容：

port: 7880
rtc:
    udp_port: 7882
    tcp_port: 7881
    use_external_ip: true
    enable_loopback_candidate: false
keys:
    apibxdwetqcjhaa: rlzfytylmdmogv2u6fsfabmhryqok9b4avwq48eie1aa
logging:
    json: false
    level: info

注意use_external_ip一定要设置true.这个是启用外部ip访问的。

然后就是keys:这个是创建token需要的，

前面的apibxdwetqcjhaa是apikey,

后面的rlzfytylmdmogv2u6fsfabmhryqok9b4avwq48eie1aa是secret。

再附上run.sh，这个是后台运行的：

#!/bin/sh

nohup livekit-server --config ./livekit.yaml > log.log 2>&1 &

测试是否运行成功。浏览器输入http://8.218.***.**:7880/，显示ok及代表运行成功。

2、创建token。

token是客户端访问livekit服务器所需要的凭证，里面包含了房间名称和用户id等信息。

我是用java创建token,还有其他方式创建token的办法，详见官方文档。

authentication | livekit docs

java创建token的方法：

首先导入maven包：


        <dependency>
            <groupid>io.livekit</groupid>
            <artifactid>livekit-server</artifactid>
            <version>0.5.9</version>
        </dependency>

然后随便创建一个main方法：

package com.example.demo1;

import io.livekit.server.*;

import java.util.arraylist;
import java.util.date;
import java.util.list;

public class livekittest {

    public static void main(string[] args) {
        system.out.println(createtoken(100));
        system.out.println(createtoken(101));
        system.out.println(createtoken(102));
        system.out.println(createtoken(103));
//        system.out.println(createtoken(96));
//        system.out.println(createtoken(98));
    }


    public static string createtoken(int num) {
//        用户id
        int userid = 10000+num;
//        用户名称
        string name = "用户"+num;
        string roomname = "测试房间2";
        string apikey = "apibxdwetqcjhaa";
        string apisecret = "rlzfytylmdmogv2u6fsfabmhryqok9b4avwq48eie1aa";
        accesstoken token = new accesstoken(apikey, apisecret);
        token.setname(name);
        token.setidentity(userid+"");
        token.setmetadata("metadata");
//        令牌的过期时间（可能）
        token.setexpiration(new date(system.currenttimemillis()+ 1000l *60*60*24*365));
//        token所拥有的权限
        list<string> list = new arraylist<>();
//        摄像头
        list.add("camera");
//        麦克风
        list.add("microphone");
//        list.add("screen_share"); //屏幕共享
//        list.add("screen_share_audio"); //屏幕共享音频
//        允许参与者发布相机，但不允许其他来源
        canpublishsources canpublishsources = new canpublishsources(list);
//        配置解释：https://docs.livekit.io/realtime/concepts/authentication/
//        roomjoin:加入房间许可   room：房间名称
        token.addgrants(new roomjoin(true), new room(roomname),canpublishsources);
        return token.tojwt();
    }
}

这里面的apikey和apisecret就是livekit.yam文件里面的。

运行main方法即可得出类似这样的token:

eyj0exaioijkv1qilcjhbgcioijiuzi1nij9.eyjzdwiioiixmdewmcisim1ldgfkyxrhijoibwv0ywrhdgeilcjpc3mioijbuelieerxzxrxy2pim2silcjuyw1lijoi55so5oi3mtawiiwidmlkzw8ionsicm9vbupvaw4ionrydwusinjvb20ioilmtyvor5xmil_pl7qyiiwiy2fuuhvibglzafnvdxjjzxmiolsiy2ftzxjhiiwibwljcm9wag9uzsjdfswizxhwijoxnzqxotqzotc1lcjqdgkioiixmdewmcj9.lkjljzb6qv96dxtxiupllujsvdilani7_ieqzzldbha

这样token就创建成功了。

3.测试运行

我这里使用的是html+js测试的。

其他客户端运行方式可以看官方文档：

client quickstarts | livekit docs

这里附上html源码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>livekit example</title>


</head>
<body>
<div id="videotestdiv"></div>
<div id="videodiv" style="width: 80%"></div>
<input type="text" id="tokeninput" value=""/>
<br/>
<button onclick="user1fun()" style="margin: 10px;">用户90</button>
<button onclick="user2fun()" style="margin: 10px;">用户92</button>
<button onclick="user3fun()" style="margin: 10px;">用户96</button>
<button onclick="user4fun()" style="margin: 10px;">用户98</button>
<br/>
<button onclick="connect()" style="margin: 10px;">视频链接</button>
<button onclick="connect()" style="margin: 10px;">语音链接</button>
<button onclick="ext()" style="margin: 10px;">登出</button>
<button onclick="openvideo()" style="margin: 10px;">打开摄像头</button>

<script src="livekit-client.umd.min.js"></script>
<script src="eruda.js"></script>

<script>

    // 手机上的调试插件
    eruda.init();
    const tokeninput = document.getelementbyid("tokeninput");
    // 获取页面的高度和宽度
    let pageheight = document.documentelement.clientheight;
    let pagewidth = document.documentelement.clientwidth;
    user1fun();
    // 检查是否支持webrtc和是否存在麦克风和摄像头
    // 如果手机上访问必须是https，不是则调用不了麦克风和摄像头
    // checkvideo();

    // const wsurl = "wss://gscs.yuming.com:7443"
    const wsurl = "ws://8.218.***.**:7880"
    const room = new livekitclient.room({
        // 自动管理订阅的视频质量
        adaptivestream: true,
        // 优化已发布曲目的发布带宽和cpu
        dynacast: true,
        // 默认捕获设置
        videocapturedefaults: {
            resolution: livekitclient.videopresets.h720.resolution,
        },
    });

    // 链接livekit
    async function connect() {
        let token = tokeninput.value;
        console.log(token);
        console.log(wsurl);
        if (token == "") {
            alert("请输入token");
            return;
        }
        // 预热连接，这可以在页面加载后立即调用
        // room.prepareconnection(wsurl, token);
        // 设置事件侦听器
        allhandle();
        // 链接
        await room.connect(wsurl, token);
        console.log('链接成功', room.roominfo);
        alert('链接成功');
        // 发布本地相机和麦克风曲目 下面可以单独开麦克风和相机
        // await room.localparticipant.enablecameraandmicrophone();
        const p = room.localparticipant;
        // 打开本地用户的相机和麦克风，这可能会触发浏览器提示
        // 以确保授予权限
        await p.setcameraenabled(true);
        await p.setmicrophoneenabled(true);
        // 开始共享用户的屏幕，这将触发浏览器提示选择
        // 要共享的屏幕。
        // await p.setscreenshareenabled(true);
    }

    // 所有监听事件
    function allhandle() {
        // 房间有人加入事件
        room.on(livekitclient.roomevent.participantconnected, function () {
            console.log("一个远程参与者 在本地参与者之后加入。");
        })
        room.on(livekitclient.roomevent.participantdisconnected, function () {
            console.log("远程参与者离开");
        })
        room.on(livekitclient.roomevent.reconnecting, function () {
            console.log("与服务器的连接已中断，它正在尝试重新连接。");
        })
        room.on(livekitclient.roomevent.reconnected, function () {
            console.log("重新连接已成功");
        })
        room.on(livekitclient.roomevent.disconnected, function () {
            console.log("由于房间关闭或无法恢复的故障而与房间断开连接");
        })
        room.on(livekitclient.roomevent.trackpublished, function () {
            console.log("本地参与者加入后，新曲目将发布到房间");
        })
        room.on(livekitclient.roomevent.trackunpublished, function () {
            console.log("远程参与者已取消发布轨道");
        })
        room.on(livekitclient.roomevent.trackmuted, function () {
            console.log("轨道被静音，本地轨道和远程轨道都会触发");
        })
        room.on(livekitclient.roomevent.trackunmuted, function () {
            console.log("轨道未静音，本地轨道和远程轨道都会触发");
        })
        room.on(livekitclient.roomevent.localtrackpublished, function () {
            console.log("本地曲目已成功发布");
        })
        room.on(livekitclient.roomevent.localtrackunpublished, function (track, publication, participant) {
            console.log("本地曲目未发布");
            publication.track.detach();
        })
        room.on(livekitclient.roomevent.activespeakerschanged, function () {
            console.log("当前活动的发言人已更改");
        })
        room.on(livekitclient.roomevent.isspeakingchanged, function () {
            console.log("当前参与者已更改发言状态");
        })
        // 参与者的连接质量已更改
        room.on(livekitclient.roomevent.connectionqualitychanged, function () {
            console.log("参与者的连接质量已更改");
        })
        room.on(livekitclient.roomevent.participantmetadatachanged, function () {
            console.log("通过服务器api更新了参与者的元数据");
        })
        room.on(livekitclient.roomevent.roommetadatachanged, function () {
            console.log("与房间相关联的元数据已更改");
        })
        room.on(livekitclient.roomevent.datareceived, function () {
            console.log("从另一个参与者或服务器接收的数据");
        })
        // 指示订阅的曲目是否因带宽而暂停
        room.on(livekitclient.roomevent.trackstreamstatechanged, function () {
            console.log("指示订阅的曲目是否因带宽原因而暂停");
        })
        room.on(livekitclient.roomevent.tracksubscriptionpermissionchanged, function () {
            console.log("订阅的曲目之一已更改当前参与者的曲目级别权限");
        })
        room.on(livekitclient.roomevent.participantpermissionschanged, function () {
            console.log("当前参与者的权限更改时");
        })

        // 有新成员加入是会访问这个方法
        room.on(livekitclient.roomevent.tracksubscribed, handletracksubscribed)
        // 曲目取消订阅
        room.on(livekitclient.roomevent.trackunsubscribed, function (track, publication, participant) {
            track.detach();
            let videodiv = document.getelementbyid("videodiv");
            videodiv.innerhtml="";
            console.log("有人退出了房间！")
        })
    }

    // 从服务器接收曲目始于订阅。有新成员加入是会访问这个方法
    function handletracksubscribed(track, publication, participant) {
        console.log("有人加入了房间！")
        // 将音轨附加到新的htmlvideoelement或htmlaudioelement
        const element = track.attach();
        let videodiv = document.getelementbyid("videodiv");
        videodiv.appendchild(element);
        let video = videodiv.queryselector("video");
        if (video) {
            video.style.width = pagewidth + "px";
            video.style.height = (pageheight - 200) + "px";
        }
        // 或附加到现有元素
        // track.attach(element)
    }

    // 退出登录
    function ext() {
        room.disconnect();
    }

    function user1fun() {
        // 我是90
        tokeninput.value = ""
    }

    function user2fun() {
        // 我是92
        tokeninput.value = ""
    }

    function user3fun() {
        // 我是96
        tokeninput.value = ""
    }

    function user4fun() {
        // 我是98
        tokeninput.value = ""
    }

    // 打开摄像头
    function openvideo() {
        let videotestdiv = document.getelementbyid("videotestdiv");
        // 创建一个新的 video 元素
        const videoelement = document.createelement('video');
        videoelement.style.width = pagewidth + "px";
        videoelement.style.height = (pageheight - 200) + "px";
        videoelement.setattribute('playsinline', '');
        videoelement.setattribute('autoplay', '');
        videotestdiv.appendchild(videoelement);
        navigator.mediadevices.getusermedia({video: true, audio: true}).then(function (stream) {
            console.log(stream);
            videoelement.srcobject = stream;
            // videotest.src = window.webkiturl.createobjecturl(stream);
        });
    }

    /**
     * 检查摄像头和麦克风是否可用
     */
    function checkvideo() {
        // 检查是否支持 getusermedia 方法
        if (navigator.mediadevices && navigator.mediadevices.getusermedia) {
            // 请求访问摄像头和麦克风
            navigator.mediadevices.getusermedia({video: true, audio: true})
                .then(function (stream) {
                    // 摄像头和麦克风设备可用
                    console.log('摄像头和麦克风可用');
                })
                .catch(function (error) {
                    // 摄像头和麦克风设备不可用
                    console.error('摄像头或麦克风不可用', error);
                });
        } else {
            alert('浏览器不支持webrtc');
        }
    }


</script>
</body>
</html>

js的官方地址：

https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js

我把官方地址复制下来本地使用的。

还有就是eruda.js，这个是可以在手机浏览器上调试的插件，我是下载下来本地使用的，

网上地址：https://cdn.jsdelivr.net/npm/eruda

这里的html需要修改wsurl的地址，也就是把ws://8.218.***.**:7880这个替换成你livekit的ip，

使用默认端口7880。

然后就是输入你创建的token即可链接livekit了。

如果使用的是ws+ip访问的，只能测试能不能链接成功，不能使用使用视频或者语音。

因为使用视频和语音需要调用麦克风和摄像头，调用摄像头这些则需要域名+ssl证书。

配置成wss的地址。也就是类似这样：wss://gscs.baidu.cn:7443。

申请ssl证书我是在腾讯云申请的，有域名就可以免费申请。

申请后我是用用nginx部署的证书，具体部署的方法这里就不详细说明了。

附上部分：

server {
        listen 7443 ssl; #监听的端口
        server_name gscs.****.fun;
        root html;
        index index.html index.htm;
        ssl_certificate cert/gscs.****.fun_bundle.pem;
        ssl_certificate_key cert/gscs.****.fun.key;
        #ssl会话超时时间
        ssl_session_timeout 5m;
        ssl_ciphers ecdhe-rsa-aes128-gcm-sha256:ecdhe:ecdh:aes:high:!null:!anull:!md5:!adh:!rc4;
        ssl_protocols tlsv1 tlsv1.1 tlsv1.2;
        ssl_prefer_server_ciphers on;

        location / {
            proxy_pass http://8.218.***.**:7880;
            proxy_set_header host $host:$server_port;
            proxy_http_version 1.1;
            proxy_set_header upgrade $http_upgrade;
            proxy_set_header connection "upgrade";
            proxy_set_header x-real-ip $remote_addr;
            proxy_set_header x-forwarded-for $remote_addr;
        }
    }

我这里是单独用7443这个端口作为证书的端口，因为其他地方已经用了443端口了，你也可以使用443，这样访问的时候就不需要单独加上端口。

部署好证书后访问https://gscs.****.fun:7443/，显示ok则代表ssl配置成功。

然后把html里面的wsurl替换成“wss://gscs.****.fun:7443”,即可访问摄像头和语音聊天。

最后附上链接后的网页：