随着互联网技术的发展，流媒体服务变得越来越流行。然而，传统的流媒体传输方式面临着带宽消耗大、服务器负载高等问题。为了解决这些问题，点对点（P2P）技术被引入到流媒体传输中。本文将详细介绍如何使用 ArtPlayer 和 P2P Media Loader 来实现点对点流媒体加速。

介绍

https://github.com/zhw2590582/ArtPlayer

ArtPlayer是一个基于 HTML5 的开源视频播放器，支持多种视频格式和流媒体协议，具备跨平台兼容性和丰富的自定义功能。它能够提供流畅的播放体验，并支持多种交互操作，如播放、暂停、全屏等。

https://github.com/Novage/p2p-media-loader

 P2P Media Loader是一种利用 P2P 技术进行媒体内容加载的工具，它通过将媒体文件分散存储在多个用户设备上，实现高效的数据传输和内容共享。这种技术可以显著提高大文件传输的速度和可靠性，同时降低中心服务器的负载。

实现流程

目前 P2P Media Loader 只支持 HLS 和 MPEG-DASH 协议的自适应码率流，要实现还需要配合相应库，本次就主要讲解一下将 P2P 与 ArtPlayer 和 Hls.js 集成。

这边我已经写好了一个简单的完整示例。下面是在线播放测试，直接多个 标签页 / 浏览器 / 设备 打开当前页面即可查看效果。

示例代码仓库:

https://github.com/ecmlk/p2p-artplayer-hls-demo

具体详细代码可去仓库里查看，可以自己下载尝试一下，代码的相应位置也都做了详细的注释。

常见问题

模块引用

官方的 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 这个项目非常合适，详细搭建教程可以看我另一篇文章  宝塔面板构建运行 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 浏览器访问，开启翻译浏览。

官方文档地址：P2P Media Loader Documentation

总结

通过本篇文章，你将能够基本掌握如何使用 ArtPlayer 和 P2P Media Loader 实现点对点流媒体传输，从而降低服务器负载并提升播放流畅度。如果对 P2P Media Loader 有进一步的疑问，也可以参考其官方文档或在文章下方评论说明，博主有时间会耐心解答。