webRTC

webrtc 实现的 p2p 信道

rtc rtc rtc: 稳定, 多重连接 channel channel channel: 细流 part-server: 调谐, 从不同服务器请求资源分片 webrtc://用户@域名:端口/信道标识/资源ID

封包格式 资源ID 分片信息(位置) 分片数据

插件市场

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

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

    constructor(event) {
        // 初始化
    }

    // 各个时机被调用
}

聊天室

1. 每个设备保存全量聊天记录
2. 每个设备各自设定存储区间
3. 接入网络后向同频道设备同步区间内记录
4. 对方撤回的并不删除, 但不再分发
5. 阅后既焚开关, 全频道不保留也不分发记录
6. mark 标记的记录保留, 其它自动丢弃

音乐频道

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

猫窝

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

• P2P通信

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

• 音乐播放

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

• 下载加速

• 即时通讯

• 画廊

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

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

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

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

• 五色

• 单向链

• 固定填位(矩阵)

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

备用代码片段

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