Back to all Developer Hub
The Decentralized Data Cloud (DDC) offers robust solutions for video streaming, catering to various use cases and integration needs. This comprehensive guide covers two primary methods for streaming video from DDC:
Each method has its strengths and use cases. Direct streaming is simpler to implement and suitable for open-access content, while NFT-gated streaming provides more control over content access, enabling new business models for creators and content platforms.
Before diving into the implementation details, ensure you have:
Let's explore each method in detail.
This method allows you to stream video content directly from DDC without any access restrictions.
Before streaming, you need to upload your video content to DDC. This process involves creating a configuration file and using the DDC CLI tool.
ddc.config.json:This configuration file is crucial for interacting with DDC. It contains your credentials and specifies which network and bucket you're using.For 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"
}
For 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"
}
Note: Replace "YOUR MNEMONIC HERE OR path to wallet key" with your actual mnemonic or the path to your wallet key file, which you can export from the Cere Wallet within the Developer Console. The bucketId should be the ID of the bucket you created in Cluster Management.
ddc.config.json file and your video, then run:npx @cere-ddc-sdk/cli@latest --config=ddc.config.json upload "your-video-file.mp4"
After a successful upload, you'll receive metadata including:
Save this information, as you'll need it to construct your streaming URL.
With your video uploaded, you can now construct the URL for streaming. The URL structure differs slightly between testnet and mainnet:
https://cdn.testnet.cere.network/<YOUR_BUCKET_ID>/<YOUR_CID>https://cdn.dragon.cere.network/<YOUR_BUCKET_ID>/<YOUR_CID>Replace <YOUR_BUCKET_ID> with your bucket ID and <YOUR_CID> with the CID you received after uploading.
For example, if your bucket ID is "101061n" and your CID is "baebb4ibg7dutnehizvyhx2pv65eozejvduc277gf5fhuykdwlgxwza32sq", your streaming URL would be:
Testnet: https://cdn.testnet.cere.network/101061n/baebb4ibg7dutnehizvyhx2pv65eozejvduc277gf5fhuykdwlgxwza32sq
Mainnet: https://cdn.dragon.cere.network/101061n/baebb4ibg7dutnehizvyhx2pv65eozejvduc277gf5fhuykdwlgxwza32sq
Now that you have your streaming URL, you can implement video playback using one of three methods:
<video> tag:<!-- For Testnet -->
<video src="<https://cdn.testnet.cere.network/><YOUR_BUCKET_ID>/<YOUR_CID>" controls></video>
<!-- For Mainnet -->
<video src="<https://cdn.dragon.cere.network/><YOUR_BUCKET_ID>/<YOUR_CID>" controls></video>
The controls attribute adds default video controls (play, pause, volume, etc.). You can further customize the video player with additional attributes or JavaScript.
npm install @cere/media-sdk-client @cere/media-sdk-react --saveimport { VideoPlayer } from '@cere/media-sdk-react';
import React from 'react';
export const VideoComponent = () => {
const videoUrl = "<https://cdn.testnet.cere.network/><YOUR_BUCKET_ID>/<YOUR_CID>";
return (
<div>
<h2>My DDC Video</h2>
<VideoPlayer src={videoUrl} />
</div>
);
};
The controls attribute adds default video controls (play, pause, volume, etc.). You can further customize the video player with additional attributes or JavaScript.
NFT-gated streaming allows you to restrict video access to NFT holders, enabling new monetization models for your content.
To implement NFT-gated streaming in your application:
1. Install the Media SDK
npm install @cere/media-sdk-client @cere/media-sdk-react --save
2. Set up the MediaSdkClientProvider:
Wrap your React application with the provider to enable SDK functionality:
import { MediaSdkClientProvider } from '@cere/media-sdk-react';
import { ethers } from 'ethers';
const App = () => {
// Create an ethers-compatible signer
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const options = { tenant: "davinci", deployment: "production" };
return (
<MediaSdkClientProvider signer={signer} options={options}>
{/* Your app components */}
</MediaSdkClientProvider>
);
};
Use the EncryptedVideoPlayer component to render your NFT-gated video:
import { EncryptedVideoPlayer } from '@cere/media-sdk-react';
import React from 'react';
export const NFTVideoComponent = () => {
const collectionId = '...'; // Your collection ID from Freeport Creator Suite
const nftId = ...; // Your NFT ID from Freeport Creator Suite
const assetUrl = '...'; // Your asset URL from Freeport Creator Suite
return (
<div>
<h2>Exclusive NFT Content</h2>
<EncryptedVideoPlayer
src={assetUrl}
collectionAddress={collectionId}
nftId={nftId}
/>
</div>
);
};
The EncryptedVideoPlayer will automatically check for NFT ownership before allowing playback.
Meet the Cere Community!
For further assistance or to connect with other developers, join the Cere Network community on Telegram or Discord.
Remember, DDC is continually evolving, so always refer to the official documentation for the most up-to-date information and best practices.