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

重构

Browse Source
This commit is contained in:
觉 2023-10-02 00:30:47 +08:00
parent 06de9f38c9
commit 3f69186906
4 changed files with 322 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
README.md
View File

@ -19,3 +19,210 @@ webrtc 实现的 p2p 信道
[a2, b2, c2, d2, e2] [a2, b2, c2, d2, e2]
[a3, b3, c3, d3, e3] [a3, b3, c3, d3, e3]
``` ```
备用代码片段
```html
<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>
```

19
public/client.js
View File

@ -20,8 +20,7 @@ export default class ClientList {
iceServers: [{ iceServers: [{
urls: 'turn:satori.love:3478', urls: 'turn:satori.love:3478',
username: 'x-username', username: 'x-username',
credential: 'x-password', //await crypto.subtle.digest('SHA-1', new TextEncoder().encode('your-password')), credential: 'x-password'
//credentialType: 'password'
}] }]
}) })
webrtc.onicecandidate = event => { webrtc.onicecandidate = event => {
@ -152,6 +151,22 @@ export default class ClientList {
this.EventListeners[name](...args) this.EventListeners[name](...args)
} }
} }
// 通过指定通道发送数据(单播)
sendto(id, name, data) {
//console.log('发送数据:', data, '到通道:', name, '到客户端:', id)
const client = this.clientlist.find(client => client.id === id)
if (!client) {
console.log('客户端不存在:', id)
return
}
client.channels.filter(ch => ch.label === name).forEach(async ch => {
// 等待 datachannel 打开(临时解决方案)
while (ch.readyState !== 'open') {
await new Promise(resolve => setTimeout(resolve, 100))
}
ch.send(data)
})
}
// 通过指定通道发送数据(广播) // 通过指定通道发送数据(广播)
send(name, data) { send(name, data) {
//console.log('广播数据:', data, '到通道:', name, '到所有客户端') //console.log('广播数据:', data, '到通道:', name, '到所有客户端')

335
public/index.html
View File

@ -17,63 +17,81 @@
import ClientList from './client.js' import ClientList from './client.js'
// 读取本地音乐列表(本地缓存) // 读取本地音乐列表(本地缓存)
const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') const database = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
await store.open() await database.open()
const list = await store.getAll() const list = await database.getAll()
//console.log('本地音乐列表:', list)
// 读取本地用户名(本地缓存) // 读取本地用户名(本地缓存)
const name = localStorage.getItem('username') const name = localStorage.getItem('username') ?? '游客'
if (!name) {
localStorage.setItem('username', `user-${Math.random().toString(36).substr(2)}`)
}
// 初始化音乐列表(加入本地缓存)
const musicList = new MusicList({ list })
musicList.on('remove', item => {
//console.log('移除音乐', item)
store.delete(item.id)
})
musicList.on('play', item => {
//console.log('播放音乐', item)
})
musicList.on('load', async item => {
await new Promise((resolve) => {
//console.log('加载音乐', item)
// 建立一个专用信道, 用于接收音乐数据(接收方已经准备好摘要信息)
var buffer = new ArrayBuffer(0)
var count = 0
clientList.setChannel(`music-data-${item.id}`, {
onmessage: async (event, client) => {
buffer = appendBuffer(buffer, event.data)
console.log('收到音乐数据 chunk', count, buffer.byteLength)
count++
if (buffer.byteLength >= item.size) {
console.log('音乐数据接收完毕')
item.arrayBuffer = buffer
event.target.close() // 关闭信道
resolve()
}
}
})
// 要求对方从指定信道发送音乐数据
clientList.send('base', JSON.stringify({ type: 'get_music_data', id: item.id, channel: `music-data-${item.id}` }))
//store.put(item) // 只有在like时才保存到本地
})
})
musicList.on('add', item => {
//console.log('添加音乐', item)
if (item.arrayBuffer) {
store.add(item)
// 告知对方音乐列表有更新
clientList.send('base', JSON.stringify({ type: 'set_music_list', list: musicList.list.map(({ id, name, size, type }) => ({ id, name, size, type })) }))
}
})
// 初始化客户端列表 // 初始化客户端列表
console.log('初始化客户端列表', 'name:', name)
const clientList = new ClientList({ name }) const clientList = new ClientList({ name })
// 初始化音乐列表(加入本地缓存)
const musicList = new MusicList({
list,
onplay: item => {
console.log('播放音乐', item.name)
},
onstop: item => {
console.log('停止音乐', item.name)
},
onlike: item => {
console.log('喜欢音乐', item)
if (item.arrayBuffer) {
database.add(item)
// clientList.send('base', JSON.stringify({
// type: 'set_music_list',
// list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
// }))
}
},
onunlike: item => {
console.log('取消喜欢', item)
},
onban: item => {
console.log('禁止音乐', item)
},
onunban: item => {
console.log('解禁音乐', item)
},
onremove: item => {
console.log('移除音乐', item)
database.delete(item.id)
},
onadd: (item, list) => {
console.log('添加音乐', item.name)
},
onupdate: item => {
console.log('更新音乐', item)
database.put(item)
},
onerror: error => {
console.log('音乐列表错误', error)
},
onload: async item => {
console.log('加载音乐', item)
return await new Promise((resolve) => {
var buffer = new ArrayBuffer(0)
var count = 0
clientList.setChannel(`music-data-${item.id}`, {
onmessage: async (event, client) => {
buffer = appendBuffer(buffer, event.data)
console.log('收到音乐数据 chunk', count, buffer.byteLength)
count++
if (buffer.byteLength >= item.size) {
console.log('音乐数据接收完毕')
item.arrayBuffer = buffer
event.target.close() // 关闭信道
resolve(item)
}
}
})
clientList.send('base', JSON.stringify({ type: 'get_music_data', id: item.id, channel: `music-data-${item.id}` }))
})
}
})
// 缓冲分片发送 // 缓冲分片发送
const CHUNK_SIZE = 1024 * 128 // 每个块的大小为128KB const CHUNK_SIZE = 1024 * 128 // 每个块的大小为128KB
const THRESHOLD = 1024 * 1024 // 缓冲区的阈值为1MB const THRESHOLD = 1024 * 1024 // 缓冲区的阈值为1MB
@ -107,10 +125,11 @@
if (type === 'set_music_list') { if (type === 'set_music_list') {
console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`) console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
// 将音乐列表添加到本地 // 将音乐列表添加到本地
const ids = musicList.list.map(item => item.id) list.forEach(item => musicList.add(item))
list.filter(item => !ids.includes(item.id)).forEach(item => { //const ids = musicList.list.map(item => item.id)
musicList.add(item) //list.filter(item => !ids.includes(item.id)).forEach(item => {
}) // musicList.add(item)
//})
return return
} }
if (type === 'get_music_data') { if (type === 'get_music_data') {
@ -143,9 +162,6 @@
console.log('未知类型:', type) console.log('未知类型:', type)
} }
}) })
// like对方的条目时亮起(双方高亮)(本地缓存)(可由对比缓存实现)
// ban对方的条目时灰掉(也禁止对方播放)(并保持ban表)(由插件实现)
// 只需要在注册时拉取列表, 播放时才需要拉取音乐数据
// 延迟1500ms // 延迟1500ms
//await new Promise((resolve) => setTimeout(resolve, 100)) //await new Promise((resolve) => setTimeout(resolve, 100))
@ -161,209 +177,6 @@
} }
document.body.appendChild(nameInput) document.body.appendChild(nameInput)
</script> </script>
<!--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-->
</body> </body>
</html> </html>

55
public/music.js
View File

@ -1,7 +1,8 @@
import { Button, List, ListItem } from './weigets.js' import { Button, List, ListItem } from './weigets.js'
export default class MusicList { export default class MusicList {
constructor({ list = [], EventListeners = {} }) { constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onban, onload }) {
this.event = { onplay, onstop, onadd, onremove, onlike, onban, onload }
this.ul = List({}) this.ul = List({})
this.ul.classList.add('music-list') this.ul.classList.add('music-list')
this.EventListeners = EventListeners this.EventListeners = EventListeners
@ -74,7 +75,6 @@ export default class MusicList {
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i] return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
} }
this.list.push(item) this.list.push(item)
console.log('添加音乐:', item)
this.ul.appendChild(ListItem({ this.ul.appendChild(ListItem({
id: item.id, id: item.id,
classList: item.arrayBuffer ? ['cache'] : [], classList: item.arrayBuffer ? ['cache'] : [],
@ -125,55 +125,48 @@ export default class MusicList {
}) })
] ]
})) }))
// 执行回调函数 this.event.onadd(item, this.list)
if (this.EventListeners['add']) {
this.EventListeners['add'](item)
}
} }
remove(item) { async remove(item) {
this.ul.querySelector(`#${item.id}`)?.remove() this.ul.querySelector(`#${item.id}`)?.remove()
this.stop() // 停止播放 this.stop() // 停止播放
// 执行回调函数 this.event.onremove(item)
if (this.EventListeners['remove']) {
this.EventListeners['remove'](item)
}
} }
async load(item) { async load(item) {
// 执行回调函数(应当异步) await this.event.onload(item)
if (this.EventListeners['load']) {
await this.EventListeners['load'](item)
}
} }
async play(item) { async play(item) {
if (!item.arrayBuffer) { if (!item.arrayBuffer) {
console.log('等待载入缓存:', item)
await this.load(item) await this.load(item)
console.log('缓存载入完成:', item)
} }
this.playing = item
this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type })) this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
this.audio.play() this.audio.play()
// 执行回调函数 this.event.onplay(item)
if (this.EventListeners['play']) {
this.EventListeners['play'](item)
}
} }
stop() { async stop() {
this.audio.pause() this.audio.pause()
this.audio.src = '' this.audio.src = ''
// 执行回调函数 this.event.onstop(this.playing)
if (this.EventListeners['stop']) {
this.EventListeners['stop']()
}
} }
like(item) { async like(item) {
if (!item.arrayBuffer) { if (!item.arrayBuffer) {
console.log('载入缓存:', item) await this.load(item)
return
} else {
console.log('移除缓存:', item)
return return
} }
if (item.arrayBuffer) {
return
}
// TODO: 添加喜欢和取消喜欢
this.event.onlike(item)
} }
async ban(item) {
this.event.onban(item)
}
//like(user_id, item_id) {
// //if (!item.like) item.like = []
// //item.like.push(user_id)
//}
next() { } next() { }
prev() { } prev() { }
} }