Building an AI-Powered Next.js 14 Web App with People Detection & Recording | using ShadcnUI

[@smartjackasswisdom1467]

Please make more Next14 + Tensorflow, this is a great project

[@maplearcadecode]

Thank you for your feedback! I'm glad you enjoyed the project. I'll definitely consider making more videos on Next.js 14 and Tensorflow in the future.

[@dmytrodrozdov4314]

@@maplearcadecode That's a great idea for a new project using 2 or 3 dimensional data for time series forecasting using Tensorflow.

[@pravinsingh7605]

Amazing! keep on adding such content!!!! on nextjs and tensorflow I will follow you along

[@raymondmichael4987]

This looks great buddy 😊

[@hamzath6007]

buddy u are great please upload more node js next js ai projects

[@maplearcadecode]

Thank you for your kind words Hamza. I’ll surely do :)

[@tanmaypant8493]

This is SOOOOOO COOOOOOOL!!!

[@maplearcadecode]

Thank you 🙌

[@himanshu6897]

That's really awesome 🎉

[@maplearcadecode]

Thank you

[@londelidess]

Wait what. I found a genius guy lol

[@maplearcadecode]

Thank you so much for your kind words! I'm glad you found the video helpful.

[@Adrian_Galilea]

Very good work! Thanks for sharinng!

[@maplearcadecode]

Thank you so much! I'm glad you liked it.

[@thomascarter4248]

this is so interesting!

[@artoriasdenostradamus3628]

thanks for the knowledge

[@insensibility]

This is great!

[@Mathster_live]

I can't seem to have the webcam work on mobile browsers, it doesn't ask for permission to use the camera and even when I always allow it, the webcam area is blank for some reason.

[@haiffy]

Because you can't use webcam in mobile through webapp

[@netcharger02]

Super

[@nadetdevfullstack7041]

Excellent

[@mbm.editzz]

legend

[@maplearcadecode]

I appreciate your kind words! It means a lot to me that you enjoyed the video.

[@mbm.editzz]

pls make more of these

[@maplearcadecode]

Thank you for your support! I'm glad you enjoyed the video. I'll definitely consider making more content like this in the future.

[@anime_on_data7594]

hey this seems really amazing. i am into computer vision but haven't integrated it with nextjs

[@maplearcadecode]

Thanks for your comment! I'm glad you find the video amazing. Integrating computer vision with Next.js can open up a lot of possibilities. Give it a try!

[@raymondmichael4987]

For some reasons I don't know Why; but I get "Cannot find module 'next-themes' or its corresponding type declarations.ts(2307)" But I have installed the package just fine, why is that?

[@arijit-og5zp]

Pls add a featurs that if a person does not look into the camera for a particular time, then a warning message and sound pops. This feature will be useful in online exams

[@mhshakil1606]

wow

[@shadytiger160]

Please make more videos🙏

[@maplearcadecode]

Hey, thanks for the comment! I'll try my best to make more videos that you'll enjoy. Stay tuned!

[@shadytiger160]

@@maplearcadecode i would love to see more videos❤️ Thankyou

[@jhonsnow534]

can you make more projects using ai + web development???

[@maplearcadecode]

Sure, I'll make more projects using AI and web development

[@pablocarvalho9826]

Nice! you have 1 my sub!! I have a question: What configuration / extensions are you using to format and getting the automopletion? I have prettier and in React i always get the autocomplete but neither of those are working with Next (this is my first next project) Thanks!!

[@maplearcadecode]

Thank you for subscribing :) The issue seems to be with the typescript extension. Check if TypeScript is globally installed with `tsc --version`. If not, install it globally using `npm install -g typescript`. After this open command palette in VSCode with (shift+command+p) and search 'typescript: Restart TS Server' After this whenever you are typing, you can hit (control + space) to make the code completion suggestions box to pop up. ____________________________________________________ For React code snippets I am using "ES7+ React/Redux/React-Native snippets". But I am assuming you already have it. for tailwindcss: "Tailwind CSS IntelliSense"

[@pablocarvalho9826]

Thank you so much! ill try that@@maplearcadecode

[@arupde6320]

be regular

[@lazy2492]

wait next video

[@timmusharapov9257]

TensorflowJS isn't "OpenAI technology", that's Google open-source library :)

[@maplearcadecode]

I am afraid you have misunderstood what I said. Do take a look at the github repository of tensorflow JS here: github.com/tensorflow/tfjs. Cheers :)

[@akashdeb9823]

LOL dont edit your comment after OP corrected you

[@timmusharapov9257]

@@akashdeb9823 I edited before that ))

[@user-sk6ud4zu3l]

Jjjj7jj jjjjjjj bhbubn7bbb😮b 😮ni uuhhh nn bnb bb bjbb nn b. B 0:19 ​@@maplearcadecode

[@JRichens]

Was working through this, but using a HTML video being streamed in, which is fine because model.detect takes HTMLVideoElement. However I get the error: Unhandled Runtime Error SecurityError: Failed to execute 'texSubImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded. Any ideas why I might be getting this? Thanks!

[@JRichens]

Do I really need to do this!?!? Capture frames from the HTMLVideoElement: Since the video stream is coming from an HTMLVideoElement, you would need to capture individual frames from this element and pass them to the model for object detection. You can do this by drawing the current frame onto a canvas and then converting this canvas into an image tensor that can be passed to the model.