webRTC

webrtc 实现的 p2p 信道

# 使用 git 克隆到本地或者直接下载zip压缩包
git clone git@git.satori.love:LaniakeaSupercluster/webrtc.git
cd webrtc

# 安装依赖
npm i

# 编译
npm run build

# 运行服务
npm run start

# 或者使用 pm2 作为守护进程
pm2 start npm --name webrtc -- run start

插件市场

1. 从浏览器创建插件(单文件)
2. 将插件发布到市场
3. 标准接口

export default class 插件名 {
    name: '插件别名',
    description: '插件描述..',

    constructor(event) {
        // 初始化
    }

    // 各个时机被调用
}

聊天室

• 每个设备保存全量聊天记录
• 每个设备各自设定存储区间
• 接入网络后向同频道设备同步区间内记录
• 对方撤回的并不删除, 但不再分发
• 阅后既焚开关, 全频道不保留也不分发记录
• mark 标记的记录保留, 其它自动丢弃
• 非活跃状态下提示音

音乐频道

• 每个设备存储自己的列表
• 可以缓存对方的列表
• 使用md5验证完整性
• 可以上传lrc
• 可以上传封面, 可以从数据中解析封面
• ban表匹配时不播放且收起隐藏, 支持正则ban表

传递资源

1. 每个节点都公开持有的资源列表, 和连接的节点列表
2. 每当资源变动时告知所有连接的节点
3. 与节点创建多个RTC时, 不发送多份, 以ID为准, id随机生成给不同机器, 无法通过ID锁定其它机器
4. 通过WS交换信息时, ID是否固定? 向WS提供连接?

• P2P通信

  • 分离出主要功能, 作为库或桁架使用
  • 静态资源服务模式(音乐,图像,视频,文本,各种,即时聊天)
  • 集群分发

• 音乐播放

  • 请求到单个目标防止接收到重复分片数据
    • 主机记录各自曲目列表以供查询
  • 播放时高亮显示
  • 合并操作按钮
  • 响应列表时不再广播
  • 对方退出时清除其列表
  • 稳定通信
  • 分片请求时立即播放
  • 上锁防止连续重复加载同一个造成分片混乱
  • 使用单独的状态标识音乐是否缓存
  • 取消本地存储时不直接移除列表
  • 分片下载过程与播放控制分离
  • 分片播放时支持wav
  • 分片播放时支持flac
  • 取消本地存储时检查是否移除(其它成员可能有同一曲)
  • 成员列表刷新时播放被重置BUG
  • 削弱刷新带来的影响

• 下载加速

• 即时通讯

• 画廊

• 能获取所有在线设备列表

• 随机连接至四个设备, 且按效率扩展收缩

• 将数据拆解同时向多台设备分发, 对端接收后再次分发

• 需要确保全部设备获得全部数据, 每台设备至少一半不重复

• 五色

• 单向链

• 固定填位(矩阵)

[a1, b1, c1, d1, e1]
        [a2, b2, c2, d2, e2]
                [a3, b3, c3, d3, e3]

依赖文档

• https://www.npmjs.com/package/idb-keyval
• https://www.npmjs.com/package/express
• https://www.npmjs.com/package/express-ws
• https://www.npmjs.com/package/node-turn
• https://www.npmjs.com/package/vite

备用代码片段

