https://github.com/livepeer/video-nft-sample
https://github.com/livepeer/video-nft-sample
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/livepeer/video-nft-sample
- Owner: livepeer
- License: mit
- Created: 2022-04-14T04:30:36.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-29T18:23:24.000Z (over 3 years ago)
- Last Synced: 2025-06-30T02:49:06.545Z (12 months ago)
- Language: JavaScript
- Homepage: video-nft-sample.vercel.app
- Size: 44.9 KB
- Stars: 3
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Video NFT Sample
## Step 0. Installations
```bash
mkdir video-nft-sample
cd video-nft-sample
npm install init
```
### npm
```bash
npm install --save dotenv express http-proxy-middleware
```
or
### yarn
```bash
yarn add dotenv express http-proxy-middleware
```
## Step 1. Create an index.js
Make an index.js for an express server to run a proxy.
* Barebone Express App forwards the calls to the Livepeer API whilst injecting an API key:
* Make sure you have your API in your `.env` file
Code below is express server :
```js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const path = require('path');
const app = express();
require('dotenv').config();
const PORT = process.env.PORT || 3000;
const proxy = createProxyMiddleware({
target: 'https://livepeer.com',
changeOrigin: true,
headers: {
authorization: `Bearer ${process.env.LP_API_KEY}`
}
});
app.use('/js',express.static(path.join(__dirname, 'public/js')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '/public/index.html'));
});
app.get('/api/asset/:id', proxy);
app.get('/api/task/:id', proxy);
app.post('/api/asset/request-upload', proxy);
app.post('/api/asset/transcode', proxy);
app.post('/api/asset/:id/export', proxy);
app.listen(PORT);
```
## Step 2. Make a **index.html** adding video-nft cdn
* The index.html will contain ethers.js, video-nft sdk and tailwind.css
* tailwind.css to style the app
* ether.js to connet metamask wallet
* video-nft to mint the video being uploadedx
```html
```
## Step 3. Adding the logic for ui.js
The code implements the user interface in javascript this logic helps user to drag and drop the video to the uploader displaying a progress bar.
```javascript
let dropArea = document.getElementById("drop-area");
const videoSrc = document.querySelector("#video-source");
const videoTag = document.querySelector("#video-tag");
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
});
// Highlight drop area when item is dragged over it
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
});
function highlight(e) {
dropArea.classList.add('outline-[#00eb88]')
}
function unhighlight(e) {
dropArea.classList.remove('outline-[#00eb88]')
}
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults(e) {
e.preventDefault()
e.stopPropagation()
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.style.width = "0%";
uploadProgress = []
for (let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
progressBar.style.width = `${total}%`;
}
function uploadFile(file, i) {
updateProgress(i, 100)
}
async function handleFiles(files) {
console.log(files)
const file = files[0]
files = [...files]
console.log(files)
initializeProgress(files.length)
files.forEach(uploadFile)
if (files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
videoSrc.src = e.target.result
videoTag.load()
}.bind(this)
reader.readAsDataURL(files[0]);
}
}
```
## Step 4. Adding the logic for Video NFT SDK.js
The code has a function to mint your video nft to the `polygon testnet` mint
Make sure you are in a `polygon testnet` network to mint
```javascript
const apiOpts = {};
async function mintNft() {
const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
// Prompt user for account connections
await provider.send("eth_requestAccounts", []);
let ethereum = window.ethereum;
let chainId = window.ethereum.chainId;
const signer = provider.getSigner();
console.log("Account:", await signer.getAddress());
console.log(ethereum)
console.log(chainId);
const minter = new videonft.minter.FullMinter(apiOpts, { ethereum, chainId });
console.log(minter);
let file = document.getElementById('file').files[0];
let title = document.getElementById("title").value || "My NFT";
console.log(title)
console.log(file)
let asset = await minter.api.createAsset(title, file);
console.log(asset);
// // optional, optimizes the video for the NFT
asset = await minter.api.nftNormalize(asset);
console.log(asset)
const nftMetadata = {
description: 'My NFT description',
traits: { 'my-custom-trait': 'my-custom-value' }
};
console.log(nftMetadata)
const nftInfo = await minter.createNft({
name: title,
file,
nftMetadata
});
console.log(`minted NFT on contract ${nftInfo.contractAddress} with ID ${nftInfo.tokenId}`);
return nftInfo;
}
```
Optional:
if you want to deploy on vercel you will need the vercel.json file
```json
{
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
```
🎂 Congrats! You finished building an video nft uploader!