LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

存储分离

Browse Source
This commit is contained in:
觉 2023-09-29 20:20:00 +08:00
parent 90377a0334
commit 549c5d0ec4
3 changed files with 62 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/client.js
View File

@ -2,6 +2,7 @@ import { List, ListItem } from './weigets.js'
export default class ClientList {
constructor({ channels = {}, EventListeners = {} }) {
this.channels = channels
this.EventListeners = EventListeners
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
const host = window.location.host
@ -16,19 +17,19 @@ export default class ClientList {
Object.entries(channels).forEach(([name, callback]) => {
const channel = webrtc.createDataChannel(name)
channel.onopen = event => {
console.log('datachannel 已打开', event)
//console.log('datachannel 已打开', event)
if (callback.onopen) callback.onopen(event, channel)
}
channel.onclose = event => {
console.log('datachannel 已关闭', event)
//console.log('datachannel 已关闭', event)
if (callback.onclose) callback.onclose(event, channel)
}
channel.onerror = event => {
console.log('datachannel 发生错误', event)
//console.log('datachannel 发生错误', event)
if (callback.onerror) callback.onerror(event, channel)
}
channel.onmessage = event => {
console.log('datachannel 收到数据', event)
//console.log('datachannel 收到数据', event)
if (callback.onmessage) callback.onmessage(event, channel)
}
})
@ -51,14 +52,14 @@ export default class ClientList {
}
}
webrtc.oniceconnectionstatechange = event => {
console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
//console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
}
return webrtc
}
if (data.type === 'list') {
console.log('取得在线对端列表:', data)
//console.log('取得在线对端列表:', data)
const webrtc = webrtc_init()
console.log('发送给对方 offer')
//console.log('发送给对方 offer')
const offer = await webrtc.createOffer()
await webrtc.setLocalDescription(offer)
this.clientlist.push({ id: data.id, name: data.name, webrtc })
@ -75,10 +76,10 @@ export default class ClientList {
return this.remove(data)
}
if (data.type === 'offer') {
console.log('收到对方 offer', data)
//console.log('收到对方 offer', data)
const webrtc = webrtc_init()
this.clientlist.push({ id: data.id, name: data.name, webrtc })
console.log('发送给对方 answer')
//console.log('发送给对方 answer')
await webrtc.setRemoteDescription(data.offer)
const answer = await webrtc.createAnswer()
await webrtc.setLocalDescription(answer)
@ -86,15 +87,16 @@ export default class ClientList {
return
}
if (data.type === 'answer') {
console.log('收到对方 answer', data)
//console.log('收到对方 answer', data)
const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.setRemoteDescription(data.answer)
return
}
if (data.type === 'candidate') {
// console.log('收到 candidate 并将其添加到远程端', data.candidate)
const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.addIceCandidate(data.candidate)
return console.log('收到 candidate 并将其添加到远程端', data.candidate)
return
}
console.log('收到未知数据:', data)
}

38
public/index.html
View File

@ -16,8 +16,13 @@
import MusicList from './music.js'
import ClientList from './client.js'
// 打开数据库
const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
await store.open()
const list = await store.getAll()
// 初始化音乐列表
const musicList = new MusicList()
const musicList = new MusicList({ list })
musicList.on('play', item => {
console.log('播放音乐', item)
})
@ -28,19 +33,46 @@
'musicList': {
onopen: async (event, channel) => {
const list = await musicList.list
console.log('musicList:', list)
channel.send(JSON.stringify(list))
console.log('发送 musicList:', list)
channel.send(JSON.stringify(list.map(({ arrayBuffer, ...data }) => data)))
},
onmessage: async (event, channel) => {
console.log('收到 musicList:', event)
JSON.parse(event.data).forEach(item => {
musicList.push(item)
})
}
},
'musicload': {
onopen: async (event, channel) => {
console.log('发送 musicload:', event)
},
onmessage: async (event, channel) => {
console.log('收到 musicload:', event)
}
}
}
})
// 延迟2秒执行
await new Promise(resolve => setTimeout(resolve, 2000))
// 设定被动传输
clientList.clientlist.forEach(client => {
console.log('client:', client)
client.webrtc.addEventListener('datachannel', event => {
console.log('收到 datachannel:', event)
event.channel.addEventListener('message', event => {
console.log('收到消息:', event)
})
})
})
//musicList.on('load', item => {
// console.log('从来源加载音乐', item)
// clientList.send('musicList', JSON.stringify([item]))
//})
// 在什么时机发送musicList?
// 通道准备好时即可发送

25
public/music.js
View File

@ -2,16 +2,15 @@ import IndexedDB from './database.js'
import { Button, List, ListItem } from './weigets.js'
export default class MusicList {
constructor() {
this.EventListeners = {}
constructor(EventListeners = {}) {
this.EventListeners = EventListeners
this.ul = List({})
this.list = []
this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
this.store.open().then(() => {
this.store.getAll().then((data) => {
this.list = data
data.forEach(item => this.__add(item))
})
this.store.open().then(async () => {
this.list = await this.store.getAll()
this.list.forEach(item => this.__add(item))
this.EventListeners['ready'](this.list)
})
document.body.appendChild(this.ul)
@ -48,10 +47,6 @@ export default class MusicList {
const li = ListItem({
id: item.id,
innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`,
onclick: event => {
event.stopPropagation()
this.play(item)
},
children: [
Button({
innerText: '播放',
@ -113,7 +108,13 @@ export default class MusicList {
this.ul.removeChild(this.ul.querySelector(`#${item.id}`))
this.stop() // 停止播放
}
play(item) {
async play(item) {
// 如果没有arrayBuffer则从对方获取
console.log('play:', item)
if (!item.arrayBuffer) {
console.log('从对方获取:', item)
return
}
this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
this.audio.play()
this._on('play', item)