How to Stream Video from AWS (S3, Cloudfront, NextJS & Typescript)

[@rnair.98]

I like this approach. Instead of copying every step from a long from scratch to prod, these building blocks type videos give the viewers more agency in building their own projects.

[@CodingCrow]

exactly what i was going for 😁

[@happylearningtechcafe]

Thank you so much for the video, I was stuck on a very small thing on my cloudfront distribution, but then got it from yours! Great work, keep it up!

[@empathydoesnotexist1200]

your a life saver man, I was initially streaming the files to client and parsing he contents into a blob, which gave me some memory issues. CloudFront takes care of all of that :)

[@CodingCrow]

yeah cloudfront is super neat!

[@empathydoesnotexist1200]

@@CodingCrow if u don’t mind, can we have a discord call so I can ask you some questions?

[@NewEnglandInSeattle]

This is great! No BS just showing the process step-by-step. This was very helpful. Thank you!

[@garryknight7889]

Thanks for this video. it helped me to stream with AWS. You made it so easy as am a newbie with this.

[@CodingCrow]

thanks for the feedback! I tried to make it as simple as possible, glad you could follow along!

[@simplehonestmusic2261]

This was so helpful to me! and it totally worked for exactly the roadblock I was having in my project!! thank you!! Subscribed :)

[@glendagoitia3280]

Como hago si subo un video en Aws copio el enlace y quiero que este en mi pagina web de wordpress, salga la reproduccion automaticamente sin que el usuario le de play, lo monte se ve pero no se repruduce automaticamente. Gracias

[@soumyaranjanpadhy9363]

Loved your approach short and on point.

[@CodingCrow]

thank you, glad it achieved what i intended it to 😁

[@mayank_b]

Great tutorial. Just had one question. How can we show users different quality videos when streaming from AWS?

[@CodingCrow]

that should be an option based on what video player you’re using to deliver content on the frontend

[@Thirst_TV]

Hey back again! So I'm building my website, I want my videos to stay up forever. Is S3 suitable for long term if I want my videos up forever or can i transition to S3 glacier later? Watched one official AWS video about the video on demand workflow utilizing cloudfront and that along with your video reassured me that cloudfront is the software to go with. Now I'm trying to reconstruct Worldstarhiphop's website, so I expect many pages of videos. Is S3 ok to use now and later I can migrate everything, or should i only be using Glacier to start with? I think i heard the AWS guy say S3 Glacier was for long term storage, something i def think i need. Also, can cloudfront serve images too (for the thumbnails to the videos) that i store on the S3? and do you have a video on that or its pretty much the same process? Appreciate any and all insight. Thanks a lot! you're the best

[@CodingCrow]

So some quick research tells me that you’ll almost definitely want S3 for a site like that. Glacier looks to be used for more permanent data storage where retrieval is not time sensitive. If you have a site where users will want to watch videos, you’ll want load time to be as quick as possible so that the user experience is fluid. Cloudfront should be able to serve almost any kind of media as well.

[@hexoter]

A very big like , I just needed this so bad...Thx man

[@Thirst_TV]

Also, since you're helping me out I want to give you feedback on your channel now that I'm subbed. Your KZbin Channel's Home page looks really empty. I suggest adding sections, right now it only looks like u have 6 videos, but I see you have more. Go to your channels home page, click "customize channel" on the top right then scroll down to Featured sections and click "add section". Then I suggest adding "popular uploads", maybe a "playlist" with just your coding vids, and just throw in "Live now" at the top just in case you ever do go live. Also, update Video spotlight at the top, you can add a video that autoplays whenever a subscriber or non subcriber clicks on your channel. It's not much but it'll help your improve your presence whenever someone lands on your page.

[@CodingCrow]

Wow, thanks for the advice! I always thought those were automatic, no idea why. I appreciate the help

[@Thirst_TV]

@@CodingCrow they ARE working on an update that will automatically tailor your channels home page to each specific viewer but its not available yet, and u'd be surprised how many channels havent optimized their home page lol

