随着互联网技术的发展，流媒体服务变得越来越流行。然而，传统的流媒体传输方式面临着带宽消耗大、服务器负载高等问题。为了解决这些问题，点对点（P2P）技术被引入到流媒体传输中。本文将详细介绍如何使用 ArtPlayer 和 P2P Media Loader 来实现点对点流媒体加速。
介绍
ArtPlayer 是一个基于HTML5的开源视频播放器，支持多种视频格式和流媒体协议，具备跨平台兼容性和丰富的自定义功能。它能够提供流畅的播放体验，并支持多种交互操作，如播放、暂停、全屏等。
P2P Media Loader 是一种利用P2P技术进行媒体内容加载的工具，它通过将媒体文件分散存储在多个用户设备上，实现高效的数据传输和内容共享。这种技术可以显著提高大文件传输的速度和可靠性，同时降低中心服务器的负载。
实现流程
目前 P2P Media Loader 只支持 HLS 和 MPEG-DASH 协议的自适应码率流，要实现还需要配合相应库，本次就主要讲解一下将 P2P 与 ArtPlayer 和 Hls.js 集成。
这边我已经写好了一个简单的完整示例。下面是在线播放测试，直接多个 标签页/浏览器/设备 打开当前页面即可查看效果。
具体详细代码可去仓库里查看，可以自己下载尝试一下，代码的相应位置也都做了详细的注释。
常见问题
模块引用
官方的ES模块分为 core 模块 和 hls集成模块（这个模块没有引用hls库，在实际使用中还是要单独引用hls库）
我们在实际使用时不用引用全部的模块，只需要先引用 hls 库，再引用 hls集成模块 就行，这个 hls集成模块 代码我看了一下会调用核心库，在第13行左右有 import { CoreRequestError, debug, Core } from "p2p-media-loader-core"; 。
最开始我自己在测试时发现了个问题，直接引用使用时 hls集成模块 会报错，提示在第13行引用 核心模块 时路径错误、找不到名为 “p2p-media-loader-core” 的文件，我就去修改了一下 hls集成模块 里引用路径和文件名，修改成 import { CoreRequestError, debug, Core } from "./p2p-media-loader-core.es.js"; （这里添加了 ./ 这个表示在当前目录下，然后写出了完整文件名）然后将两个模块文件放在同一目录下就好了。
如何工作的
Web 浏览器运行与 P2P Media Loader 库集成的视频播放器。库的每个实例都称为一个对等体，并且统称为许多对等体形成 P2P 网络.
P2P Media Loader 最初通过 HTTP（S） 从源服务器或 CDN 下载媒体段，以快速开始媒体播放。如果没有可用的对等方，它将继续通过 HTTP（S） 下载段，类似于传统媒体流。
随后，P2P Media Loader 将媒体流详细信息和连接信息（例如 ICE c和idates）传输到 WebTorrent 跟踪器。这些跟踪器提供访问同一媒体流的其他对等方的列表。
然后，P2P Media Loader 与这些对等方连接以下载其他媒体段，并同时共享已下载的段。
P2P群中的r和om对等体会定期通过HTTP（S）下载新段，并通过P2P将其分发给其他人。
自定义配置
通过上面的流程和工作原理我们知道要实现P2P网络是需要 STUN服务器 和 WebTorrent跟踪器，默认情况下，P2P Media Loader 配置为使用公共 STUN 和 WebTorrent 服务器，这意味着 P2P 网络无需运行任何服务器端软件即可在简单用例中运行。
测试时你可以不用额外配置 STUN服务器 和 WebTorrent跟踪器，但是在生产中使用不推荐使用公共跟踪器，因为它们支持有限数量的对等体，并且可能会拒绝连接，甚至在重负载下宕机。
所以推荐自己搭建 WebRTC服务器，wt-tracker 这个项目非常合适，详细搭建教程可以看我另一篇文章。
如果你不想使用公共的跟踪器，可以配置个人跟踪器和 STUN 服务器，具体示例如下：
const HlsWithP2P = HlsJsP2PEngine.injectMixin(window.Hls);
const hls = new HlsWithP2P({
p2p: {
core: {
// 配置 Tracker 服务器
announceTrackers: [
"wss://personal.tracker1.com",
"wss://personal.tracker2.com"
],
// 配置 STUN 服务器
rtcConfig: {
iceServers: [
{ urls: "stun:stun.l.google.com:19302" },
{ urls: "stun:global.stun.twilio.com:3478?transport=udp" }
]
}
}
}
});官方文档
P2P Media Loader官方文档写的很详细，其他播放器配合使用示例也有，相关api功能以及使用方法都有，只是全是英文。推荐使用Edge浏览器访问，开启翻译浏览。
总结
通过本篇文章，你将能够基本掌握如何使用 ArtPlayer 和 P2P Media Loader 实现点对点流媒体传输，从而降低服务器负载并提升播放流畅度。如果对P2P Media Loader有进一步的疑问，也可以参考其官方文档或在文章下方评论说明，博主有时间会耐心解答。