Coding Challenge

Liven up your video calls with p5.js, ml5.js, Teachable Machine, and OBS Studio!
💻 Code: thecodingtrain.com/challenges...
Links discussed in this video:
🔗 Comic-Book Style Video Lens: / 1305667539922550784
🔗 Snap Lens Studio: lensstudio.snapchat.com/
🔗 Teachable Machine Website: teachablemachine.withgoogle.com/
🔗 ml5.js Teachable Machine Example: editor.p5js.org/ml5/sketches/...
🔗 OBS Studio Website: obsproject.com/
🔗 OBS Virtual Cam for Mac: github.com/johnboiles/obs-mac...
🔗 obs-v4l2sink (OBS Virtual Cam for Linux): github.com/CatxFish/obs-v4l2sink
Other videos mentioned in this video:
🎥 Teachable Machine 1: Image Classification: • Teachable Machine 1: I...
0:00 Introduction
1:02 Project overview and plan
3:43 Teachable Machine model training: teachablemachine.withgoogle.com/
5:58 Code! Importing the model: editor.p5js.org/ml5/sketches/...
7:08 Code! Displaying annotations
8:58 Code! Debouncing, fading out
11:20 Open Broadcast Studio Virtual Camera
14:33 Finalizing layout in OBS for Zoom
18:14 Reviewing all the steps
19:47 Further ideas and how to share your own!
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/Guides/com...
🚩 Suggest Topics: github.com/CodingTrain/Rainbo...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: kzbin.infojoin
🛒 Store: standard.tv/codingtrain
📚 Books: www.amazon.com/shop/thecoding...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...

[@Luther_Luffeigh]

I don’t know anyone who makes coding look this fun 🙌🏽

[@georgeyjm]

Love it! The step-by-step tutorial in the end is so thoughtful and useful!

[@fr4781]

The code isnt working for me, the preview is green can u pls help?

[@aseemlalfakawma5084]

That scream at 6:46 cracked me up. That's what really happens when you expect something to work and it doesn't LOL

[@arthurmartins1511]

i love how he has improved so much since when he started his videos. when i compare this coding challenge, so well edited and performed, with his first ones, like the snake game or the purple rain, i feel a little happier :) dan you are a really nice guy, and you've taught me a lot :) cheers from Brazil :) 🥰

[@andreipopescu9197]

This is mind-blowing! I can't even imagine what level of teaching assistance this could have. Wow!

[@Bloom_HD]

AI is so darn interesting to me! And you make it seem so easy to understand with your explanations. I love this channel!

[@mtvr3313]

OMG I LOVE THIS TYPE OF VIDEO THANK YOU FOR RESTORING IT. You are probably the most positive man ever and I love that.

[@NiteshKumar-nk1rx]

Your channel is the best thing that had happened to me in 2020

[@neillunavat]

I love all your videos. I am 14 year old and because of you, I made my first neural network, I made my first simulation from scratch. Thank you for being so kind to share all your knowledge. Hope I made your day as well. 😊

[@ishaan600]

this guy makes the best projects with code

[@austinleedavis]

I am 100% using this for my class -- my students are going to get a real kick out of it. Thanks for the step-by-step overview at the end; it was nice that you tied everything together

[@fr4781]

The code isnt working for me, the preview is just a green screen can u pls help?

[@sajalchuttani2519]

This man is the best teacher I have ever had....perfect amount of smiles.....craziness....fun....and.....caution.....and yeah expertise too...would like to meet him one day😍

[@azkaainulmaarij7177]

hmm, i need to meet him, but idk when im meet him one day... huhu

[@ritvi]

This is pretty great!

[@AleksanderFimreite]

Yes. This is exactly the kind of projects that makes me enjoy coding. Please make more of these types of coding videos =)

[@jam-burger]

This tutorial opened so many possibilities for using p5 sketches in meetings

[@Mavhawk64]

