Livepeer 🛠 Building the Web3 Creator Economy

foreign [Applause] [Music] and I'm the co-founder and CTO at lifebeer today we're going to talk about building the web 3 Creator economy this is a topic that you know I've been thinking about for a while now back in 2015 I was a part of the team co-founder that built this app called wildcard wildcard was named one of the best apps in the App Store in 2015 and for this app it really got got me interested in the idea of content creation and content consumption back then mobile was you know still just emerging and we really saw from kind of a builder's perspective the challenges and the interesting trends that came with building a consumer facing and content creation application and since 2017 we've been building Life Care well life here is the world's open video infrastructure uh and at life here we observe many video applications and a lot of these applications are in the Creator economy for example beam is an application that started out in the film industry that helps filmmakers really showcase their work and since then they have expanded to other types of content like like video streaming for live streaming and as well as creating a video gallery for creators bonfire is another example that helps Creator move from a web through to web3 really around it's really around this idea of building a community and building a fan base for yourself a live peer is also very popular in the lens ecosystem helping applications like lens tube or orb power video streaming features so this is a topic that you know we've been thinking about for a long time and and as well we've also been putting on events and content series with the goal of convening builders that really care about this topic as much as we we do to come and talk about each of this topic with each other and educate each other for example we hosted the uh the community Summit around a Creator economy on the summit at uh if Denver uh and and it was sponsored by polygon and bundler and had really we had really great conversations there so um for East Tokyo life here has some exciting prices I want to get that out of the way first there's a total of five thousand dollar of price uh all going towards applications that are building web 3 Creator economy apps we have twenty five hundred dollars for the best token gated video streaming application we have fifteen hundred dollars for the best video nft applications and we have a thousand dollars for the best integration of live peer with another web through technology in the consumer space life peer is the world's open video infrastructure it is the decentralized network that's consisted of many nodes around the world and all coordinated by a protocol that runs on the ethereum layer 2 blockchain it contains many video specific features and today we'll take a look at some what some of those features are so here we are at live peer Studio which is the Gateway service quarter life here Network if we go to the dashboard and we'll see there are a few different sections let's go into the assets section in the assets section is where I can see all the video assets that have been uploaded before for example I can go in here and look at a video file that just has been uploaded I can come back here and upload a video asset I can just go back here and choose one of the video assets that I have that I have picked for example this waterfall video that you know we just saw and here it'll be uploading while the video is uploading and processing let's take a look at some other features here we have the streams feature and here is where we can go live in part of the audience let's go into this section and see here is all the stream information and let's try to go live right now we'll go to restream.io which is a popular in browser live streaming application and of course you can also use applications like OBS or any mobile app that allows you to send out any rtmp collection so now we're in the restream studio we're going to copy the interest URL into this custom rtmp section and use our stream key which identifies uniquely the stream that we're about to ingest so now that's it I can go live in front of an audience and as this stream goes live in a few in a few seconds we'll be able to see the stream so let's go back here and see you know stream is currently offline it will become a line in a minute here down here we have the playback URL which is which represents the this stream here we can for example share the video stream either in the embed code or simply by through a URL that we can share with anybody else and this is simply just a video player that's embedded in the web page so now with that stream being live let's go back to the video that we just uploaded this waterfall video uh we see you know it's because you can play back you can scrub around uh and again you can uh you can even download the source file and again you can share copying a link and we have this video in a browser we can also export this video into ipfs if we want so you know here here are the two big um big core features of Life beer right around video on demand streaming without assets and video live streaming we call uh sessions and then streams but let's go back and take a look at what other features life peer provide that's web 3 native and specific to especially to the hackers out there well around the video on demand you can actually mint video based nfts or Collectibles we all know that you know when you mint nfts these these data assets should be stored on decentralized storage but you know there are challenges especially around scalable performance when you're trying to stream video to a global audience so here you can almost think of Life peer as a video optimization layer that sits on top of the decentralized storage networks that allows you to still upload video assets into these networks uh it can be gigabytes of videos and still use the same CID or content hashes that you get back from these uh these storage networks and mint your nfts but simply pass that address or that hash to the live pair player and live peer player will be able to upload the video transcode it and process it and cache it around the world and make sure that video file can be streamed around the world you can also do token getting access control of a video right using nft ownership to decide who gets to watch the video for example and these videos are all optimized for any kind of format so whether it's short form content long form content whether it's mobile Centra consumption or desktop Centrix assumption let's take a look at some of the documentation that allows us to to build these types of apps so we'll go to the documentation section uh we'll go to the guides here are the developer guides we can see here's a the example of how we can upload videos video assets using the live peer SDK which is a react hooks xdk that you know may look a little similar to something like a wag me from people who are familiar with kind of web3 sdks here is an example of how to Mint a video based nft uh and and even example around how to play the video back directly from ipfs and still maintain really great kind of string and performance for for live streaming uh we we see sometimes people build the live streaming and nft drops at the same experience right for example rewarding your viewers for being at your live stream watching it by dropping nfts to the people who have linked their wallets we also see of course access control and token gating around live streaming and a lot of people build mobile or desktop applications for for live streaming so we can also go back here and look at some of the live streaming specific documentation here's how you can create a live stream uh you can of course play back a live stream just in the same way that you would play back a video on demand string here's how you can add a player video player into your application here's you can do how you can do access control for your live stream another useful section in the live pair developer docs is the example application section here you can see a number of example apps if you're building for example a nft video based nft app you can check out this decentralized storage playback example that are or devrel suhail has built we've recently launched a really exciting feature around token gated video so I'm just going to and always built a example application to kind of show show off how this works let me show you really quickly here we're uploading a video file but at the same time we're also selecting a wallet that has all it has access to this video and only that wallet has access so as we upload and it's videos getting processed once that's complete uh we'll go and try to watch this video and of course now since we've already connected our wallet you can see this is we're able to watch this video because we have connected the wallet that's allowed to watch and as we switch over to a different wallet uh you will see that the wallet address change when we try to watch the video no we're not able to access so here is the GitHub repo for that demo application that we just saw you know with all the example code here and you know kind of how they get started if you wanted to you can you know just go to GitHub and search for live peer Dash token Dash gated Dash VOD and if you search for this you will get to this page so with that demo out of the way let's talk about what we're here to talk about today which is the creator economy um so for those who are maybe not as familiar with the Creator economy this is a big Trend that has been evolving in the last you know four or five years uh what we're really seeing is uh the type of content that we're consuming the type of Engagement that were they were engaging on the internet starting to shift uh from a uh from kind of a traditional rails to this new economy right so here are examples like um the consumers are Desiring to watch content uh back then it was you know the MIT open course or TV channels today on the internet is really about master classes or um or influencer content right but at the end of the day the creators are really trying to do a few things on the internet right one is to entertain right uh here is um here here's this is the footage from one of the largest uh virtual concerts in the world um and and these creators um of course are well-known super um super famous have lots of lots of fans uh from around the world um the other the other thing that creators try to do on the Internet is to educate right so here's um Salman Khan who is the founder of Khan Academy which is one of the most popular kind of education platforms nowadays started out as a YouTube channel and the third thing the creators are trying to do is to build a community on the internet right so here is we can see influencers turning into uh big Brands e-commerce brands that all revolve around community-based e-commerce the size of the Creator economy is enormous and growing quickly despite uh the covet slowdown of all other parts of the economy in the world in 2021 the market size was about 56 billion and it's estimated that in 2024 it will grow to 24 billion and this um you know this world encompasses many different areas right uh whether it's Esports whether it's education podcasting uh or mobile game creation um in the the number of um the number is quite large but if we look at actually the types of platforms that that the creators are on we'll see that you know a lot of the creators are actually just um just on YouTube right so YouTube is by far the the biggest winner here although there are many emerging uh platforms that are coming up and trying to compete so so we know that you know the the opportunity in the greater economy is quite big but there are also lots of challenges that comes with this it's very hard to break out as a creator so there was a research that was done by the tilt and it was found that content entrepreneurs usually average nine months just to see their first dollar and they average about 26 months until they're able to earn enough Revenue to support one person now that's a long time for someone to be able to just make a living all right so that that that's probably the biggest challenge before Creator these days um and the other challenge is that they don't really have control of Their audience right oftentimes creators are creating content on platforms like Facebook or or twitch where they're really at the mercy kind of at the at the algorithm right there this was a a survey that was done by that by patreon and it was found that most creators actually feel they're screwed by large Tech platforms and their algorithms 70 percent of the creators that they surveyed feel that the social media platforms are putting them at a disadvantage but also at the same time 60 say that they're reliant on those platforms to Showcase their work so that's quite a discrepancy right they feel that they're not being well served but at the time at the same time also later with Lion on the platforms that that they're on and and it's a very um unfair system right from what we see here sub stack is actually the the most Fair um kind of the most Fair system in terms of the average uh Revenue per uh per year per creator that have about 25 000 which is fairly low uh but if you look at the long tail um YouTube for example the largest Creator platforms um is on average creators make you know 15 cents per year right of course you know these are you know uh not and not every one of them is professional but what we see over time is that um about about the top one to five percent of the of the creators end up meeting over 90 of all the profits and so what are the causes of all these challenges right it's hard to break out creators feel like they don't have control um the um the the the revenue distribution is very unfair well most of it it's caused by a few facts a few factors in combination one is that many of these platforms are advertising driven right so here what we see is the the advertising Revenue growth on YouTube which has been very very strong uh so so they're incentivized to continue to grow this number uh at basically any cause and the second is the way that these algorithms work right so they they optimize basically for engagement because um because in order to maximize advertising Revenue they need to get people to spend as much time on these platforms as possible so how do they do that they um there's a few questions um you know the off the the algorithm optimizes for whether someone will click on your video whether someone will watch out your video and whether someone will engage with your video and what happens here is most creators end up actually spending most of their time optimizing their content for the algorithm that that their content is on instead of creating good content that actually that actually resonates With Their audience it says they don't really own Their audience anyways um and at the same time because these large networks have been around for a long time and they have built up such a strong Network effect right all of the users are on there um and people are what people are looking for Content all the creators on on their people are creating content it's very difficult to break to break that Network effect and to compete with them right so what happens over time is a lot of these platforms become pretty stagnant and they don't really innovate as much and the feature sets are kind of just the same right um and so all of these things in combination cause these challenges so in in web 3 we actually have an opportunity to to create a new wave of Technology so what we see here is that you know kind of the evolution from of the different eras of web technology or communication technology right in web one we're mostly in a read-only static content type of world uh web 2 we start to move towards more Dynamic content sharing social media podcasting right messaging all these application formats start to emerge and in web 3 we're really moving towards a blockchain based technology key technology core layer with communities and individuals at the center of this with Dynamic content like videos or blockchain based primitive like nfts or even metaverses and the interaction model is really around services and ownership of the content and this presents a lot of really interesting opportunities I'm going to talk about a few of these opportunities for example um one of the one of the big shifts that's happening is um blockchain is enabling us to move from a consumer app Centric world to a uh and to turn these consumer apps into kind of economic games right for example um nfts now can be used as a tool for pre-registering for a for an application or for a community and and this is actually becoming a lot more effective than just a sign up form because the expectation is that as you participate in an fft drop or nft mint you actually have the opportunity to become a partial owner of the you know the application or the community that's being that's being formed um and and as people start to do these pre-registering pre-registration around nfts uh the second steps uh usually revolve around content marketing to further build community um Community Support right so now we have you know a number of people that participated in the nft mint the second step is to create a dynamic dynamic Community that's that's strong with lots of activity so traditionally you know that's been done on crypto Twitter or Discord or telegram but you know we have a whole new wave of platforms that's emerging around web free social with protocols like lens or firecaster or cyber connect and these are all this is all very fertile ground for application developers to think about how can they leverage these new emerging ecosystems to really help communities to form and and to create connect for the individuals in these communities to create connections with one another um and finally we have these kind of nft factories concept right what does that mean it really is really around um kind of continued drops of nfts right so board ape to mutant board Abe is a really good example right um so board Abe's work out the first sets of 10 000 nfts and mutants were the second set um that you know kind of were um and and and I think the second set um if you own the first set then you get priority into the second set and there's kind of mechanics around how you can do this I'm going to best practice but industry best practices actually for a a Creator you don't want to do more than five or six per year right kind of for your community to really uh get get along with it there's also interesting mechanisms like token getting you know we talked a little bit about before for example for example Stoner cats is a the first nft animated series collection right so you can only access the Animated Series uh if you own the nfts and it is created by Mila Kunis in an Ashton Kutcher these are kind of um you know Hollywood uh celebrities another example that I personally really like is the UFO club and this is this is a you know a pod save a podcast series uh but you can you can collect these content you can do an ft mint and they kind of reward their Community through these interesting game mechanics and and a team mechanisms um what I want to leave you with today is that you know the nft the internet is about 80 percent video right so as we think about building web 3 applications that are actually will be used by consumers on a daily basis uh we the video really comes to mind right and why is that well it's because video is engaging it's educational it's Illuminating and it's empowering uh so I would really recommend you checking out live here as you build you're building your um your hacks uh here again I will share the on the resources here you can go to the live peer documentation and go to the guides section to really take a look at what kind of applications you can build and the other thing that you can do is to come to join our Discord just click on this link um you can you can go to the builders help section and our team will be there supporting you through the hackathon and Beyond and right now I want to pass it over to our devrel engineer suhail who will be giving you a tutorial on how to build a simple video streaming application with life peer in this Workshop we will be using live pure JS which is the JavaScript key for live view at mixed building where the library very easy if your project is not made to it the react framework you can easily use a live pure API the rest API where I can use it on any language or framework you want and yeah so now for the light bill GS the first thing you need to set up an xgs application which we'll be doing now and then installing the Library so you can open up the terminal and then go to directory which you want to add create the application in my case I'm going to desktop and here we can create npx create a next application Live pure app and this will create the next gif application if you don't want to attack script and we work with efflint until the next application is completed and you want to also go to live residue to create an account and get an API and yeah you've got your home here you should see a sign up button here you can go ahead and sign up with your email and password at the thousand transcoding minutes is completely free so you don't need to pay for the first thousand minutes but once you come here you will see the dashboard then you can go to developers here and click on create an API key and give the API key a name and my case is going to be fvm Workshop you can also allow chords if you want but it is not necessary if you're not using it on your front end once you have it you can grab this API key favor some places because you will be needed selector now coming back here the Nexus application is installed and now we can go to the next JS directory that is a live pure app and install live pure package here we can also open the application into vs code but you can use any other record editor that you prefer yep the live peer package is now installed and yeah so the BC would be to follow the live peer guide and from here you have everything on how to set up in your Nexus application and the first thing that you'd want to do with any client go here in the pages and then in spite of app.js you can create cons clients is equals to battery AC client and finally and you need to put your residue apk here you also need to import react client and Studio provider and also live pure config from adlife Pure flash react and at last we need to wrap our application with the live pure config we can do it like this and finally bring this component here save it and yeah that's it now the live viewer is basically integrated into our application and now we can use live peer into our next GF application so the first thing that you would want to do is with opening the terminal and run your own div in order to store the next JS application and then you can go to localhost 3000 and yeah this is a sample link.js application which we'll be using now to alarm our live feeder good and twist so you'd want to clean up this code completely and just have it H1 maybe watch Pure app yep that first you can also remove the samples from here for now you can also remove the styling oh yeah we can keep it for now but yeah we have the live feeder app here so let's go back to the styling and now in order to test whether the live viewer is successfully integrated or not we can just use a user set to check if everything is accessfully integrated or not now we can say use asset hook and here you need to put the asset ID once you have upload an asset whether through the API or residue or also SDK you will get the asset ID and then we can use that one to fetch the asset here in my case I want to fetch this asset this is the ID of it or even you can use this one and here we need to put this here and finally we can just click console.log asset or we can just print it here let's do it here listen Dot ringify asset and if you come back to the application you can see it's printed here this is the ID of method the hash the how it was uploaded when it was created and finally the playback URL so it means that we have successfully integrated live pure JS into our application so now we'll go to on how you can upload a video to the live tier and for that we would be using use create which is very similar to Muse asset and use create assets so here you can import use create effort from atlifebeer react and here we can name from asset input type is going to be text and then place order and turn the name and here also we can create a few States in order to save the value from the input we can give it name set name is equal to u50 make sure to import uses it from react and here we are going to also have another input and this is going to have a type file and it's going to accept the video and finally we can also put the on change here that once the person has selected the video we can get the file and set let's create one more here const video set video use the set and here we can say set video file we also put other on change here in order to save the value of the input to that state once it is in it should look like this for now we are going to focus much from The Styling here a simple styling should work imagine life and and finally here we need to add a button that would be create asset that should work and here we can say on click handle upload and here we can come here and create a new function pods handle upload a little bit and yeah that's it we have declared a few States here for name and for the file a function that would be used to handle the midi upload and finally to input components and one better and for though we can console.

