360 lines
16 KiB
HTML
360 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>webRTC</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<h1>webRTC</h1>
|
|
<p>选择音乐使频道内所有设备同步播放 chrome://webrtc-internals/</p>
|
|
</div>
|
|
<script type="module">
|
|
import IndexedDB from './database.js'
|
|
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()
|
|
console.log('本地音乐列表:', list)
|
|
|
|
// 读取本地用户名(本地缓存)
|
|
const name = localStorage.getItem('username')
|
|
if (!name) {
|
|
localStorage.setItem('username', `user-${Math.random().toString(36).substr(2)}`)
|
|
}
|
|
// 设置自己的主机名
|
|
const nameInput = document.createElement('input')
|
|
nameInput.type = 'text'
|
|
nameInput.placeholder = '请设置你的名字'
|
|
nameInput.onchange = event => {
|
|
localStorage.setItem('username', event.target.value)
|
|
window.location.reload() // 简单刷新页面
|
|
}
|
|
document.body.appendChild(nameInput)
|
|
|
|
// 初始化音乐列表(加入本地缓存)
|
|
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
|
|
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 })) }))
|
|
}
|
|
})
|
|
|
|
// 初始化客户端列表
|
|
const clientList = new ClientList({ name })
|
|
|
|
// 缓冲分片发送
|
|
const CHUNK_SIZE = 1024 * 128 // 每个块的大小为128KB
|
|
const THRESHOLD = 1024 * 1024 // 缓冲区的阈值为1MB
|
|
const DELAY = 100 // 延迟500ms
|
|
|
|
// 将两个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
|
|
}
|
|
// 只有一个基本信道, 用于交换和调度信息
|
|
clientList.setChannel('base', {
|
|
onopen: async event => {
|
|
// 要求对方发送音乐列表
|
|
clientList.send('base', JSON.stringify({ type: 'get_music_list' }))
|
|
},
|
|
onmessage: async (event, client) => {
|
|
const { type, id, channel, list } = JSON.parse(event.data)
|
|
console.log('收到 base 基本信道数据:', type, id, channel)
|
|
if (type === 'get_music_list') {
|
|
console.log('发送音乐列表:', musicList.list)
|
|
clientList.send('base', JSON.stringify({
|
|
type: 'set_music_list',
|
|
list: musicList.list.map(({ id, name, size, type }) => ({ id, name, size, type }))
|
|
}))
|
|
return
|
|
}
|
|
if (type === 'set_music_list') {
|
|
console.log('接收音乐列表:', event)
|
|
// 将音乐列表添加到本地
|
|
const ids = musicList.list.map(item => item.id)
|
|
list.filter(item => !ids.includes(item.id)).forEach(item => {
|
|
musicList.add(item)
|
|
})
|
|
return
|
|
}
|
|
if (type === 'get_music_data') {
|
|
// 建立一个信道, 用于传输音乐数据(接收方已经准备好摘要信息)
|
|
console.log('建立一个信道, 用于传输音乐数据', musicList.list)
|
|
musicList.list.filter(item => item.id === id).forEach(item => {
|
|
const ch = client.webrtc.createDataChannel(channel, { reliable: true })
|
|
ch.onopen = async event => {
|
|
console.log(`打开 ${channel} 信道, 传输音乐数据`)
|
|
// 将音乐数据分成多个小块，并逐个发送
|
|
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)
|
|
console.log(`发送 ${channel} 信道数据结束`)
|
|
}
|
|
})
|
|
return
|
|
}
|
|
console.log('未知类型:', type)
|
|
}
|
|
})
|
|
// like对方的条目时亮起(双方高亮)(本地缓存)(可由对比缓存实现)
|
|
// ban对方的条目时灰掉(也禁止对方播放)(并保持ban表)(由插件实现)
|
|
// 只需要在注册时拉取列表, 播放时才需要拉取音乐数据
|
|
</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>
|
|
|
|
</html> |