That’s awesome that you can add your own visualizations to the zoom!

[@rohith9875]

Wow, this is really cool. Can't wait to try it!

[@arivanhouten6343]

Great Video Dan, keep working on doing the great stuff!

[@starki321]

I'm so going to do this in my zoom classes. Loved it

[@RodrigoKulb]

New video !!! great!

[@indahsiradjuddin101]

I am really glad that youtube recommended this video.....love it😊, will try it soon

[@zengchristi5381]

Amazing tutorial helps a lot for my career, thank you so much!

[@gjk365]

Nice! I love the coding challenges.

[@chaitanyasingh8620]

First great idea ever saw for zoom GREAT !!!!!!

[@programming_hut]

thanks for such awesome video

[@stefanvet8135]

Awesome! You made my day!

[@nkpvg6805]

I Love This Channel !! I Always Watch It For Inspiration As I'm Also A Young Coder And A Request : Can You Make Multiplayer Games With Firebase Databases Which is gonna be really Cool, And Again Amazing Content !!

[@kyadav106192]

hello like your idea so much and you made it more fun

[@AliDouiyek]

It was worth the wait.

[@sean-bz5fi]

why does it look so easy but when i try it it is impossible, ur truly a master of coding

[@soumyadip3751]

Coding chalange after so many days ...... It wa nice

[@Roknok]

I just cant understand how can you read my mind.....always.....always!! Btw I love your content!

[@viniciusfriasaleite8016]

Great video!

[@tsioryfitiavanaanhykrishna6992]

SIMPLY AWESOME !!!

[@chaitanyasingh8620]

Excited to make my own !!!!

[@gauravkavhar304]

Absolute legend 🙏

[@leiyarabe7482]

Looks coooooool ❤️

[@danielab332]

so cool!!

[@roinaigle_9769]

Hey! Thank you for the video! You made it really easy to understand so thank you! I have a technical issue: my camera won't work in the tab to apply the ML algorithm because it is already opened in OBS. How can I fix it? It looks like when my camera is working somewhere, it can't work elsewhere... :( I'm using the built-in camera from my laptop. Thanks

[@donnydavinci1772]

I'm having the same problem, I tried split cam but I couldn't get it to work. Please help!

[@guilhermebruni1621]

I'm not able to do it because my camera won't work simultaneously in two applications, were you using a splitter????

[@LouiseHpfner]

Did you find a solution for this?

[@chinmayaagrawal2769]

this was a real fun :) !!!

[@up-beat-music]

sir you are the best teacher :)

[@Raamyy]

I paused this video like 10 times during watching just to clap to you. 👏

[@endahnursalehah382]

OMG let's try!

[@partypiggaming9344]

This would be super cool for playing music with a virtual mic as well. I can imagine having debates and modifying this code to have it ace attorney style!

[@thecodinggiraffe]

audio... hmmm what if ML was tracking your lip movements and creating sentences using some digital voice (like text to speech)...

[@AdarshKumar-qi8jf]

I am following you from past 3 years and I really want to visualise. My code that why I am here.

[@cassandradawn780]

Awesome vid as always! Also you have an error in description: Liven up your video calls with p5.js, ml5.js, Teachable Machine, and #and# OBS Studio!

[@sutsuj6437]

You can use the browser capture in obs (not window capture) and set the background with css to be rgab(0, 0, 0, 0) then you can use a website as an overlay.

[@TheCodingTrain]

indeed, the reason i didn't go this route is it requires some additional weird steps to allow camera and WEBGL access in the OBS browser.

[@peteraraujo4936]

bless your soul

[@nikkonikko371]

This is so cooooooooooooooool!

[@tomazcvetko1001]

Does anyone have any advice how to do this on windows? The problem I'm having is the fact that I can only access my camera in a single application - so it's either p5.js or the OBS...

[@hanchengzhang2720]

have u figured out the solution? I am having the same issue.