// jsmediatags 似乎支持的格式较少, 但不会产生错误警告
//import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js'
//list.forEach(async item => {
//  const blob = new Blob([item.arrayBuffer], { type: item.type })
//  jsmediatags.read(blob, {
//    onSuccess: function (tag) {
//      console.log(tag)
//      console.log(tag.tags.title)
//    },
//    onError: function (error) {
//      console.log(error);
//    }
//  })
//})

    <script type="module">

        // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
        const music = async function () {
            const clients = [] // 客户端列表

            // 对端设备
            const ul = document.createElement('ul')
            document.body.appendChild(ul)
            const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
            const host = window.location.host
            const ws = new WebSocket(`${protocol}://${host}/webrtc/music`)
            const pc = new RTCPeerConnection()

            var audioSource = null
            // 监听音乐列表播放事件
            musicList.on('play', async item => {
                audioSource?.stop() // 先停止可能在播放的音乐
                console.log('播放音乐', item.arrayBuffer)
                // 复制一份 item.arrayBuffer
                const arrayBuffer = item.arrayBuffer.slice(0)
                // 传输音乐文件向远程端
                const audioContext = new AudioContext()
                audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
                    // 将音乐流添加到 RTCPeerConnection
                    const mediaStreamDestination = audioContext.createMediaStreamDestination()
                    mediaStreamDestination.stream.getAudioTracks().forEach(function (track) {
                        pc.addTrack(track, mediaStreamDestination.stream)
                    })
                    // 播放音乐(远程)
                    audioSource = audioContext.createBufferSource()
                    audioSource.buffer = audioBuffer
                    audioSource.connect(mediaStreamDestination)
                    audioSource.start()
                    // 创建SDP offer并将其设置为本地描述, 发送给指定的远程端
                    const id = clients[0].id
                    await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
                    ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
                })
            })
            // 监听音乐列表停止事件
            musicList.on('stop', async () => {
                audioSource?.stop()
                audioSource = null
            })
            // 监听 ICE 候选事件
            pc.onicecandidate = event => {
                if (event.candidate) {
                    const id = clients[0].id
                    ws.send(JSON.stringify({ id, candidate: event.candidate }))  // 发送 ICE 候选到远程终端
                }
            }
            // 监听远程流事件
            pc.ontrack = function (event) {
                console.log('pc ontrack:', event)
                const audio = document.createElement('audio')
                audio.srcObject = event.streams[0]
                audio.play()
            }
            ws.onmessage = async (event) => {
                const data = JSON.parse(event.data)
                if (data.type === 'push') {
                    console.log('收到 type:push 将设备增加', data.id)
                    clients.push({ id: data.id, channel: data.channel })
                    const li = document.createElement('li')
                    li.innerText = `id:${data.id} channel:${data.channel}`
                    li.id = data.id
                    li.onclick = async () => {
                        console.log('点击设备', data.id)
                        // 清理所有选中状态
                        clients.forEach(client => {
                            const li = document.getElementById(client.id)
                            if (data.id === client.id) {
                                li.style.backgroundColor = 'red'
                                console.log('设置选中状态', data.id)
                                return
                            }
                            li.style.backgroundColor = 'transparent'
                            console.log('清理选中状态', client.id)
                        })
                    }
                    ul.appendChild(li)
                    return
                }
                if (data.type === 'pull') {
                    console.log('收到 type:pull 将设备删除', data.id)
                    const index = clients.findIndex(client => client.id === data.id)
                    if (index !== -1) {
                        clients.splice(index, 1)
                        const li = document.getElementById(data.id)
                        li.remove()
                    }
                    return
                }
                if (data.type === 'error') {
                    console.log('收到 type:error 没什么可操作的', data.id)
                    return
                }
                if (data.offer) {
                    const id = clients[0].id
                    console.log('收到 offer 并将其设置为远程描述', data.offer)
                    await pc.setRemoteDescription(new RTCSessionDescription(data.offer)) // 设置远程描述为 offer
                    await pc.setLocalDescription(await pc.createAnswer())                // 设置本地描述为 answer
                    ws.send(JSON.stringify({ id, answer: pc.localDescription }))         // 发送给远程终端 answer
                    return
                }
                if (data.answer) {
                    console.log('收到 answer 并将其设置为远程描述', data.answer)
                    await pc.setRemoteDescription(new RTCSessionDescription(data.answer))
                    return
                }
                if (data.candidate) {
                    console.log('收到 candidate 并将其添加到远程端', data.candidate)
                    await pc.addIceCandidate(new RTCIceCandidate(data.candidate))
                    return
                }
            }
        }
        //music()
    </script>
    <script type="module">
        // 创建 RTCPeerConnection
        const pc = new RTCPeerConnection()
        // webSocket 连接服务器
        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
        const host = window.location.host
        const ws = new WebSocket(`${protocol}://${host}/webrtc/default`)
        ws.onopen = function () {
            console.log('video ws open')
        }
        ws.onmessage = function (event) {
            const data = JSON.parse(event.data)
            console.log('ws message:', data)
            if (data.offer) {
                console.log('收到 offer 并将其设置为远程描述')
                pc.setRemoteDescription(new RTCSessionDescription(data.offer))
                // 创建SDP answer并将其设置为本地描述, 发送给远程端
                pc.createAnswer().then(function (answer) {
                    pc.setLocalDescription(answer)
                    ws.send(JSON.stringify({ answer }))
                })
                return
            }
            if (data.answer) {
                console.log('收到 answer 并将其设置为远程描述')
                pc.setRemoteDescription(new RTCSessionDescription(data.answer))
                return
            }
            if (data.candidate) {
                console.log('收到 candidate 并将其添加到远程端')
                pc.addIceCandidate(new RTCIceCandidate(data.candidate))
            }
        }
        ws.onclose = function () {
            console.log('ws close')
        }

        setTimeout(() => {

            // 获取本地视频流
            navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(stream => {
                // 创建本地视频元素
                const localVideo = document.createElement('video')
                localVideo.srcObject = stream
                localVideo.autoplay = true
                localVideo.muted = true
                document.body.appendChild(localVideo)

                // 添加本地视频流到 RTCPeerConnection
                stream.getTracks().forEach(function (track) {
                    pc.addTrack(track, stream)
                })

                // 监听 ICE candidate 事件
                pc.onicecandidate = function (event) {
                    if (event.candidate) {
                        // 发送 ICE candidate 到远程端
                        ws.send(JSON.stringify({ candidate: event.candidate }))
                    }
                }

                // 监听远程视频流事件
                pc.ontrack = function (event) {
                    // 创建远程视频元素
                    var remoteVideo = document.createElement('video')
                    remoteVideo.srcObject = event.streams[0]
                    remoteVideo.autoplay = true
                    document.body.appendChild(remoteVideo)
                }

                // 创建SDP offer并将其设置为本地描述, 发送给远程端
                pc.createOffer().then(function (offer) {
                    pc.setLocalDescription(offer)
                    ws.send(JSON.stringify({ offer }))
                })

            }).catch(error => {
                console.log(error)
            })

        }, 1000)
    </script>