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>
|
2023-09-27 14:26:12 +08:00
|
|
|
</div>
|
|
|
|
|
<script type="module">
|
2023-09-28 01:14:49 +08:00
|
|
|
import IndexedDB from './database.js'
|
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-10-04 06:32:53 +08:00
|
|
|
// 读取本地音乐列表并标识为缓存状态(本地缓存)
|
2023-10-02 00:30:47 +08:00
|
|
|
const database = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
|
|
|
|
|
await database.open()
|
2023-10-04 06:32:53 +08:00
|
|
|
const list = (await database.getAll()).map(item => {
|
|
|
|
|
return { save: true, ...item }
|
|
|
|
|
})
|
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-05 03:22:05 +08:00
|
|
|
const avatar = localStorage.getItem('avatar') ?? '/favicon.ico'
|
2023-10-02 00:30:47 +08:00
|
|
|
|
|
|
|
|
// 初始化客户端列表
|
2023-10-02 20:29:50 +08:00
|
|
|
const clientList = new ClientList({
|
|
|
|
|
name,
|
|
|
|
|
onexit: async client => {
|
|
|
|
|
console.log(client.name, '离开频道', client)
|
|
|
|
|
// 从列表中移除未缓存的此用户的音乐, 但可能多人都有此音乐且未缓存
|
|
|
|
|
// 因此每条音乐都要检查是否有其他用户也有此音乐, 如果有则不移除
|
2023-10-05 03:22:05 +08:00
|
|
|
const 此用户音乐 = client.musicList?.map(item => item.id) || []
|
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
|
|
|
},
|
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) {
|
2023-10-04 06:59:24 +08:00
|
|
|
database.add(item)
|
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
|
|
|
}
|
|
|
|
|
},
|
2023-10-02 05:38:44 +08:00
|
|
|
onunlike: (item, list) => {
|
2023-10-03 01:40:14 +08:00
|
|
|
console.log('取消喜欢', item.name)
|
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-05 03:59:32 +08:00
|
|
|
console.info('禁止音乐', item.name)
|
2023-10-02 00:30:47 +08:00
|
|
|
},
|
|
|
|
|
onunban: item => {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.info('解禁音乐', item.name)
|
2023-10-02 00:30:47 +08:00
|
|
|
},
|
|
|
|
|
onremove: item => {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.info('移除音乐', item.name)
|
2023-10-02 00:30:47 +08:00
|
|
|
database.delete(item.id)
|
|
|
|
|
},
|
|
|
|
|
onadd: (item, list) => {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.info('添加音乐', item.name)
|
2023-10-02 00:30:47 +08:00
|
|
|
},
|
|
|
|
|
onupdate: item => {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.info('更新音乐', item.name)
|
2023-10-02 00:30:47 +08:00
|
|
|
database.put(item)
|
|
|
|
|
},
|
|
|
|
|
onerror: error => {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.error('音乐列表错误', error)
|
2023-10-02 00:30:47 +08:00
|
|
|
},
|
2023-10-04 10:16:21 +08:00
|
|
|
onload: async item => {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.info('加载音乐', item)
|
2023-10-02 00:30:47 +08:00
|
|
|
return await new Promise((resolve) => {
|
2023-10-03 11:23:20 +08:00
|
|
|
var buffer = new ArrayBuffer(0) // 接收音乐数据
|
|
|
|
|
var count = 0 // 接收分片计数
|
2023-10-04 12:29:01 +08:00
|
|
|
const chunkNumber = Math.ceil(item.size / 1024 / 64) // 64KB每片
|
2023-10-02 00:30:47 +08:00
|
|
|
clientList.setChannel(`music-data-${item.id}`, {
|
|
|
|
|
onmessage: async (event, client) => {
|
2023-10-04 12:51:28 +08:00
|
|
|
console.log('收到音乐数据 chunk', `${count + 1}/${chunkNumber}`, buffer.byteLength)
|
2023-10-04 10:16:21 +08:00
|
|
|
buffer = appendBuffer(buffer, event.data) // 合并分片准备存储
|
2023-10-04 12:51:28 +08:00
|
|
|
item.arrayBufferChunks?.push(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)
|
|
|
|
|
}
|
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)
|
|
|
|
|
})
|
2023-10-05 03:59:32 +08:00
|
|
|
console.info('向', client.name, '请求音乐数据')
|
2023-10-02 23:19:24 +08:00
|
|
|
|
2023-10-02 23:20:50 +08:00
|
|
|
const c = Math.ceil(item.size / CHUNK_SIZE)
|
|
|
|
|
console.log('需要接收', c, '个分片')
|
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}`
|
|
|
|
|
}))
|
2023-09-30 17:35:38 +08:00
|
|
|
})
|
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-05 03:59:32 +08:00
|
|
|
console.debug('打开信道', event.target.label, '广播请求音乐列表和身份信息')
|
|
|
|
|
clientList.send('base', JSON.stringify({ type: 'get_music_list' })) // 要求对方发送音乐列表
|
|
|
|
|
clientList.send('base', JSON.stringify({ type: 'get_user_profile' })) // 要求对方发送身份信息
|
2023-09-29 21:21:26 +08:00
|
|
|
},
|
2023-09-30 00:13:30 +08:00
|
|
|
onmessage: async (event, client) => {
|
2023-10-05 03:22:05 +08:00
|
|
|
const data = JSON.parse(event.data)
|
|
|
|
|
if (data.type === 'get_user_profile') {
|
|
|
|
|
console.log(client.name, '请求身份信息:', data)
|
2023-10-05 04:43:57 +08:00
|
|
|
// 包过大会导致发送失败, 因此需要分开发送
|
|
|
|
|
clientList.sendto(client.id, 'base', JSON.stringify({
|
|
|
|
|
type: 'set_user_profile',
|
|
|
|
|
name: name,
|
|
|
|
|
avatar: avatar,
|
|
|
|
|
}))
|
2023-10-05 03:22:05 +08:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (data.type === 'set_user_profile') {
|
|
|
|
|
console.log(client.name, '发来身份信息:', data)
|
|
|
|
|
console.log('将身份信息保存到本机记录:', client)
|
|
|
|
|
client.name = data.name
|
|
|
|
|
client.avatar = data.avatar
|
|
|
|
|
// 还需要更新组件的用户信息
|
|
|
|
|
console.log('更新组件的用户信息:', data, client)
|
|
|
|
|
clientList.setAvatar({ id:client.id, ...data })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (data.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
|
|
|
|
|
}
|
2023-10-05 03:22:05 +08:00
|
|
|
if (data.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-05 03:22:05 +08:00
|
|
|
client.musicList = data.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
|
|
|
|
|
}
|
2023-10-05 03:22:05 +08:00
|
|
|
if (data.type === 'get_music_data') {
|
2023-09-30 16:19:33 +08:00
|
|
|
// 建立一个信道, 用于传输音乐数据(接收方已经准备好摘要信息)
|
2023-10-01 00:21:11 +08:00
|
|
|
console.log(client.name, '建立一个信道, 用于传输音乐数据', musicList.list)
|
2023-10-05 03:22:05 +08:00
|
|
|
musicList.list.filter(item => item.id === data.id).forEach(item => {
|
|
|
|
|
const ch = client.webrtc.createDataChannel(data.channel, { reliable: true })
|
2023-09-30 16:19:33 +08:00
|
|
|
ch.onopen = async event => {
|
2023-10-05 03:22:05 +08:00
|
|
|
console.log(client.name, `打开 ${data.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)
|
2023-10-05 03:22:05 +08:00
|
|
|
console.log(client.name, `获取 ${data.channel} 信道数据结束`, item.name)
|
2023-09-30 23:27:26 +08:00
|
|
|
ch.close() // 关闭信道
|
2023-09-30 16:19:33 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
2023-10-05 03:22:05 +08:00
|
|
|
console.log('未知类型:', data.type)
|
2023-10-03 01:12:46 +08:00
|
|
|
},
|
|
|
|
|
onclose: event => {
|
|
|
|
|
console.log('关闭信道', event.target.label)
|
|
|
|
|
},
|
2023-10-05 03:59:32 +08:00
|
|
|
onerror: event => {
|
|
|
|
|
console.error('信道错误', event.target.label, event.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))
|
2023-10-05 12:25:55 +08:00
|
|
|
|
2023-09-30 22:51:58 +08:00
|
|
|
// 设置自己的主机名
|
|
|
|
|
const nameInput = document.createElement('input')
|
|
|
|
|
nameInput.type = 'text'
|
2023-10-05 12:25:55 +08:00
|
|
|
nameInput.placeholder = '请设置你的昵称'
|
2023-09-30 22:51:58 +08:00
|
|
|
nameInput.value = name
|
|
|
|
|
nameInput.onchange = event => {
|
|
|
|
|
localStorage.setItem('username', event.target.value)
|
|
|
|
|
window.location.reload() // 简单刷新页面
|
|
|
|
|
}
|
|
|
|
|
document.body.appendChild(nameInput)
|
2023-10-05 12:25:55 +08:00
|
|
|
|
|
|
|
|
if (localStorage.getItem('avatar')) {
|
|
|
|
|
const favicon = document.createElement('link')
|
|
|
|
|
favicon.rel = 'icon'
|
|
|
|
|
favicon.href = localStorage.getItem('avatar')
|
|
|
|
|
document.head.appendChild(favicon)
|
|
|
|
|
}
|
2023-09-30 00:13:30 +08:00
|
|
|
</script>
|
2023-09-27 14:26:12 +08:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
