IPFS教程：使用IPFS构建Youtube

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

• 在本地设备上设置IPFS

• 在浏览器中使用IPFS HTTP API

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

• 使用IPFS哈希值检索数据并将其显示在浏览器中

YouTube使用IPFS

安装，初始化IPFS

您可以按照以下说明进行安装，初始化IPFS并将其连接到公共网络。

确保在端口5001中打开了API端点。您可以通过以下方式在浏览器中检查链接：

http：//本地主机：5001 / webui

您将看到以下IPFS状态页面。

注意：此页面可能需要一分钟才能加载。

IPFS Web控制台

设置您的Youtube Webapp

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

在浏览器中使用IPFS HTTP API

youtube_on_ipfs在您喜欢的文本编辑器中打开仓库。现在，打开index.html文件。

在这里，我们有一些基本的指南UI。我们有一个ID = customFile的上传按钮和一个ID = ideos的di，我们将在其中填充视频。

为了与运行在我们设备上的IPFS对等体进行通信，我们必须使用ipfs-http-client，该客户端通过API端点与IPFS对等体进行交互以在对等体上上传数据。

让我们在此部分中添加CDN脚本链接：

现在，我们可以从浏览器访问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对等方时，我们将获得一个response（），其结果类似于以下内容：

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

使用IPFS哈希检索数据

现在，当我们将视频上传到IPFS时，我们需要对其进行检索并将其显示在视频列表中。

要从IPFS对等方检索视频，我们需要对视频文件进行哈希处理。因此，每次我们上传视频时，我们的详细信息名称，哈希值和大小都会在浏览器localStorage中（在updateVideoList（）中）上传。

现在，通过哈希，我们将使用IPFS HTTP网关从IPFS对等方检索视频。 IPFS网关是HTTP端点，您可以在其中传递文件的哈希值以检索它。

例如，在下面，您可以

QmQToNGFsGMkQe76mRirCRykJSiRB1JPpRLumyMN7N67T

使用IPFS网关查看带有哈希值的网站。

http://gateway.simpleaswater.com:8080/ipfs/QmQToNGFsGMkQe76mRirCRyk

现在，让我们在app.js中添加Gateway端点以显示视频：

现在，在浏览器中打开index.html，然后单击“上传”按钮以上传视频文件。

现在，如果要在IPFS上托管此网站，请选中“使用IPFS，IPNS和DNSLink托管该网站”