├── static
    ├── robots.txt
    └── favicon.ico
├── start.sh
├── src
    ├── favicon.ico
    ├── style
    │   └── main.scss
    ├── plugins
    │   └── vue-ipfs.js
    ├── App.vue
    ├── NotFound.vue
    ├── index.html
    ├── index.js
    ├── IpfsGatewayVideo.vue
    ├── IpfsLs.vue
    ├── components
    │   └── PathForm.vue
    ├── Home.vue
    └── IpfsVideo.vue
├── .parcelrc
├── recode_vp8_webm.sh
├── recode_vp9_webm.sh
├── .gitignore
├── README.md
└── package.json


/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /


--------------------------------------------------------------------------------
/start.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 | yarn build
4 | yarn start
5 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bneijt/ipfs-video-frontend/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bneijt/ipfs-video-frontend/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/src/style/main.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | // $scheme-main: #333;
3 | // $text: #6d6b61;
4 | // $grey-dark: #6d6b61;
5 | @import "../../node_modules/bulma/bulma.sass";
6 | 


--------------------------------------------------------------------------------
/.parcelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "@parcel/config-default"
 4 |   ],
 5 |   "reporters": [
 6 |     "...",
 7 |     "parcel-reporter-static-files-copy"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/recode_vp8_webm.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | #Script that takes the input file and recodes to streamable VP8 Opus WEBM file
 3 | set -e
 4 | INPUT=$1
 5 | if [ -z "$INPUT" ]; then
 6 |     echo "Requires a single file as input file"
 7 |     exit 1
 8 | fi
 9 | OUTPUT="${INPUT%%.*}".webm
10 | QUALITY=45
11 | ffmpeg -i "$INPUT" -c:v libvpx -crf $QUALITY -b:v 10M -r 30 -c:a libopus -b:a 96K "$OUTPUT"
12 | 


--------------------------------------------------------------------------------
/recode_vp9_webm.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | #Script that takes the input file and recodes to streamable VP8 Opus WEBM file
 3 | set -e
 4 | INPUT=$1
 5 | if [ -z "$INPUT" ]; then
 6 |     echo "Requires a single file as input file"
 7 |     exit 1
 8 | fi
 9 | OUTPUT="${INPUT%%.*}".webm
10 | QUALITY=45
11 | ffmpeg -i "$INPUT" -c:v libvpx-vp9 -crf $QUALITY -b:v 0 -r 30 -c:a libopus -b:a 96K "$OUTPUT"


--------------------------------------------------------------------------------
/src/plugins/vue-ipfs.js:
--------------------------------------------------------------------------------
 1 | import IPFS from 'ipfs'
 2 | 
 3 | const plugin = {
 4 |   install: (app, options = {}) => {
 5 |     app.config.globalProperties.$ipfs = IPFS.create(options)
 6 | 
 7 |     app.provide('ipfs', options)
 8 |   }
 9 | }
10 | 
11 | // Auto-install
12 | if (typeof window !== 'undefined' && window.Vue) {
13 |   window.Vue.use(plugin)
14 | }
15 | 
16 | export default plugin
17 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <metainfo />
 3 |   <router-view></router-view>
 4 | </template>
 5 | 
 6 | <script>
 7 | import { useMeta } from "vue-meta";
 8 | 
 9 | export default {
10 |   metaInfo() {
11 |     return {
12 |       title: "IPFS video player",
13 |       description: "Play a video from the IPFS CDN using js-ipfs or the ipfs.io gateway."
14 |     };
15 |   },
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="block">
 3 |     <h1 class="title">404 Not found</h1>
 4 |     <p>Page not found. <router-link to="/">Go back home</router-link></p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   metaInfo: {
11 |        title: "404 Not found",
12 |        description: "Page not found",
13 |        //meta: {"http-equiv":"refresh", content:"2;url=http://example.com/"}
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | /examples
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | dist
26 | .parcel-cache
27 | .nuxt


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | IPFS video front-end
 2 | =========
 3 | This is the IPFS video front-end hosted on https://ipfs.video
 4 | 
 5 | The basic idea is being able to play a video from IPFS directly or using one of the gateways available.
 6 | 
 7 | Development notes
 8 | ================
 9 | 
10 | To detect the type of MP4 embedded media, I did some reverse engineering to find the correct bytes for the different codecs embedded in the mp4 file.
11 | 
12 | Commands to do that include:
13 | 
14 |     #!/bin/bash
15 |     echo avc1
16 |     mp4file --dump "$1" | grep AVCProfileIndication
17 |     mp4file --dump "$1" | grep profile_compatibility
18 |     mp4file --dump "$1" | grep AVCLevelIndication
19 | 
20 |     echo mp4a
21 |     mp4file --dump "$1" | grep objectTypeId
22 |     mp4file --dump "$1" | grep AVCProfileIndication


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta name="msvalidate.01" content="7E0C21C24C0ECFDE8A7671CC053B45D3" />
 8 |     <link rel="icon" href="favicon.ico">
 9 |     <title>IPFS video player</title>
10 |     <link href="./style/main.scss" rel="stylesheet">
11 | </head>
12 | 
13 | <body>
14 |     <noscript>
15 |         <strong>We're sorry but this page does not work properly without JavaScript enabled. Please enable it to
16 |             continue.</strong>
17 |     </noscript>
18 |     <section class="section">
19 |         <div class="container">
20 |             <div id="app">
21 |             </div>
22 |         </div>
23 |     </section>
24 |     <script type="module" src="./index.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ipfs-video-frontend",
 3 |   "version": "0.0.1",
 4 |   "license": "MIT",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "bulma": "^0.9.2",
 8 |     "ipfs": "^0.55.3",
 9 |     "vue": "^3.0.11",
10 |     "vue-meta": "^3.0.0-alpha.9",
11 |     "vue-router": "^4.0.8"
12 |   },
13 |   "source": "dist/index.html",
14 |   "scripts": {
15 |     "start": "parcel serve src/index.html",
16 |     "build": "parcel build  --no-scope-hoist src/index.html"
17 |   },
18 |   "devDependencies": {
19 |     "@parcel/transformer-sass": "^2.0.0-rc.0",
20 |     "@parcel/transformer-vue": "^2.0.0-rc.0",
21 |     "parcel": "^2.0.0-rc.0",
22 |     "parcel-reporter-static-files-copy": "^1.3.0",
23 |     "sass": "^1.32.13"
24 |   },
25 |   "resolutions": {
26 |     "trim-newlines": "^3.0.1",
27 |     "electron": "^9.4.0"
28 |   },
29 |   "browserslist": [
30 |     "last 2 versions and not dead and > 2%"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import { createRouter, createWebHistory } from 'vue-router';
 3 | import { createMetaManager, plugin as metaPlugin } from 'vue-meta'
 4 | 
 5 | import App from "./App";
 6 | import Home from "./Home";
 7 | import IpfsVideo from "./IpfsVideo";
 8 | import PathForm from "./components/PathForm";
 9 | import IpfsGatewayVideo from "./IpfsGatewayVideo";
10 | import IpfsLs from './IpfsLs';
11 | import NotFound from './NotFound';
12 | import VueIpfs from './plugins/vue-ipfs';
13 | 
14 | const routes = [
15 |   { path: '/', component: Home },
16 |   { path: '/ipfs/:ipfsPath+', component: IpfsVideo },
17 |   { path: '/gw/:ipfsPath+', component: IpfsGatewayVideo },
18 |   { path: '/ls/:ipfsPath+', component: IpfsLs },
19 |   { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
20 | ]
21 | const router = createRouter({
22 |   history: createWebHistory(),
23 |   routes: routes
24 | })
25 | 
26 | const app = createApp(App)
27 |   .use(router)
28 |   .use(VueIpfs)
29 |   .use(createMetaManager())
30 |   .use(metaPlugin)
31 | 
32 | app.component('path-form', PathForm);
33 | app.mount("#app");
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/src/IpfsGatewayVideo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="block">
 3 |     <h1 class="title">{{ title }}</h1>
 4 |     <video ref="video" v-bind:src="gatewayUrl" controls muted autoplay />
 5 |   </div>
 6 |   <div class="block">
 7 |     <path-form />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { useMeta } from "vue-meta";
13 | import { useRoute } from "vue-router";
14 | 
15 | function extractMeta(route) {
16 |   if (route.params.ipfsPath !== undefined) {
17 |     const titleValue = route.params.ipfsPath[route.params.ipfsPath.length - 1];
18 |     return {
19 |       title: titleValue,
20 |       description: `IPFS video player playing '${titleValue}' using the IPFS network`,
21 |     };
22 |   }
23 |   return {
24 |     title: "IPFS gateway video",
25 |     description: "IPFS video player using the ipfs.io gateway",
26 |   };
27 | }
28 | 
29 | export default {
30 |   setup() {
31 |     const route = useRoute();
32 |     useMeta(extractMeta(route));
33 |   },
34 | 
35 |   computed: {
36 |     title: function () {
37 |       return extractMeta(this.$route).title;
38 |     },
39 |     gatewayUrl: function () {
40 |       if (this.$route.params.ipfsPath !== undefined) {
41 |         const ipfsPath = this.$route.params.ipfsPath.join("/");
42 |         return `https://ipfs.io/ipfs/${ipfsPath}`;
43 |       }
44 |       return "";
45 |     },
46 |   },
47 | };
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/IpfsLs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="block">
 3 |     <h1 class="title">{{ title }}</h1>
 4 |     <h2 class="subtitle">IPFS listing</h2>
 5 |     <table class="table">
 6 |       <thead>
 7 |         <tr>
 8 |           <th>Name</th>
 9 |           <th>Size</th>
10 |           <th><abbr title="Content Identifier">CID</abbr></th>
11 |         </tr>
12 |       </thead>
13 |       <tbody>
14 |         <tr v-for="entry in entries" v-bind:key="entry.cid">
15 |           <td>
16 |             <router-link v-bind:to="'/ipfs/' + entry.path">{{
17 |               entry.name
18 |             }}</router-link>
19 |           </td>
20 |           <td>{{ entry.size }}</td>
21 |           <td>
22 |             <code>{{ entry.cid }}</code>
23 |           </td>
24 |         </tr>
25 |       </tbody>
26 |     </table>
27 |     <p class="has-text-right">
28 |       <small>{{ status }}</small>
29 |     </p>
30 |   </div>
31 |   <div class="block">
32 |     <path-form />
33 |   </div>
34 | </template>
35 | 
36 | <script>
37 | function entryInformationFrom(block) {
38 |   var entry = {
39 |     path: block.path,
40 |     cid: block.cid.string,
41 |     name: block.name,
42 |     size: block.size,
43 |   };
44 |   return entry;
45 | }
46 | export default {
47 |   inject: ["ipfs"],
48 |   data() {
49 |     return {
50 |       status: "Initializing...",
51 |       entries: [],
52 |     };
53 |   },
54 |   mounted: function () {
55 |     this.getBlockInfo();
56 |   },
57 |   computed: {
58 |     ipfsPath: function () {
59 |       if (this.$route.params.ipfsPath !== undefined) {
60 |         return this.$route.params.ipfsPath.join("/");
61 |       }
62 |       return "";
63 |     },
64 |     title: function () {
65 |       var titleValue = "IPFS listing";
66 |       if (this.$route.params.ipfsPath !== undefined) {
67 |         titleValue =
68 |           this.$route.params.ipfsPath[this.$route.params.ipfsPath.length - 1];
69 |         document.title = titleValue + " - IPFS listing";
70 |       }
71 |       return titleValue;
72 |     },
73 |   },
74 |   methods: {
75 |     async getBlockInfo() {
76 |       const component = this;
77 |       try {
78 |         const ipfs = await this.$ipfs,
79 |           ipfsPath = this.ipfsPath;
80 | 
81 |         this.status = "Looking up: " + ipfsPath;
82 |         for await (const chunk of ipfs.ls(ipfsPath)) {
83 |           this.entries.push(entryInformationFrom(chunk));
84 |         }
85 |         this.status = "";
86 |       } catch (err) {
87 |         // Set error status text.
88 |         this.status = `Error: ${err}`;
89 |       }
90 |     },
91 |   },
92 | };
93 | </script>
94 | 


--------------------------------------------------------------------------------
/src/components/PathForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="columns">
  3 |     <div class="column">
  4 |       <div class="field">
  5 |         <label class="label">IPFS Path</label>
  6 |         <div class="control">
  7 |           <input
  8 |             placeholder="IPFS path or CID"
  9 |             class="input is-link"
 10 |             minlength="46"
 11 |             v-bind:class="{ 'is-danger': isInvalidIpfsPath }"
 12 |             type="text"
 13 |             v-model.trim="ipfsPath"
 14 |           />
 15 |         </div>
 16 |         <p class="help">
 17 |           For more information on this, read the
 18 |           <router-link to="/">help text on the homepage</router-link>.
 19 |         </p>
 20 |       </div>
 21 |       <div class="field is-grouped">
 22 |         <div class="control">
 23 |           <button
 24 |             @click="useIpfs"
 25 |             class="button"
 26 |             title="Use js-ipfs from the browser"
 27 |             v-bind:disabled="isInvalidIpfsPath"
 28 |           >
 29 |             Use IPFS directly
 30 |           </button>
 31 |         </div>
 32 |         <div class="control">
 33 |           <button
 34 |             @click="useGateway"
 35 |             class="button"
 36 |             title="Use the ipfs.io HTTP gateway"
 37 |             v-bind:disabled="isInvalidIpfsPath"
 38 |           >
 39 |             Use ipfs.io gateway
 40 |           </button>
 41 |         </div>
 42 |         <div class="control">
 43 |           <a
 44 |             v-bind:href="'http://localhost:8080/ipfs/' + ipfsPath"
 45 |             class="button"
 46 |             title="Open at localhost:8080"
 47 |             v-bind:disabled="isInvalidIpfsPath"
 48 |             target="_blank"
 49 |           >
 50 |             Open at localhost:8080
 51 |           </a>
 52 |         </div>
 53 |         <div class="control">
 54 |           <a
 55 |             v-bind:href="'https://ipfs.io/ipfs/' + ipfsPath"
 56 |             class="button"
 57 |             title="Open at ipfs.io"
 58 |             v-bind:disabled="isInvalidIpfsPath"
 59 |             target="_blank"
 60 |           >
 61 |             Open at ipfs.io
 62 |           </a>
 63 |         </div>
 64 |       </div>
 65 |     </div>
 66 |   </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | const MIN_CID_LENGTH = 46;
 71 | 
 72 | export default {
 73 |   data() {
 74 |     var ipfsPath = "";
 75 |     if (this.$route.params.ipfsPath !== undefined) {
 76 |       ipfsPath = this.$route.params.ipfsPath.join("/");
 77 |     }
 78 |     return {
 79 |       ipfsPath: ipfsPath,
 80 |     };
 81 |   },
 82 |   computed: {
 83 |     isInvalidIpfsPath() {
 84 |       if (
 85 |         this.ipfsPath === undefined ||
 86 |         this.ipfsPath.length < MIN_CID_LENGTH
 87 |       ) {
 88 |         return true;
 89 |       } else {
 90 |         return null;
 91 |       }
 92 |     },
 93 |   },
 94 |   methods: {
 95 |     useIpfs() {
 96 |       this.$router.push(`/ipfs/${this.ipfsPath}`);
 97 |     },
 98 |     useGateway() {
 99 |       this.$router.push(`/gw/${this.ipfsPath}`);
100 |     },
101 |   },
102 | };
103 | </script>
104 | 


--------------------------------------------------------------------------------
/src/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content">
  3 |     <h1 class="title">Welcome to the IPFS video player</h1>
  4 |     <p>
  5 |       Below is a form where you can put in the
  6 |       <a href="https://docs.ipfs.io/guides/concepts/cid/"
  7 |         >IPFS content id or path</a
  8 |       >
  9 |       of the video you would like to see and choose to use either IPFS directly
 10 |       or a gateway.
 11 |     </p>
 12 |     <p>
 13 |       If you have not found any good example to view yet, you can try
 14 |       <router-link to="/ipfs/QmQWM1qDPasxm5sXAQeVMfmhnECBzyYkLgfK23yPif1Ftx"
 15 |         >Blender Half full</router-link
 16 |       >, a
 17 |       <router-link
 18 |         to="/ipfs/Qme4QjkyZQuFtN2SDhELfXVshMyAEec53jaFQ8kR4maLeV/Alan Kay at OOPSLA 1997 - The computer revolution hasnt happened yet.webm"
 19 |         >talk by Alan Kay</router-link
 20 |       >,
 21 |       <router-link to="/ipfs/Qmcd7D6TnnzZzsk12DBwCMRYx1a8TVX4tq4eemYqspL4Rv"
 22 |         >a 4K UHD chick</router-link
 23 |       >
 24 |       from
 25 |       <a
 26 |         href="https://www.pexels.com/video/close-up-video-of-a-person-holding-a-chick-5913245/"
 27 |         >Pexel videos</a
 28 |       >,
 29 |       <router-link to="/ipfs/QmbGtJg23skhvFmu9mJiePVByhfzu5rwo74MEkVDYAmF5T"
 30 |         >Big Buck Bunny</router-link
 31 |       >, or the
 32 |       <a href="https://cloud.blender.org/films/caminandes-2/">Caminandes</a>
 33 |       series
 34 |       <router-link
 35 |         to="/ipfs/QmYHDhsgUgdKSAimguGC92MzQ8VNFHZw3yp6kAHwiXCFLm/01_llama_drama_1080p.webm"
 36 |         >1</router-link
 37 |       >,
 38 |       <router-link
 39 |         to="/ipfs/QmYHDhsgUgdKSAimguGC92MzQ8VNFHZw3yp6kAHwiXCFLm/02_gran_dillama_1080p.webm"
 40 |         >2</router-link
 41 |       >,
 42 |       <router-link
 43 |         to="/ipfs/QmYHDhsgUgdKSAimguGC92MzQ8VNFHZw3yp6kAHwiXCFLm/03_caminandes_llamigos_1080p.webm"
 44 |         >3</router-link
 45 |       >.
 46 |     </p>
 47 |   </div>
 48 |   <div class="block">
 49 |     <path-form />
 50 |   </div>
 51 |   <div class="content">
 52 |     <h2>IPFS directly vs gateway</h2>
 53 |     <p>
 54 |       IPFS directly is the coolest option, it uses
 55 |       <a href="https://js.ipfs.io/">js-ipfs</a> in the browser to stream the
 56 |       video. However, there is
 57 |       <em>only support for VP8 video with OPUS audio in a WEBM container</em>.
 58 |     </p>
 59 |     <p>
 60 |       The gateway uses <a href="https://ipfs.io/">ipfs.io</a> to access the
 61 |       video via an HTTP gateway. This supports all video content supported by
 62 |       your browser, but does not use cool technology.
 63 |     </p>
 64 |     <p>
 65 |       If you want to host a video directly from IPFS, make sure you recode it
 66 |       first. For example, to recode a file called <code>monkey.avi</code> you
 67 |       could use <code>ffmpeg</code> with the following commandline:
 68 |     </p>
 69 |     <pre>
 70 | ffmpeg -i monkey.avi -c:v libvpx -crf 45 -b:v 10M -r 25 -c:a libopus -b:a 96K monkey.webm</pre
 71 |     >
 72 |     <p>
 73 |       Host the resulting <code>monkey.webm</code> on IPFS and point this website
 74 |       to the CID or path. If you have bash available, you can also download
 75 |       <a
 76 |         href="https://github.com/bneijt/ipfs-video-frontend/blob/main/recode_vp8_webm.sh"
 77 |         >a recode script from GitHub</a
 78 |       >.
 79 |     </p>
 80 |     <p>
 81 |       If you have a video on Youtube that you would also like to directly play from IPFS you can download the webm encoded version and use that using tools like youtube-dl:
 82 |       <pre>youtube-dl -f 'bestvideo[ext=webm]+bestaudio[ext=webm]' --merge-output-format webm "https://www.youtube.com/watch?v=u0HEHx2b_rY"</pre>
 83 | 
 84 |     </p>
 85 |     <h2>Submit issues</h2>
 86 |     <p>
 87 |       This project is open source and you are invited to submit issues at
 88 |       <a href="https://github.com/bneijt/ipfs-video-frontend"
 89 |         >the Github project page</a
 90 |       >.
 91 |     </p>
 92 |     <h2>See also</h2>
 93 |     <p>
 94 |       <a href="https://ipfs-search.com/">ipfs-search</a>, which allows you to search for webm video's as well as all other content.
 95 |     </p>
 96 |     <p>
 97 |       A <a href="https://kodi.tv/">Kodi</a> plugin under development that will
 98 |       complement this website, available at:<a
 99 |         href="https://github.com/bneijt/ipfs-video-kodi"
100 |         >https://github.com/bneijt/ipfs-video-kodi</a
101 |       >
102 |     </p>
103 |     <p>
104 |       <a href="https://ipfstube.erindachtler.me/">IPFSTube</a>: same idea, but
105 |       different implementation. Has a great
106 |       <a
107 |         href="https://ipfstube.erindachtler.me/v/QmU1GSqu4w29Pt7EEM57Lhte8Lce6e7kuhRHo6rSNb2UaC"
108 |         >demo video</a
109 |       >.
110 |     </p>
111 |     <p>
112 |       <a href="https://pinata.cloud/">Pinata</a>: a simple web interface to
113 |       easily manage and host/pin content on IPFS.
114 |     </p>
115 |     <p>
116 |       <a href="https://www.reddit.com/r/IPFS_Hashes">Reddit IPFS_Hashes</a>: a
117 |       reddit page where people share IPFS hashes, some are video hashes as well.
118 |     </p>
119 |     <p>
120 |       A project to help you host your own IPFS pinning gateway easily:
121 |       <a href="https://github.com/bneijt/ipfs-video-gateway"
122 |         >https://github.com/bneijt/ipfs-video-gateway</a
123 |       >
124 |     </p>
125 |   </div>
126 | </template>
127 | 
128 | <script>
129 | export default {};
130 | </script>
131 | 


--------------------------------------------------------------------------------
/src/IpfsVideo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="block">
  3 |     <h1 class="title">{{ title }}</h1>
  4 |     <video ref="video" controls muted autoplay />
  5 |     <p class="has-text-right">
  6 |       <small>{{ status }}</small>
  7 |     </p>
  8 |   </div>
  9 |   <div class="block">
 10 |     <path-form />
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import { useMeta } from "vue-meta";
 16 | import { useRoute } from "vue-router";
 17 | 
 18 | // MP4 mime info: https://gist.github.com/jimkang/f23ce12c359c7465e83f
 19 | const V_VP8 = new TextEncoder().encode("V_VP8"),
 20 |   V_VP9 = new TextEncoder().encode("V_VP9"),
 21 |   V_AV1 = new TextEncoder().encode("V_AV1"),
 22 |   A_OPUS = new TextEncoder().encode("A_OPUS"),
 23 |   A_VORBIS = new TextEncoder().encode("A_VORBIS"),
 24 |   A_MP4A = new TextEncoder().encode("mp4a"),
 25 |   V_AVC1_42E01E = [0x42, 0xe0, 0x1e],
 26 |   V_AVC1_640032 = [0x64, 0x00, 0x32];
 27 | 
 28 | function isSubsequenceOf(subsequence, offset, data) {
 29 |   return subsequence.every(function (value, index) {
 30 |     return value === data[offset + index];
 31 |   });
 32 | }
 33 | function containsSubsequence(needle, haystack) {
 34 |   var startIndex = haystack.indexOf(needle[0]);
 35 |   do {
 36 |     if (isSubsequenceOf(needle, startIndex, haystack)) {
 37 |       return true;
 38 |     }
 39 |     startIndex = haystack.indexOf(needle[0], startIndex + 1);
 40 |   } while (startIndex > 0);
 41 |   return false;
 42 | }
 43 | function findFirstSubsequence(needles, haystack) {
 44 |   for (let needle_name in needles) {
 45 |     if (containsSubsequence(needles[needle_name], haystack)) {
 46 |       return needle_name;
 47 |     }
 48 |   }
 49 |   return undefined;
 50 | }
 51 | 
 52 | function mimeCodecFor(blob) {
 53 |   //See also https://www.garykessler.net/library/file_sigs.html
 54 |   // mime, offset, magic bytes
 55 |   var container = "video/webm",
 56 |     codecs = "";
 57 |   const mimes = [
 58 |       ["video/mp4", 4, [0x66, 0x74, 0x79, 0x70, 0x4d, 0x53, 0x4e, 0x56]],
 59 |       ["video/mp4", 4, [0x66, 0x74, 0x79, 0x70, 0x69, 0x73, 0x6f, 0x6d]],
 60 |       ["video/mp4", 4, [0x66, 0x74, 0x79, 0x70, 0x6d, 0x70, 0x34, 0x32]],
 61 |       ["video/webm", 0, [0x1a, 0x45, 0xdf, 0xa3]],
 62 |     ],
 63 |     firstChunk = blob.slice(0, 0x3b0);
 64 | 
 65 |   for (const match of mimes) {
 66 |     const name = match[0],
 67 |       magicBytesOffset = match[1],
 68 |       magicBytes = match[2];
 69 |     if (isSubsequenceOf(magicBytes, magicBytesOffset, firstChunk)) {
 70 |       container = name;
 71 |       break;
 72 |     }
 73 |   }
 74 | 
 75 |   //Sniff codecs
 76 |   if (container == "video/webm") {
 77 |     const video_formats = {
 78 |         vp8: V_VP8,
 79 |         vp9: V_VP9,
 80 |         av1: V_AV1,
 81 |       },
 82 |       audio_formats = {
 83 |         opus: A_OPUS,
 84 |         vorbis: A_VORBIS,
 85 |       };
 86 | 
 87 |     codecs = [
 88 |       findFirstSubsequence(video_formats, firstChunk),
 89 |       findFirstSubsequence(audio_formats, firstChunk),
 90 |     ]
 91 |       .filter((i) => i !== undefined)
 92 |       .join(", ");
 93 |   } else if (container == "video/mp4") {
 94 |     const video_formats = {
 95 |         "avc1.42E01E": V_AVC1_42E01E,
 96 |         "avc1.640032": V_AVC1_640032,
 97 |       },
 98 |       audio_formats = {
 99 |         "mp4a.40.2": A_MP4A,
100 |       };
101 |     codecs = [
102 |       findFirstSubsequence(video_formats, firstChunk),
103 |       findFirstSubsequence(audio_formats, firstChunk),
104 |     ]
105 |       .filter((i) => i !== undefined)
106 |       .join(", ");
107 |   }
108 | 
109 |   if (codecs.length > 0) {
110 |     return `${container}; codecs="${codecs}"`;
111 |   }
112 |   return `${container}`;
113 | }
114 | 
115 | async function loadIpfsPath(videoElement, ipfs, path, errorHandler) {
116 |   var mediaSource = new MediaSource();
117 | 
118 |   mediaSource.addEventListener("sourceopen", onMediaSourceOpen);
119 | 
120 |   async function onMediaSourceOpen() {
121 |     try {
122 |       for await (const file of ipfs.get(path)) {
123 |         if (file.type == "dir") {
124 |           errorHandler("This points to a directory", "ls");
125 |           return;
126 |         }
127 |         if (!file.content) {
128 |           errorHandler("Given path does not point to a file");
129 |           return;
130 |         }
131 |         var firstChunk = await file.content.next();
132 |         var mimeCodec = mimeCodecFor(firstChunk.value),
133 |           sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
134 | 
135 |         console.log("Detected mime codec: ", mimeCodec);
136 |         if (!MediaSource.isTypeSupported(mimeCodec)) {
137 |           errorHandler("Your browser does not support " + mimeCodec);
138 |           return;
139 |         }
140 |         sourceBuffer.addEventListener("abort", function (ev) {
141 |           errorHandler(ev);
142 |         });
143 |         sourceBuffer.addEventListener("error", function (ev) {
144 |           errorHandler(ev);
145 |         });
146 |         sourceBuffer.addEventListener(
147 |           "updateend",
148 |           onUpdateEndContinue(file.content)
149 |         );
150 |         sourceBuffer.appendBuffer(firstChunk.value);
151 |       }
152 |     } catch (err) {
153 |       errorHandler(err);
154 |     }
155 |   }
156 |   function onUpdateEndContinue(asyncIterableContents) {
157 |     return async function appendNext(ev) {
158 |       var sourceBuffer = ev.target,
159 |         chunk = await asyncIterableContents.next();
160 |       if (chunk.done) {
161 |         sourceBuffer.removeEventListener("updateend", appendNext);
162 |         mediaSource.endOfStream();
163 |       } else {
164 |         try {
165 |           sourceBuffer.appendBuffer(chunk.value);
166 |         } catch (exp) {
167 |           if (exp.name == "QuotaExceededError") {
168 |             // Quota exceeded, remove some data
169 |             function removeData() {
170 |               const dropTill = Math.max(1, videoElement.currentTime - 5);
171 |               console.log("Dropping buffer till", dropTill);
172 |               sourceBuffer.addEventListener("updateend", appendNext);
173 |               sourceBuffer.remove(0, dropTill);
174 |             }
175 |             setTimeout(removeData, 5000);
176 |             sourceBuffer.removeEventListener("updateend", appendNext);
177 |           } else {
178 |             //Other issue, or video element already hidden/stopped
179 |             console.error("Failed to append video buffer.", exp);
180 |             errorHandler(`Failed to append video buffer: '${exp}' `);
181 |             sourceBuffer.removeEventListener("updateend", appendNext);
182 |           }
183 |         }
184 |       }
185 |     };
186 |   }
187 | 
188 |   return mediaSource;
189 | }
190 | 
191 | function extractMeta(route) {
192 |   if (route.params.ipfsPath !== undefined) {
193 |     const titleValue = route.params.ipfsPath[route.params.ipfsPath.length - 1];
194 |     return {
195 |       title: titleValue,
196 |       description: `IPFS video player playing '${titleValue}'`,
197 |     };
198 |   }
199 |   return {
200 |     title: "IPFS video player using js-ipfs",
201 |     description: "IPFS video player using js-ipfs",
202 |   };
203 | }
204 | 
205 | export default {
206 |   inject: ["ipfs"],
207 |   setup() {
208 |     const route = useRoute();
209 |     useMeta(extractMeta(route));
210 |   },
211 |   data() {
212 |     if (!window.MediaSource) {
213 |       return {
214 |         status: "No Media Source API available, you can't use IPFS directly.",
215 |       };
216 |     }
217 | 
218 |     return {
219 |       status: "Initializing...",
220 |     };
221 |   },
222 |   mounted: function () {
223 |     this.openVideo();
224 |   },
225 |   unmounted: function () {
226 |     if (this.closeVideo !== undefined) {
227 |       this.closeVideo();
228 |     }
229 |   },
230 |   computed: {
231 |     title: function () {
232 |       return extractMeta(this.$route).title;
233 |     },
234 |     ipfsPath: function () {
235 |       if (this.$route.params.ipfsPath !== undefined) {
236 |         return this.$route.params.ipfsPath.join("/");
237 |       }
238 |       return "";
239 |     },
240 |   },
241 |   watch: {
242 |     ipfsPath(newPath, oldPath) {
243 |       if (newPath !== undefined && newPath.length) {
244 |         if (this.closeVideo !== undefined) {
245 |           this.closeVideo();
246 |         }
247 |         this.openVideo();
248 |       }
249 |     },
250 |   },
251 |   methods: {
252 |     async openVideo() {
253 |       const component = this;
254 |       try {
255 |         const ipfs = await this.$ipfs,
256 |           ipfsPath = this.ipfsPath;
257 | 
258 |         const { agentVersion, node_id } = await ipfs.id();
259 |         this.status = "Loading";
260 | 
261 |         videoElement = this.$refs["video"];
262 |         var mediaSource = await loadIpfsPath(
263 |           videoElement,
264 |           ipfs,
265 |           ipfsPath,
266 |           function errorHandler(msg, reroute) {
267 |             component.status = `Failed to use IPFS directly: ${msg}`;
268 |             if (reroute !== undefined) {
269 |               component.$router.push(`/${reroute}/${ipfsPath}`);
270 |             }
271 |           }
272 |         );
273 |         if (mediaSource !== undefined) {
274 |           component.closeVideo = function closeVideo() {
275 |             //TODO nicer clean-up and close, including disabling handlers
276 |             if (mediaSource.sourceBuffers.length > 0) {
277 |               mediaSource.removeSourceBuffer(mediaSource.sourceBuffers[0]);
278 |             }
279 |           };
280 |           videoElement.src = window.URL.createObjectURL(mediaSource);
281 |           mediaSource.addEventListener("sourceended", function sourceEnded() {
282 |             component.status = "Media source ended";
283 |           });
284 |           mediaSource.addEventListener("sourceclose", function sourceClose() {
285 |             component.status = "Media source closed";
286 |           });
287 |           mediaSource.addEventListener("sourceopen", function () {
288 |             URL.revokeObjectURL(videoElement.src);
289 |           });
290 |         }
291 |       } catch (err) {
292 |         // Set error status text.
293 |         this.status = `Error: ${err}`;
294 |       }
295 |     },
296 |   },
297 | };
298 | </script>
299 | 


--------------------------------------------------------------------------------