Learn how to upload and play back videos on IPFS using Livepeer
@livepeer/react
, library which we will use to
integrate Livepeer:
tailwindcss
, postcss
, and autoprefixer
dependencies. These dependencies are
necessary for TailwindCSS to work properly in a Next.js app.
Run the following command to install them:
tailwind.config.js
and postcss.config.js
. These files contain the configuration for Tailwind CSS
and PostCSS, respectively. Next, open the tailwind.config.js
file in code
editor of your choice and replace its contents with the following code:
./styles/globals.css
file.
pages/index.js
file, with below code.
npm run dev
to start the next.js app and you should see
a similar page.
client
in
the root directory, and add the following code to index.js
YOUR_API_KEY
with the key which you just copied from
the Livepeer dashboard. And also replace the code inside of _app.js
in the
page directory with the below code.
Button.js
. Add the below code to it.
pages/index.js
file, import the Button component and add it below
the p
tag. This is how your file should look like
useCreateAsset
from the @livepeer/react
and add the hook to
the index.js file.
uploadAsset
function and save the files. You can now choose and
upload videos to Livepeer.
useUpdateAsset
hook from
Livepeer React or Livepeer Studio’s REST API. In this tutorial we will be using
the Livepeer React hooks.
Import the useUpdateAsset
hook from the livepeer.js and add it after the
useCreateAsset