Video Streaming

Integration guide for DDC Video Streaming

There are a bunch of ways to stream video from DDC:

Stream video using the direct link via browser, native HTML <video> tag, or Media SDK
Stream video permissioned by the NFT ownership via Media SDK

More information on how both use cases work can be found here.

1. Stream video using a direct link via browser, native HTML `<video>` tag, or Media SDK

Upload video to DDC

To upload the video file you need to pass the onboarding in the Cluster Management and create a bucket.
Assuming you already have a bucket and account, you need to prepare the JSON file ddc.config.json with the configuration:

Testnet:

{

"signer": "YOUR MNEMONIC HERE OR path to wallet key",

"clusterId": "0x825c4b2352850de9986d9d28568db6f0c023a1e3",

"bucketId": "Your bucket ID",

"blockchainRpc": "wss://archive.testnet.cere.network/ws",

"logLevel": "info"

}

Mainnet:

{

"signer":"YOUR MNEMONIC HERE OR path to wallet key",

"clusterId": "0x0059f5ada35eee46802d80750d5ca4a490640511",

"bucketId": "Your bucket ID",

"blockchainRpc": "wss://rpc.mainnet.cere.network/ws",

"logLevel": "info"

}

Now you can use the terminal command below to upload the file:

npx @cere-ddc-sdk/cli@latest --config=ddc.config.json upload "video-samle.mp4"

Once the file is uploaded you will see the metadata:

File upload completed

Network: testnet

Bucket ID: 101061n

Path: video-samle.mp4

CID: baebb4ibg7dutnehizvyhx2pv65eozejvduc277gf5fhuykdwlgxwza32sq

Now you can construct the URL:

Testnet:

https://cdn.testnet.cere.network/<YOUR_BUCKET_ID>/<YOUR_CID>

Mainnet:

https://cdn.dragon.cere.network/<YOUR_BUCKET_ID>/<YOUR_CID>

‍

Stream video using a direct link via the browser

Stream this video directly in the browser - just insert it to the browser, and you should be able to see the Video streamed directly from DDC.

‍

Stream video using native HTML `<video>` tag

Insert the code below to your HTML page:

Testnet:

<video src="https://cdn.testnet.cere.network/<YOUR_BUCKET_ID>/<YOUR_CID>"></video>

Mainnet:

<video src="https://cdn.dragon.cere.network/<YOUR_BUCKET_ID>/<YOUR_CID>"></video>

‍

Stream video using Media SDK

Install Media SDK to your project:

npm install @cere/media-sdk-client @cere/media-sdk-react --save

Add the code below to your ReactJS application to stream the video:

import {VideoPlayer} from '@cere/media-sdk-react';

import React from 'react';

export const DummyComponent = () => {

// ...

return (

// ...

// ...

);

};

2. Stream video, permissioned by the NFT ownership

First of all, you need to Mint NFT and upload the content.

Open Freeport Creator Suite. Select NFT minter and Creator Suite.

You need to have a Metamask extension at this point, to proceed.

In the top right menu: My Account → Mint NFT.

First, you need to mint Collection and then - enter your NFT information and attach the video file:

After the token is minted and the file is processed and stored in DDC, let’s integrate with the Media SDK:

Install the media SDK, using command below:

npm install @cere/media-sdk-client @cere/media-sdk-react --save

You need to wrap your ReactJS application with the provider:

const signer = // an ethers compatible signer instance: https://www.npmjs.com/package/ethers

const options = { tenant: "davinci", deployment: "production" }

// your application

</MediaSdkClientProvider>

Then you can use the Encrypted Video Player to stream the video:

import {EncryptedVideoPlayer} from '@cere/media-sdk-react';

import React from 'react';

export const DummyComponent = () => {

// ...

const collectionId = '...'; // Your collection ID, that can be taken from Freeport Creator Suite

const nftId = ...; // Your NFT ID, that can be taken from Freeport Creator Suite

const url = '...'; // Your asset URL, that can be taken from Freeport Creator Suite

return (

// ...

<EncryptedVideoPlayer

src={url}

collectionAddress={collectionId}

nftId={nftId}

// ...

);

};

You also can use Cere Wallet to create a signer instance for the Encrypted Video Player. Check this guide.

Video Streaming

Integration guide for DDC Video Streaming

1. Stream video using a direct link via browser, native HTML <video> tag, or Media SDK

Upload video to DDC

Stream video using a direct link via the browser

Stream video using native HTML <video> tag

Stream video using Media SDK

2. Stream video, permissioned by the NFT ownership

1. Stream video using a direct link via browser, native HTML `<video>` tag, or Media SDK

Stream video using native HTML `<video>` tag