[@rishitkamani9672]

You are just amazing .you are more intelligent than einstein.I also do coding on p5 .Love from india

[@ullaskunder]

Awesomeeeeee

[@cn3.034]

i am ur big fan ur king of js in my mind love u master of js

[@ahmedhassanahmedhassan6495]

has been a while. Miss You :)

[@cap-advaith]

Shit! When did the editing quality changed ....OMG now it's more fun to watch and learn

[@coding2135]

ㄥㄖㄥ as soon as it started training my model i switched tabs, and came back to find a 'dont switch tabs' lol

[@kushagra64]

Finaly a coding challenge.

[@fr4781]

How did you get the fading so smooth in obs after the chroma key?

[@wahmmwan6764]

Hello sir Dan...I'm looking forward on your java programming tutorial 😊

[@dhruvakumarparsam6162]

Sir can u make vedios on visual cide studio because i am having some doubts on it so will u make the vedios on visual code studio

[@samk1207]

I am having an error that if i use my webcam for the obs then the webcam in p5 editor is not starting at all and vice versa. What can i do to solve the problem? Btw amazzzing video I really liked it and learnt many new thnings.

[@sandhyabhosale6328]

I have a challenge for you. Create a ml project that sees your eyes and drives cursor to where you see

[@IsfhanAhmed]

Best teacher in world

[@username42]

can we use classification of tabular data sets for teachable machine ml5.js ? or only still image and audio?

[@shulymang]

its so cool

[@edwingarcia5043]

Nice

[@ashikpaul345]

Finally!!!!!!!!!!!!!!!!!

[@fr4781]

The code in the description isn't working for me. It just shows a green screen

[@PALAKJHAVERI-ex9zg]

Could you please provide the link to the website/account of Jason Haglund, for us to discover other illustrations created by him?

[@GyanVigyanwithdrparul]

U La lah amazing

[@zrksyd]

Coding challenges are back!

[@gnrockyou]

Can this be implemented using PoseNet instead of the Teachable Machine Image Classificator?

[@rimshaf]

Can you do a video where you do the atom set up i do not know hot to do live server in atom

[@mattiafranzin6370]

How can you use the camera source within 2 applications? If I use it in Chrome (and it works) and then I try to use it in OBS Studio in the same time, I cannot access the camera because it is already used. Do you use some specific software or is it simply thanks to the MacBook camera?

[@TheCodingTrain]

Oh shoot, I did not think of this issue! Do you have the same problem if you open OBS studio first?

[@mattiafranzin6370]

@@TheCodingTrain yes, if the camera is already used in OBS, the page loads, but there is not the corner with the camera and the custom image I chose is always displayed

[@mattiafranzin6370]

@@TheCodingTrain I saw that on github.com/umlaeute/v4l2loopback there is a kernel module you can install on Linux, but I haven't tried it yet, also because I was looking for something with Windows. I thought about using 2 virtual cameras (with another software), but maybe I'll try in the next days. I think your environment is way long better than mine :)

[@haroldderidder4178]

@@mattiafranzin6370 Did you get it to work on windows? same issue here ;)

[@mattiafranzin6370]

