indexedDB 缓存

public/index.html

@@ -12,15 +12,21 @@
         <p>message</p>
     </div>
     <script type="module">
+        import IndexedDB from './database.js'
+        const musicObjectStore = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
+        await musicObjectStore.open()
+
         // 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()
-            const clients = []
+
             // 监听 ICE 候选事件
             pc.onicecandidate = event => {
                 if (event.candidate) {
@@ -93,18 +99,66 @@
                     return
                 }
             }
+            // 从数据库读取音乐文件
+            musicObjectStore.getAll().then(data => {
+                console.log('从数据库读取音乐文件', data)
+                const ol = document.createElement('ol')
+                data.forEach(item => {
+                    const li = document.createElement('li')
+                    li.innerText = `${item.name} - ${item.size} - ${item.type} - ${item.id}`
+                    const start = document.createElement('button')
+                    start.innerText = '播放'
+                    start.onclick = async () => {
+                        console.log('播放音乐', item)
+                        // 传输音乐文件
+                        const arrayBuffer = item.arrayBuffer
+                        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)
+                            })
+                            // 播放音乐
+                            const audioSource = audioContext.createBufferSource()
+                            audioSource.buffer = audioBuffer
+                            audioSource.connect(mediaStreamDestination)
+                            audioSource.start()
+                            // 创建SDP offer并将其设置为本地描述, 发送给远程端
+                            console.log('创建SDP offer并将其设置为本地描述, 发送给远程端')
+                            console.log('clients:', clients)
+                            const id = clients[0].id
+                            await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
+                            ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
+                        })
+                    }
+                    li.appendChild(start)
+                    const remove = document.createElement('button')
+                    remove.innerText = '移除'
+                    remove.onclick = async () => {
+                        await musicObjectStore.delete(item.id)
+                        li.remove()
+                    }
+                    li.appendChild(remove)
+                    ol.appendChild(li)
+                })
+                document.body.appendChild(ol)
+            })
             // 从文件系统中选择音乐文件
             const button = document.createElement('button')
             button.innerText = '选择音乐'
             button.addEventListener('click', async () => {
+                const id = Date.now()
                 const fileHandle = await window.showOpenFilePicker()
                 const file = await fileHandle[0].getFile()
+                const { name, size, type, lastModified, lastModifiedDate } = file
                 const reader = new FileReader()
-                reader.onload = function () {
-                    console.log('read file:', file)
+                reader.onload = async () => {
                     const arrayBuffer = reader.result
-                    const audioContext = new AudioContext()
+                    // 存储到 IndexDB
+                    musicObjectStore.add({ id, name, size, type, lastModified, lastModifiedDate, arrayBuffer })
                     // 传输音乐文件
+                    const audioContext = new AudioContext()
                     audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
                         // 将音乐流添加到 RTCPeerConnection
                         const mediaStreamDestination = audioContext.createMediaStreamDestination()