IPFS教程：使用IPFS构建Youtube

这是一个快速教程，将教您如何：

在本地设备上设置 IPFS在浏览器中使用 IPFS HTTP API将数据上传到本地 IPFS 对等体使用 IPFS 哈希值检索数据并将其显示在浏览器中

使用 IPFS 的 YouTube

安装，初始化 IPFS

您可以按照以下说明安装，初始化 IPFS 并将其连接到公共网络。确保您的 API 端点在 port 打开 5001。您可以通过以下方法检查浏览器中的链接：http：// localhost：5001 / webui您将看到以下 IPFS 状态页面。注意：该页面可能需要一分钟才能加载。

IPFS Web 控制台

设置我们的 Youtube Webapp

在开始使用 IPFS 之前，我们需要一个 Youtube Web 应用程序的用户界面。让我们克隆以下存储库并移至youtube_on_ipfs：

在浏览器中使用 IPFS HTTP API

youtube_on_ipfs在您喜欢的文本编辑器中打开仓库。现在，打开 index.html 文件。这里我们有一些基本的引导 UI。我们有一个上传按钮id=customFile和一个div与id=videos在那里我们将填充我们的视频。为了与我们设备上运行的 IPFS 对等体进行通信，我们必须使用ipfs-http-client，该 API 通过 API 端点与 IPFS 对等体进行交互，以在对等体上上传数据。让我们在该部分中添加 CDN 脚本链接<head>：

现在，我们可以ipfs-http-client从浏览器访问了。让我们看一下 JS/app.js。在这里，我们管理 Web 应用程序的所有逻辑。用户选择要上传的文件后，我们会将文件转换Blob为，ArrayBuffer然后将其上传到 IPFS 对等方。但是，为了将文件上传到 IPFS 对等端，首先，我们需要与IPFS对等端连接。让我们通过初始化来做到这一点ipfs-http-client：

在这里，当我们在构建 Web 应用程序的同一设备上运行 IPFS 对等时，我们可以访问 localhost：5001上的 IPFS API 端点。注意：如果要在其他设备上运行IPFS对等项，则将localhost：5001替换为远程设备的公共IP和端口。

将数据上传到本地 IPFS 对等体

现在，由于我们已连接到 IPFS 对等端，因此可以向其中添加视频。让我们使用 ipfs.add：

当我们将文件上传到 IPFS 对等方时，我们将获得一个results类似于以下内容的 response（）：

在这里，path是文件的路径（如果我们不通过 path 参数，hash则默认为哈希值），是上传文件的哈希值，以及size上传文件的大小。

使用 IPFS 哈希值检索数据

现在，当我们将视频上传到 IPFS 时，我们需要将其取回并显示在视频列表中。要从 IPFS 对等方检索视频，我们需要hash视频文件中的。所以，每次当我们上传视频，我们的细节name，hash以及size在浏览器中上传的视频localStorage（中updateVideoList()）。现在，有了哈希，我们将使用 IPFS HTTP 网关从 IPFS 对等方检索视频。IPFS 网关是 HTTP 端点，您可以在其中传递文件的哈希值以检索它。

例如，在下面，您可以QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T使用 IPFS 网关查看带有哈希值的网站。http://gateway.simpleaswater.com:8080/ipfs/QmQToNGFsGMkQe76mRirCvRyk现在，让我们在 app.js 中添加 Gateway 端点以显示视频：