[@Thirst_TV]

I have my siteground site, signed up for AWS, learning about S3 now, can I host my videos from my website with cloudfront without having to code anything? it seemed pretty streamlined until you started coding, thats where u lost me lol

[@CodingCrow]

you should be able to host them from your site with cloudfront, the only coding I did was to display the video

[@Thirst_TV]

@@CodingCrow Thanks for the quick reply

[@binufernandez79]

Hi, super useful video, thanks for creating. Any advice on why all my videos are buffering? all my videos are 4k ( 15 GB) and played on my app.

[@goodstuff2read]

Do you know how to apply DRM using the S3 + Cloudfront solution? Is there another aws service that integrates with this solutions? Basically I just don't want people to download the videos. I have used some CSS to cover up the download dots and disabled right click, but obviously someone can just use devtools to duck around that. I too am using nextjs.+ aws amplify

[@xyvdev]

thanks man! do more building block videos!

[@CodingCrow]

Will do my best to make some more!

[@codebycandle]

immensely helpful; thank you for sharing!

[@diegocasanova1141]

I have problems on mobile. Some videos on cloudfront play and others that have more weight the browser seems to stop working the buffer. It only happens to me on android. do you have any idea?

[@ayshasun5912]

BEST Video, thank you so much!!! :)

[@CodingCrow]

glad i could help 😁

[@rahulmehandiratta6651]

big thanks to you buddy for such a informative content ❤

[@CodingCrow]

anytime 😁

[@YungBillionaire30]

How can you have only authorized users get access to the videos because as of right now anyone with the Cloud Front URL can access the video if these are videos you don’t want to be shared how would you go about that?

[@omkarpidde8144]

Have one query. From this URL of cloudfront anyone can access? So how it is usefull

[@htetwaiyan9938]

This approach seems very easy. Can you provide more details on AWS Pricing for this approach?

[@CodingCrow]

aws.amazon.com/s3/pricing/ and aws.amazon.com/cloudfront/pricing/

[@kingdevilla875]

How can you enable video quality option when converted as m3u8?

[@CodingCrow]

hi, sorry i’m unable to answer your question but this tutorial was designed to be basic and not cover every use case, my apologies if this was misleading. i hope you are able to solve this problem though 😊

[@asam1230]

great video! exactly what i was looking for

[@alenisegardner]

Thank you! Super helpful for what I could follow lol! 😆

[@CodingCrow]

glad I could help :)

[@satpalsinghrathore1646]

Thank you so much for making this video.

[@sepsmusic]

For anyone that may be facing this issue, the url won't work for videos with names starting with "#". You can rename your videos in S3, which should fix it.

[@ta4haa]

How can I communicate with you

[@sepsmusic]

@@ta4haa are you having that problem with the "#" character in your video names?

[@VaibhavVerma-cj5ep]

Ummmm I Got The Very Same Issue......And I Worked About Days On This And Today I Just Got To Know You Have To Put A "+" Sign Between Your Url Spaces Thats It And It Works Like A Charm!!!

[@pacoluna7969]

I'm trying to do this in React, but the video does not load, any ideas on why? It loads with the link in the browser, but not in the reac player

[@CodingCrow]

make sure in React you add to the link

[@darkbabaf4899]

Thank you man , excellent work

[@Cmxmxmmx7]

Hi. Great video. Thanks. Can I do this with amplify? Is it very costly?

[@zaynelovecraft]

how can you scale this to a subscription based app so users cant just subscribe and copy url then unsubscripe or just share the url to the video ?

[@julieandthecollective5707]

Thank you. I have seen Amazon AWS being denied by my firewall I installed on my cell. Also, MTP Host runs all of the time, as well as many of the 200+ system apps that, as far as I know, were there when I first got it.

[@panagiotisgiannelos3767]

Nice one, next video could be using signed cookies for secure access depending on user

[@abdullahahmed4722]