@@haroldderidder4178 nope :(

[@hussainkhan-fg1lv]

0:56 : Future : Am i a joke to you :/

[@garvitmotwani2779]

Best project in zoom 😂🤣😅!!!

[@dizzy3120]

Can you make a video like when your pressed a button to add a cube in WEBGL

[@zlobniykozel]

hi which idle or code editor are you using in the video?

[@codycodes7527]

p5js web editor witch is at editor.p5js.org

[@helmeri]

you can browser capture an url directly, no hassle with tabs

[@TheCodingTrain]

So the reason I didn't go this route is that several extra steps are required to (a) make the camera available to the OBS browser and (b) make hardware (WEBGL) available to the OBS browser. But yes, this would be a better way to do it and then you wouldn't need to to do the chroma key b/c you can have a transparent layer!

[@pozzomarc]

Make sure to update/upgrade OBS Studio to the latest version in order to get VirtualCam to work!

[@yashasvidevang1533]

Can I take this as my academic project ??

[@twelve-numberblocks2198]

Coding Challenge is Back!

[@ekxo1126]

That's scary... Just yesterday I used obs virtual camera on a call

[@thebirdcage7415]

Great video. Although the ml5.js Teachable Machine Example doesn't seem to be working for custom teachable machine models. Works if i change the image classifier to "MobileNet", but not with Teachable machine models

[@thebirdcage7415]

UPDATE: if you use a direct link to the google storage location of the json file (e.g. "storage.googleapis.com/tm-model/CUSTOM/model.json" the it works. 🤔 🥴

[@TheCodingTrain]

Hmmm, could you be more specific and maybe provide screenshots of errors at thecodingtrain.com/discord or github.com/ml5js/ml5-library/issues?

[@thebirdcage7415]

@@TheCodingTrain hmmm even weirder i can't recreate the error now. The example in the comments now works. However, earlier when i tried it i got the same error as you did at 6.47. Even though the example looked to be updated. Tried a few things, the one that worked, using the direct url of the .json file of the model rather than the "teachablemachine.withgoogle.com/models......." link that redirects to a "storage.googleapis.com/tm-model/......" location. So i imagine the error was with google earlier. Not p5.js or ml5.js. So in summary all works now.....👍

[@mkutaydev]

One word: Awsoume!

[@wpontog]

i tried to use on my android phone but doesn't work. ask to allow video but show no image. Can you help?

[@linuxthio4435]

i need help to use P3D in processing(java or python)

[@OG_CK2018]

Oh I thought u stopped coding challenges!

[@anaccount2851]

Who are you? Why are you so loveable? Why do i understand everything you say so easily? How come other people aren't as good? Do you teach web development?

[@bobuxman1523]

6 minute? woaw

[@linuxthio4435]

I need help . P3D do not work on my PC HP 840 G2 with kubuntu 20.04

[@willemkossen]

darn, i want this in ms teams and frustrate my colleagues... sweet :)

[@TheCodingTrain]

you can use it in anything! wherever you select you video feed just select "OBS Virtual Camera"

[@sangoku149]

How many hours per week do you work ?

[@user-uv5yi5hs1b]

If you see this, so have to you great day! (:

[@ayushsingh-gl6wm]

Do you have p5.js and ml5.js tutorial for beginners. For someone who knows nothing about these.

[@TheCodingTrain]

Yes! thecodingtrain.com/beginners/p5js/ and thecodingtrain.com/learning/ml5/

[@ayushsingh-gl6wm]

@@TheCodingTrain Thanks. Does it requires mastery in JavaScript. I am at basics.

[@yovhal1980]

Is there any way we can do this on Google Meet. If Yes can u please make a video about it???

[@TheCodingTrain]

Yes! It's exactly the same just select "OBS Virtual Camera" in google meet!

[@sulbhasankhe2244]

Hi! Coding train, great this is! Can u make a vide series about react native

[@TheCodingTrain]

Hey Sulbha, You can always suggest new topics in the link in the description! ~ Coding Train Team 🚂

[@sulbhasankhe2244]

Actually my name is Dweep! I mostly watch u on my grandma's phone that's why sulbha sankhe it displays!

[@sulbhasankhe2244]

And I hv already suggested my topic yesterday on issues name would be DweepPatil

[@sulbhasankhe2244]

@@TheCodingTrain plus, I am longing to talk with u! Or chat I even joined the discord with name Dweep. I tried to DM to u too! But it didn't! plz, tell me how I can chat with u!'

[@ashikpaul345]

Abusing teachable machine storage. Pretty sure they are gonna start charging for the service 🤣

[@omkar._.k]

while watching this I am also in a Zoom Meeting😆