LaniakeaSupercluster
/
webrtc
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
webrtc/public/index.html

248 lines
11 KiB
HTML
Raw Normal View History

init
2023-09-27 14:26:12 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webRTC</title>
</head>
<body>
<div>
<h1>webRTC</h1>
分片传输数据
2023-09-30 16:19:33 +08:00
<p>选择音乐使频道内所有设备同步播放 chrome://webrtc-internals/</p>
init
2023-09-27 14:26:12 +08:00
</div>
<script type="module">
indexedDB 缓存
2023-09-28 01:14:49 +08:00
import IndexedDB from './database.js'
UI 解耦
2023-09-28 15:20:02 +08:00
import MusicList from './music.js'
对端通信
2023-09-28 23:49:26 +08:00
import ClientList from './client.js'
传递列表
2023-09-29 17:31:37 +08:00
减半缓冲区
2023-10-02 20:29:50 +08:00
// 缓冲分片发送
降低延迟
2023-10-03 00:17:03 +08:00
const CHUNK_SIZE = 1024 * 64 // 默认每个块的大小为128KB
const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
const DELAY = 50 // 默认延迟500ms
减半缓冲区
2023-10-02 20:29:50 +08:00
// 将两个ArrayBuffer合并成一个
function appendBuffer(buffer1, buffer2) {
const tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
tmp.set(new Uint8Array(buffer1), 0)
tmp.set(new Uint8Array(buffer2), buffer1.byteLength)
return tmp.buffer
}
事件传递分离
2023-09-29 21:21:26 +08:00
// 读取本地音乐列表(本地缓存)
重构
2023-10-02 00:30:47 +08:00
const database = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
await database.open()
const list = await database.getAll()
存储分离
2023-09-29 20:20:00 +08:00
支持自定义名字
2023-09-30 22:45:01 +08:00
// 读取本地用户名(本地缓存)
重构
2023-10-02 00:30:47 +08:00
const name = localStorage.getItem('username') ?? '游客'
// 初始化客户端列表
减半缓冲区
2023-10-02 20:29:50 +08:00
const clientList = new ClientList({
name,
onexit: async client => {
console.log(client.name, '离开频道', client)
// 从列表中移除未缓存的此用户的音乐, 但可能多人都有此音乐且未缓存
// 因此每条音乐都要检查是否有其他用户也有此音乐, 如果有则不移除
用户离开时从移除其音乐
2023-10-03 00:28:02 +08:00
const 此用户音乐 = client.musicList.map(item => item.id)
DEBUG: 用户离开时仅检查此用户列表
2023-10-03 01:36:17 +08:00
const 无数据音乐 = musicList.list.filter(item => !item.arrayBuffer).filter(item => {
return 此用户音乐.includes(item.id)
})
用户离开时从移除其音乐
2023-10-03 00:28:02 +08:00
无数据音乐.forEach(item => {
const client = clientList.clientlist.find(client => {
return client.musicList.find(x => x.id === item.id)
})
清理日志
2023-10-03 01:40:14 +08:00
if (!client) musicList.remove(item)
用户离开时从移除其音乐
2023-10-03 00:28:02 +08:00
})
减半缓冲区
2023-10-02 20:29:50 +08:00
}
})
支持自定义名字
2023-09-30 22:45:01 +08:00
事件传递分离
2023-09-29 21:21:26 +08:00
// 初始化音乐列表(加入本地缓存)
重构
2023-10-02 00:30:47 +08:00
const musicList = new MusicList({
list,
onplay: item => {
console.log('播放音乐', item.name)
},
onstop: item => {
高亮正在播放的
2023-10-02 06:44:37 +08:00
console.log('停止音乐', item?.name)
重构
2023-10-02 00:30:47 +08:00
},
like 时推送列表
2023-10-02 05:38:44 +08:00
onlike: (item, list) => {
清理日志
2023-10-03 01:40:14 +08:00
console.log('喜欢音乐', item.name)
重构
2023-10-02 00:30:47 +08:00
if (item.arrayBuffer) {
database.add(item)
like 时推送列表
2023-10-02 05:38:44 +08:00
clientList.send('base', JSON.stringify({
type: 'set_music_list',
list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
}))
重构
2023-10-02 00:30:47 +08:00
}
},
like 时推送列表
2023-10-02 05:38:44 +08:00
onunlike: (item, list) => {
清理日志
2023-10-03 01:40:14 +08:00
console.log('取消喜欢', item.name)
like 时推送列表
2023-10-02 05:38:44 +08:00
if (item.arrayBuffer) {
database.delete(item.id)
clientList.send('base', JSON.stringify({
type: 'set_music_list',
list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
}))
}
重构
2023-10-02 00:30:47 +08:00
},
onban: item => {
清理日志
2023-10-03 01:40:14 +08:00
console.log('禁止音乐', item.name)
重构
2023-10-02 00:30:47 +08:00
},
onunban: item => {
清理日志
2023-10-03 01:40:14 +08:00
console.log('解禁音乐', item.name)
重构
2023-10-02 00:30:47 +08:00
},
onremove: item => {
清理日志
2023-10-03 01:40:14 +08:00
console.log('移除音乐', item.name)
重构
2023-10-02 00:30:47 +08:00
database.delete(item.id)
},
onadd: (item, list) => {
console.log('添加音乐', item.name)
},
onupdate: item => {
清理日志
2023-10-03 01:40:14 +08:00
console.log('更新音乐', item.name)
重构
2023-10-02 00:30:47 +08:00
database.put(item)
},
onerror: error => {
console.log('音乐列表错误', error)
},
分片请求时立即播放
2023-10-03 11:23:20 +08:00
onload: async (item, sourceBuffer) => {
重构
2023-10-02 00:30:47 +08:00
console.log('加载音乐', item)
return await new Promise((resolve) => {
分片请求时立即播放
2023-10-03 11:23:20 +08:00
var buffer = new ArrayBuffer(0) // 接收音乐数据
var count = 0 // 接收分片计数
var bufferCursor = 0 // 加载进度
var partlength = 1024 * 64 // 每次加载1MB
// 指针达到音乐数据大小则结束加载
const mediaLoader = async () => {
while (bufferCursor !== item.size) {
if (musicList.audio.paused && musicList.audio.src === '') {
console.log('音乐数据加载中, 但是音频已经停止播放')
break
}
const 当前播放进度 = musicList.audio.currentTime
const 当前结束时间 = sourceBuffer.buffered.length && sourceBuffer.buffered.end(0)
const 剩余数据长度 = buffer.byteLength - bufferCursor
const 本次加载长度 = Math.min(partlength, 剩余数据长度)
const 缓冲时间 = 当前结束时间 - 当前播放进度
if (buffer.byteLength > bufferCursor && !sourceBuffer.updating && 缓冲时间 < 60) {
sourceBuffer.appendBuffer(buffer.slice(bufferCursor, bufferCursor + 本次加载长度))
bufferCursor += 本次加载长度
}
await new Promise((resolve) => setTimeout(resolve, 1000))
}
}
mediaLoader()
重构
2023-10-02 00:30:47 +08:00
clientList.setChannel(`music-data-${item.id}`, {
onmessage: async (event, client) => {
恢复原状Ors
2023-10-03 05:47:43 +08:00
console.log('收到音乐数据 chunk', count, buffer.byteLength)
分片请求时立即播放
2023-10-03 11:23:20 +08:00
buffer = appendBuffer(buffer, event.data)
重构
2023-10-02 00:30:47 +08:00
count++
if (buffer.byteLength >= item.size) {
console.log('音乐数据接收完毕')
item.arrayBuffer = buffer
event.target.close() // 关闭信道
resolve(item)
}
awa 可以了
2023-09-30 17:35:38 +08:00
}
重构
2023-10-02 00:30:47 +08:00
})
请求到单个目标防止接收到重复分片数据
2023-10-02 04:32:31 +08:00
const client = clientList.clientlist.find(client => {
return client.musicList.find(x => x.id === item.id)
})
DEBUG: 分片计算
2023-10-02 23:19:24 +08:00
console.log('向', client.name, '请求音乐数据')
DEBUG
2023-10-02 23:20:50 +08:00
const c = Math.ceil(item.size / CHUNK_SIZE)
console.log('需要接收', c, '个分片')
DEBUG: 分片计算
2023-10-02 23:19:24 +08:00
请求到单个目标防止接收到重复分片数据
2023-10-02 04:32:31 +08:00
clientList.sendto(client.id, 'base', JSON.stringify({
type: 'get_music_data', id: item.id, channel: `music-data-${item.id}`
}))
awa 可以了
2023-09-30 17:35:38 +08:00
})
DEBUG
2023-09-30 18:48:27 +08:00
}
存储本地
2023-09-30 18:45:19 +08:00
})
对端通信
2023-09-28 23:49:26 +08:00
分片传输数据
2023-09-30 16:19:33 +08:00
// 只有一个基本信道, 用于交换和调度信息
clientList.setChannel('base', {
事件传递分离
2023-09-29 21:21:26 +08:00
onopen: async event => {
控制台调试日志优化
2023-10-03 20:21:13 +08:00
console.group('')
修正回调函数执行顺序
2023-10-01 02:42:59 +08:00
console.log('打开信道', event.target.label)
分片传输数据
2023-09-30 16:19:33 +08:00
// 要求对方发送音乐列表
clientList.send('base', JSON.stringify({ type: 'get_music_list' }))
事件传递分离
2023-09-29 21:21:26 +08:00
},
数据编码解码
2023-09-30 00:13:30 +08:00
onmessage: async (event, client) => {
分片传输数据
2023-09-30 16:19:33 +08:00
const { type, id, channel, list } = JSON.parse(event.data)
if (type === 'get_music_list') {
发送列表时过滤没有数据的
2023-10-01 18:49:39 +08:00
const ms = musicList.list.filter(item => item.arrayBuffer)
console.log(client.name, '请求音乐列表:', ms)
响应列表时不再广播
2023-10-03 00:05:06 +08:00
clientList.sendto(client.id, 'base', JSON.stringify({
分片传输数据
2023-09-30 16:19:33 +08:00
type: 'set_music_list',
发送列表时过滤没有数据的
2023-10-01 18:49:39 +08:00
list: ms.map(({ id, name, size, type }) => ({ id, name, size, type }))
分片传输数据
2023-09-30 16:19:33 +08:00
}))
return
}
if (type === 'set_music_list') {
控制台整理, 修正用户名
2023-10-01 01:22:39 +08:00
console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
请求到单个目标防止接收到重复分片数据
2023-10-02 04:32:31 +08:00
console.log('将列表保存到本机记录:', client)
client.musicList = list
减半缓冲区
2023-10-02 20:29:50 +08:00
client.musicList.forEach(music => musicList.add(music))
分片传输数据
2023-09-30 16:19:33 +08:00
return
}
if (type === 'get_music_data') {
// 建立一个信道, 用于传输音乐数据(接收方已经准备好摘要信息)
DEBUG
2023-10-01 00:21:11 +08:00
console.log(client.name, '建立一个信道, 用于传输音乐数据', musicList.list)
分片传输数据
2023-09-30 16:19:33 +08:00
musicList.list.filter(item => item.id === id).forEach(item => {
const ch = client.webrtc.createDataChannel(channel, { reliable: true })
ch.onopen = async event => {
log
2023-10-03 22:03:04 +08:00
console.log(client.name, `打开 ${channel} 信道传输音乐数据`, item.name)
分片传输数据
2023-09-30 16:19:33 +08:00
// 将音乐数据分成多个小块，并逐个发送
async function sendChunk(dataChannel, data, index = 0, buffer = new ArrayBuffer(0)) {
while (index < data.byteLength) {
if (dataChannel.bufferedAmount <= THRESHOLD) {
const chunk = data.slice(index, index + CHUNK_SIZE)
dataChannel.send(chunk)
index += CHUNK_SIZE
buffer = appendBuffer(buffer, chunk)
}
await new Promise((resolve) => setTimeout(resolve, DELAY))
}
return buffer
}
await sendChunk(ch, item.arrayBuffer)
log
2023-10-03 22:03:04 +08:00
console.log(client.name, `获取 ${channel} 信道数据结束`, item.name)
主动关闭信道
2023-09-30 23:27:26 +08:00
ch.close() // 关闭信道
分片传输数据
2023-09-30 16:19:33 +08:00
}
})
return
}
console.log('未知类型:', type)
DEBUG
2023-10-03 01:12:46 +08:00
},
onclose: event => {
控制台调试日志优化
2023-10-03 20:21:13 +08:00
console.groupEnd('')
DEBUG
2023-10-03 01:12:46 +08:00
console.log('关闭信道', event.target.label)
},
onerror: error => {
控制台调试日志优化
2023-10-03 20:21:13 +08:00
console.groupEnd('')
DEBUG
2023-10-03 01:12:46 +08:00
console.log('信道错误', error)
传递列表
2023-09-29 17:31:37 +08:00
}
})
设置名字
2023-09-30 22:51:58 +08:00
// 延迟1500ms
//await new Promise((resolve) => setTimeout(resolve, 100))
// 设置自己的主机名
const nameInput = document.createElement('input')
nameInput.type = 'text'
nameInput.placeholder = '请设置你的名字'
nameInput.value = name
nameInput.onchange = event => {
localStorage.setItem('username', event.target.value)
window.location.reload() // 简单刷新页面
}
document.body.appendChild(nameInput)
数据编码解码
2023-09-30 00:13:30 +08:00
</script>
init
2023-09-27 14:26:12 +08:00
</body>
</html>