How I can hide the video url ? It is being captured by idm

[@CodingCrow]

not sure what you mean by idm, and I don’t think you can hide the url, but what you can do is in your AWS bucket permissions only allow your server to access the videos.

[@HercjayStudios]

This is very impressive... Thank you very much for this well explained tutorial. I'm trying to place videos inside s3-cloudfront and load it on my website (built with core php). Since cloudfront doesn't fully support the default html , I have heard that I can use Jw player or Flowplayer to load up the video. Since these are paid video players, someone else suggested using VideoJS which is free. Now, I'm wondering if you could make a tutorial video on this workflow. Like, how to connect cloudfront to a core php website using VideoJS. And also, could you also make a tutorial video on how to optimizeand encrypt these videos to make them load faster and to prevent people from downloading the video. I have heard of a mediaconversion that splits the video into tiny little bits and makes downloading the video harder for pirates.

[@CodingCrow]

I likely won’t make a video on using core php to stream video since I try to make each video as broadly useful as possible for many people, so my apologies for that. Protecting videos hosted on cloudfront + s3 does sound interesting though so maybe in the future I can make a tutorial on that 😁

[@finessefulj8489]

Hi I know this video is old, but I wanted to know if there was a reason the controls for the video player were designed the way they were (looking to confirm if S3 + Cloudfront would enable a custom UI for the video player)

[@CodingCrow]

Sorry for the late reply - As far as I know the video player's UI was just the default that came with whatever library I used, and can be otherwise customized. S3 and Cloudfront have no control over the video playback UI as they are just hosting the mp4 file (only used for data storage).

[@finessefulj8489]

@@CodingCrow Thanks for that info. The timing of the reply couldn't have been better as I recently picked back up this project (currently planning the UI so will need to revisit the technical stuff later).

[@tomwilliams667]

Not to mention, when users view videos via cloudfront, they can have streaming capabilities, whereby if the viewer "views" directly from S3, they will be forced to download the entire video

[@CodingCrow]

yeah cloudfront is super nice to use 😁

[@almakay01]

funny I'm just figuring this out the hard way

[@taijjun3320]

great! very appriciate that!! i need to take certify aws!

[@mibrahim4245]

Thanks a lot !! you're awesome ... but, I want to do something similar ,, playlist with 100 videos on my laravel php website .. is there anyway to restrict the users from accessing the videos from the link directly ? I mean, I want to allow viewing the videos only from my server, and not with anyone copying the link from the video tag and opening it ... Thanks

[@CodingCrow]

i’d look up how to hide a video link, or you can set your s3 bucket settings to not be private

[@mibrahim4245]

@@CodingCrow thanks, so if it's private from AWS platform, it means that it can be accessed from a registered server only ?

[@CodingCrow]

yes I believe that should be an option to whitelist your own server

[@MrOptimusPrime.]

After copy pasting the domain name followed by slash followed by key, i get the following error. What is the probelm? This XML file does not appear to have any style information associated with it. The document tree is shown below. AccessDenied Access Denied NHB9ZWKVJR6XAZKK tuuiItpQucpdesTUTE47EEJyj5376CZvJe/ulSgfEPIutbl31E6ZfDJtg3tqBQnTA2f0h4xZPqs=

[@tranminhhaifet]

very nice! I want only authenticated or logged in users can watch the video, how to do that here?

[@CodingCrow]

I’d say that’s more on the side of conditional rendering, like you check the state of authentication and display the video if the user is logged in ✅

[@okeyshourovroy2769]

Can you please make a video on pretection of video in aws with authorized people only like netflix somthing.

[@srvtx]

Nicely done! I like that you show the errors along the way. Do you have any ideas on how to charge users on an individual basis, i.e. creating a login process and assigning the right to view the video based on payment etc.? Thanks!

[@rajivkumar-ub6uj]

how can we prevent the users downloading the content or make it hard to download the content for them. we may disable the download option as well as right click but still the third party apps like internet download manager will download the content. kindly help

