H5P2P 文件传输实现：WebRTC 代码示例

要实现 H5P2P 传输文件，可以使用 WebRTC 技术。下面是一个简单的示例代码：

首先，需要在 HTML 文件中添加以下代码：

<input type='file' id='fileInput'>
<button onclick='sendFile()'>Send File</button>

<script src='https://webrtc.github.io/adapter/adapter-latest.js'></script>
<script src='https://cdn.jsdelivr.net/npm/simple-peer/simplepeer.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/h5p2p/h5p2p.min.js'></script>

然后，在 JavaScript 文件中添加以下代码：

// 创建 H5P2P 实例
const h5p2p = new H5P2P();

// 创建 SimplePeer 实例
const peer = new SimplePeer({ initiator: true });

// 监听 SimplePeer 的信令事件
peer.on('signal', (data) => {
  // 将信令数据发送给对方
  h5p2p.sendSignal(data);
});

// 监听 H5P2P 的信令事件
h5p2p.on('signal', (data) => {
  // 将信令数据发送给对方
  peer.signal(data);
});

// 监听 SimplePeer 的连接事件
peer.on('connect', () => {
  console.log('Connected');
});

// 监听 SimplePeer 的数据事件
peer.on('data', (data) => {
  // 接收到对方发送的文件数据
  const fileBlob = new Blob([data]);
  const fileURL = URL.createObjectURL(fileBlob);
  const link = document.createElement('a');
  link.href = fileURL;
  link.download = 'received_file';
  link.click();
});

// 发送文件函数
function sendFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  const reader = new FileReader();
  reader.onload = () => {
    // 将文件数据发送给对方
    peer.send(reader.result);
  };
  reader.readAsArrayBuffer(file);
}

在上面的代码中，使用了 H5P2P 库来处理 P2P 连接和信令交换，使用了 SimplePeer 库来处理 WebRTC 连接。当用户选择文件并点击“Send File”按钮时，文件将会被读取为 ArrayBuffer，并通过 SimplePeer 发送给对方。对方接收到数据后会创建一个 Blob 对象，并提供一个下载链接，用户可以通过点击链接下载接收到的文件。

请注意，以上代码仅为示例，实际使用时可能需要进行适当的错误处理和优化。