IPFS实际应用,5分钟简单搭建“爱奇艺”

这是一个快速教程,将教您如何:

  • 在本地设备上设置IPFS

  • 在浏览器中使用IPFS HTTP API

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

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

IPFS实际应用,5分钟简单搭建“爱奇艺”                           IPFS上的YouTube

一,安装,初始化IPFS并将其连接到公用网络

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

确保您的API端点在port打开5001。您可以通过以下方法检查浏览器中的链接:

http:// localhost:5001 / webui

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

注意:加载页面可能需要一分钟。

     IPFS实际应用,5分钟简单搭建“爱奇艺”IPFS状态页

二,设置我们的Youtube Webapp

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

$ git clone https://github.com/simpleaswater/ipfs.git 

$ cd ipfs / tutorials / youtube_on_ipfs

注意如果看到“未捕获的DOMException:无法从’Window’读取’localStorage’属性:该文档的访问被拒绝”错误,然后使用apache之类的Web服务器为Web应用程序提供服务。

三,在浏览器中使用IPFS HTTP API

在您喜欢的文本编辑器中打开youtube_on_ipfs仓库。现在,打开index.html文件。这里我们有一些基本的引导UI。

IPFS实际应用,5分钟简单搭建“爱奇艺”

我们有一个上传按钮id=customFile和一个id=videos的div,在那里我们将填充我们的视频。

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

让我们在该部分中添加CDN脚本链接<head>

<script src=”https://unpkg.com/ipfs-http-client/dist/index.min.js”></script

现在,我们可以ipfs-http-client从浏览器访问了。让我们转到js/app.js。在这里,我们管理Web应用程序的所有逻辑。

IPFS实际应用,5分钟简单搭建“爱奇艺”

用户选择要上传的文件后,我们会将文件转换Blob为ArrayBuffer然后将其上传到IPFS对等方。但是,为了将文件上传到IPFS对等端,首先,我们需要与IPFS对等端连接。

让我们通过初始化来做到这一点ipfs-http-client:

//TODO: Upload Data to IPFS peer using IPFS HTTP APIconst results = await ipfs.add(e.target.result)

在这里,由于我们在构建Web应用程序的同一设备上运行IPFS对等端,因此可以在上访问IPFS API端点 localhost:5001

注:如果您运行的是不同的设备上IPFS同行,然后替换localhost,5001与远程设备的公网IP和端口。

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

现在,由于我们已连接到IPFS对等端,因此可以向其中添加视频。让我们使用ipfs.add以下命令来做到这一点:

//TODO: Upload Data to IPFS peer using IPFS HTTP APIconst results = await ipfs.add(e.target.result)

当我们将文件上传到IPFS对等方时,我们将获得一个response(results)类似于以下内容的:

{hash: “QmbL8GTmeCuAJeaQeRaZb8uqZJbRnpDoYpyW51hB43UdTt”,path: “QmbL8GTmeCuAJeaQeRaZb8uqZJbRnpDoYpyW51hB43UdTt”,size: 11989385}

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

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

现在,当我们将视频上传到IPFS时,我们需要将其取回并显示在视频列表中。

要从IPFS对等方检索视频,我们需要视频文件中的hash值。因此,每次上传视频时,我们都会在浏览器localStorage中存储详细信息,例如名称,哈希和上传视频的大小(在updateVideoList()中)。

现在,有了哈希,我们将使用IPFS HTTP Gateway从IPFS对等方检索视频。IPFS Gateway是HTTP端点,您可以在其中传递文件的哈希值以检索它。例如,在下面您可以使用IPFS Gateway命令查阅到网站哈希值QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T 。

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

现在,让我们在其中添加Gateway端点app.js以显示视频:

//TODO: Retrieve the Data from the IPFS peer using IPFS Gateway videoSrc.src = `http://localhost:8080/ipfs/${videos[i].hash}`

现在在浏览器中打开index.html,并通过单击“上传”按钮上传视频文件。

       IPFS实际应用,5分钟简单搭建“爱奇艺”       

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

IPFS实际应用,5分钟简单搭建“爱奇艺”

滨合云智集团是中国分布式存储四大独角兽企业之一,中国区块链技术领域十大独角兽企业之一,“区块链+IOT+AI”场景应用的探索者与深耕者,也是全球顶尖区块链技术研发机构。其总部坐落于杭州,旗下拥有4家子公司,涵盖分布式存储硬件开发、芯片制造、技术开发、以及行业解决方案等生态产业链建设。

滨合云智集团以国产自主可控分布式存储技术服务平台为核心,致力于分布式存储技术落地应用,聚焦分布式存储技术上下游产业链各项关键技术的探究和产品开发,融合先进技术与解决方案,推出以分布式存储技术赋能实体企业的创新模式,形成从技术端到产品端完整产业链优势,在行业内具有创造性和领先性,奠定了集团的行业地位和品牌影响力。

Click to rate this post!
[Total: 0 Average: 0]

人已赞赏
名家说每日优选

Filecoin测试网运行状况

2020-1-16 13:18:07

名家说每日优选

当前区块链领域中DAO和DAC面临的问题

2020-1-16 13:18:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索