[@CodingCrow]

hey man, so i’m sorry i’m unable to help with this at the moment, but this tutorial was designed to give a brief building block into how one can stream from a cloud service like AWS. It wasn’t designed to cover every use case, but i hope you were able to solve this problem

[@almakay01]

So I found this vid because originally I was using the Location as it works with my images but when trying with videos it did a forced download. Now I have implemented this and I still get a forced download. My bucket policy does have some other stuff to allow image viewing and what not , although I have removed it to test and it still does not work. online I have ran into changing Content-Type from Ocet/ whatever its called but that still doesnt work. I have been stuck for a good few hours now lol Any Ideas? If so it would be much appreciated. Thanks~

[@CodingCrow]

sorry it’s hard to tell what the problem could be with your configuration. maybe try a fresh run through of what I did here, make sure it works, then change it to match your use case to see what the problem is

[@MrAntonioGomez]

your file extension needs to be .mp4 or you should set Content-Type = video/mp4 on the Metadata section (Click on the object on S3)

[@HenryReyes9]

Thank you so much... helped me a lot.

[@CodingCrow]

Glad I could be of help 😁

[@ICOReviewtoken]

I want to no download video how đo i do

[@tamla9875]

How do I protect the streamable link so that other developer won't bully my link? Can i make link that will expire?

[@josealava5977]

This works great for Chrome! Ran into an issue where videos aren't playing on Firefox.

[@jamesbotwina8744]

Awesome dude

[@henriqueferreira9470]

great work!!

[@CodingCrow]

thanks bro

[@napoleonx5259]

thanks michael shannon.

[@shengni4252]

excellent video.

[@CodingCrow]

thank you for the kind words

[@gusinthecloud]

Great Video!!! Thank you

[@codispatch6869]

Thanks for sharing this video 👍 can you also show how to serve video using akamai cdn and nextjs/typescript??

[@mibrahim4245]

I have another question (if possible).. suppose my website (where I include the s3 videos) is only directed to clients in a specific country only .. should I still in this case use the CloudFront ? .. another thing, the best "region" choice is the AWS server with the least latency ? there's a website where I ping'd all AWS distributions and I found one with the least milliseconds, is that the best choice to select as a region for my bucket? "and not necessarily the nearest geographically" thanks

[@CodingCrow]

I would say if you’re going for speed then the server with the least latency, over time, will be best (try it on multiple days, peak hours, etc). Cloudfront is a CDN, so if you want your site distributed quickly to anyone anywhere it would be a good choice, but if not, it definitely is not necessary.

[@mibrahim4245]

@@CodingCrow great advice.. will do that .. thanks a lot 🙏

[@CodingCrow]

glad I could help :)

[@mibrahim4245]

@@CodingCrow 💮💮🥰

[@vitamunda]

Thank you very much!

[@MOHITRANA-to7rf]

You changed your name to coding aron?😎 Full support you brother

[@CodingCrow]

yessir 😁 thank you for the support

[@readerfromearth]

done all configuration but video download instead of stream

[@CodingCrow]

you put the link in your browser and it downloaded?

[@readerfromearth]

@@CodingCrow yes... Im.on windows 10 pc. Tried on all browsers...

[@CodingCrow]

have you tried putting it as the source for a video element

[@sachinsoni3529]

Lit

[@akshatnarayangupta1377]

Bro, I have already done till this step, I want to know how to authenticate the users, based on the id token stored in cookies

[@CodingCrow]

my apologies, maybe i’ll make one in this in the future

[@mfauch4444]

Miss the original channel name :(

[@CodingCrow]

sorry man, privacy reasons :/

[@mfauch4444]

@@CodingCrow I get that, better to use aliases online

[@CodingCrow]

yeah lol thanks for understanding man 😁

[@MOHITRANA-to7rf]

thank you please make tutorial video please please please

[@CodingCrow]

👍 gotchu bro