log both the name and video to see if both of them is saved successfully and once we have that one you would be using use create asset so here I'm going to type it something and choose a video file click on open and create access you can see we have both the name and file which means it's working fine and now we have to use the use create asset we can add it here and if it counts is equals to use create effort and inside of Youth create asset we can pass the video so we can see if there's a video we would want to pass sources it should be in the form of array and you can also upload multiple videos if you want in our case we just want to upload one video we can say name is going to be the name and finally file is equal to video and name video is not there there we can just render now and inside of here we can add create asset we can get the data from it once asset is uploaded we can also get a status we can get a progress and finally error if there's any and finally now on the handle upload we can call the create asset function now let's refresh this page let's give it the name for example this video click on choose file upload the video which you want and then click on create asset and now this should create an asset for f now let's come back to the live peer Studio go to asset you can see this is a test video which the video is currently processing but it means that the video is now uploaded to the live viewer and yeah that is how you would want to upload a video to the live peer and then the live prgs documentation you can also go through different examples with different hooks such as you've assets metrics use update asset and lots of different options and yeah that was the example of how you want to upload the video to the live peer and just have one more example on how you can play a video that's already stored into ipfs using live PF player so live pair private player provides easy to use a component to display boot video and audio as linked to be very easy so let's first remove all of the code which we have already here but yeah this is the code which you want to use for uploading the video which we have seen here anything you can see the video is also now uploaded and it can be playable the video which I've uploaded is a very bad quality because I just wanted to upload it very faster but you can upload anything you want this was just an example video yeah now in order to use the player we can just remove this old code here and just add a Dev tag and inside of this you can add player from and this player would be imported from at lifebeer slash react and now in this foot player you can play a asset which is already stored on live prcd you can play ipfs hash you can play from our with transaction hash and from other places so if in this example maybe we have this video if we can play it using the playback ID so here we can just give it a playback ID and then put the playback ID here we can also give it some stylings names team Etc but for now we can ignore that one so let's come back here and now you can see we have the video player and if we click on play it should now play the cat with you which we see here and yeah let's play now just to make it let's make it a little bit smaller or we can say Style what to eat probably 70 percent and yeah that's fine and this is the live pure player and now the asset which we are currently playing has already stored to the live pure Studio but if you want you can also pass here ipf hash and that should also work for example it will be ipfs. and here you would want to put the ipff hash it does not depend whether your video store it on the ipfs or like W3 storage or any other places it would automatically play for example if you go to this storage and here we have a few videos I've stored in both IP profanity for example this is the video I can just copy the ipff hash here and come back to our application and put the ash here save it and now if we come here basically the video should play and yeah let's play it on yep you can see the video gets played and you can also play and yeah that's it thank you very much but yeah this is a pre-recorded wardrobe if you have any questions or anything feel free to DM me on Discord or join us the like live pure Discord and that on the CD support