How To Capture Picture From Webcam JavaScript | Store In MySQL & Folder | HTML, JS, PHP, MySQL

[@kriziacarissepangan1590]

Waaaahh! Saved our capstone!! Thank You so much! New subs here.

[@DavidGTech]

You're welcome! Thank you for watching and subscribe...

[@alexkurnia3127]

makin keren aja nh yg ditutorialin

[@DavidGTech]

Iya wkwkwk, ty udah nonton

[@malwarevirus3002]

Bro, will it also work on mobile camera? Tyia

[@hudiyasukma6008]

Nice tutor! Tapi mau nanya kalo webcam diganti dengan modul esp32-cam apakah bisa?

[@radhasingh3549]

Thank you sooo much. I really needed this :)

[@DavidGTech]

You're welcome...

[@incognito7840]

where u from, are u in the field of web development?

[@jabinilazhar8911]

Mantab bang.. ini yg aq cari

[@DavidGTech]

Thank you for watching!

[@chouaibechouaib10]

Bro do i have to make the localhot secured (https) for the camera to work or i let it http

[@DavidGTech]

@chouaibechouaib10 Yes, you need to make localhost secured (https) for the camera to work because browsers require HTTPS for accessing the camera. You can use a self-signed certificate for local development.

[@gihon_z3r0dxd84]

Hey I wanna ask, if I hosted this code let's say using Heroku so everyone with the url using his/her own internet can capture picture but the pictures are saved to my local computer. So its like face registration hosted website and my local computer is the database, how's the code?

[@gihon_z3r0dxd84]

Oh ya pakai indonesia aja kali yak wkwk ku kira orang luar 😂, ya gitu lah pokonya kalau aku pengen hosting jdi website gtu trs orang lain yg akses website bisa capture fotonya tapi ke savenya tetep ke komputerku sebagai database tu gimana ya source code nya?

[@DavidGTech]

Wkwkkw Savenya ke folder img di tempat hostingnya sih. Kalau mau kaya gitu, itu ada aturannya lagi tentang hosting server gitu. Thank you for watching

[@diantech4215]

klw ambilnya dalam bentuk video bisa juga gak? jadi yang tersimpan di database nya itu video..

[@DavidGTech]

Bisanya dalam bentuk foto doank

[@suzerain3880]

Hi Mr. David, is there a specific camera to use?

[@DavidGTech]

Hello, thank you for your question! In the video, we demonstrate how to capture pictures from a webcam using JavaScript, and the good news is that you can use almost any webcam with your project. If you have any more questions or need additional help, feel free to ask. Enjoy capturing pictures from your webcam using JavaScript!

[@imposteralchemist4521]

how did you saved image into mysql database???pls explain ?

[@DavidGTech]

When you click the button, it sends the image to function.php. The function.php will save the image to database and img directory

[@hamadmohammed5957]

Thank you dear that's very helpful

[@DavidGTech]

You're welcome

[@annagrace1316]

Very helpful video!

[@DavidGTech]

Thank you...

[@ashwinchavan6391]

how should i do this using flask

[@DavidGTech]

Thank you for your comment and interest in using Flask with webcam capture! While my original video focuses on JavaScript-based webcam capture, I'd be happy to guide you on how to integrate Flask. To use Flask for this task, you can follow these steps: - Set up a Flask project: If you haven't already, create a new Flask project and set up your app.py file. - Create an endpoint: Define a new route in app.py to handle image uploads from the webcam. - Use JavaScript: In your existing JavaScript code for webcam capture, modify the navigator.mediaDevices.getUserMedia() function to send the captured image to the Flask endpoint via AJAX. - Handle the image in Flask: In your new endpoint, handle the incoming image data, and you can then save it to the server or process it as needed. Keep in mind that this is a high-level overview, and you may need to adjust the implementation based on your specific requirements. If you want more in-depth guidance on Flask integration, there are plenty of excellent Flask tutorials available online. I hope this helps you get started! Feel free to experiment and learn more about Flask and JavaScript integration. If you're interested, you can subscribe to my channel for future tutorials and updates.

[@LikardV]

i get error: webcam is not defined in index.php at webcam.set

[@DavidGTech]

Probably because there are some codes that missing in your code

[@Gringos271]

hello here in mine when I call the configure function in the body it says that it does not exist would you be able to tell me why I have already checked each word is the same

[@DavidGTech]

I'm sorry to hear that you're encountering an issue with the configure function not being recognized in the body of your code. Please double-check that the configure function is defined and accessible in your JavaScript code. Ensure that it is defined before you attempt to call it in the body of your HTML document.

[@wenndyaprialdo.7141]

mantap betul nih abang

[@DavidGTech]

Thank you...

[@jorgedanielvillafane7049]

Excelente video. una pregunta: como usaría Webcam.upload en laravel? que tendría que poner como segundo argumento en esa función?

[@DavidGTech]

Speak English please...

[@foxgamingkda1722]

oye bro podrias ayudarme ?

[@rodriguezfelipe8900]

Hi David, keep up the good work and thank you for your help

[@DavidGTech]

Thank you...

[@foxgamingkda1722]

ey bro you can help me plss

[@ZEKRA_ZG]

My friend, I want to make inserts for another value, like the name. I tried a lot, but I didn't know.

[@DavidGTech]

Hey there! I'm glad you found the video useful! Adding inserts for other values, like a name, is a great idea to customize your project. To do this, you can modify the JavaScript code we covered in the video. First, create an input field in your HTML where the user can enter their name, like this: . In your JavaScript code, you can capture the value entered by the user in the nameInput element by using document.getElementById('nameInput').value. Then, you can insert this value into your captured picture, perhaps as a caption. For example: context.fillText(document.getElementById('nameInput').value, x, y);, where x and y are the coordinates where you want to place the name. Remember to style and format the inserted name as needed to make it visually appealing. If you encounter any issues, feel free to ask for further help. Good luck with your project, and keep experimenting!

[@nikhithas8519]

great vedio this is really helpfull for me

[@nikhithas8519]

please send the source code

[@DavidGTech]

Done

[@A__DamarAdzaniSusanto]

Halo kak, mau nanya. Saya kan udh ngikutin sesuai video..semuanya bisa kak. Cmn kenapa kamera webcam nya gk bisa muncul ya di localhost nya ? Mohon infonya kak 🙏

[@DavidGTech]

Hi @A__DamarAdzaniSusanto, Halo! 😊 Jika kamera webcam tidak muncul di localhost, pastikan Anda sudah memberikan izin akses kamera pada browser. Juga, cek apakah ada pesan error di konsol browser. Semoga membantu! 🙏

[@amofaedmund5985]

Nice work

[@DavidGTech]

Thanks

[@jalusomala4326]

Hallo kak cara edit jamnya gimana ya?

[@DavidGTech]

Jamnya itu sudah sesuai waktu yah

[@jalusomala4326]

@@DavidGTech punya ku jam yg disave sama di laptop beda kak.

[@serba_otodidak]

Saya ko ga muncul kamera nya yah mas di layar

[@DavidGTech]

Kalau kodenya udah bener sih harusnya itu dikarenakan browsernya yang kurang support, nanti kalau masih ragu sama kodenya email saya aja yah, nanti saya kasih source code php dan sqlnya 🙏🏼

[@serba_otodidak]

@@DavidGTech baik mas terimakasih banyak, nanti saya email, Chanel nya saya suscribe, like, coment terus, lonceng juga ga ketinggalan Terimakasih terimakasih 🙏🙏🙏🙏🙏

[@DavidGTech]

Sipp

[@saileshtuladhar3787]

how to access back camera? please help

[@DavidGTech]

To access the back camera and capture pictures using JavaScript in a web application, you can use the MediaDevices API and the getUserMedia() method. Request camera access permission: Use navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) to request permission to access the camera, specifically the back camera. Handle the stream: Once permission is granted, handle the stream object returned by the getUserMedia() method. Display the camera stream in a video element and capture pictures using a canvas element. Process the captured picture: After capturing the picture, you can process it as needed, such as saving it locally or sending it to a server. Remember to handle any errors that may occur during the camera access process or picture capture.

[@jalusomala4326]

Hallo kak mau nanya, kok yang saya pas klik button save gak jalan ya, yg jalan Webcam.reset(); doang? Mohon penjelasannya kak🙏

[@DavidGTech]

coba cek lebih teliti lagi kodenya supaya tidak ada yang error.

[@RanggaBayu]

kenapa ya udah sesuai dengan code di video anda tetap tidak muncul kameranya ?

[@DavidGTech]

Coba hubungi gmail saya [e-mail] Nanti saya bakal kasih source codenya

[@RanggaBayu]

@@DavidGTech cek email mas

[@DavidGTech]

Woke sip

[@DominicNweze]

Very good thanks

[@DavidGTech]

You're welcome! Thanks for watching

[@tashigichin7960]

thank you so much

[@DavidGTech]

You're welcome!

[@CodeForgePro]

Your code is awesome can you provide me souce code Pls

[@DavidGTech]

Contact my gmail

[@akbartan]

Punya saya video ditampip padahl koding udah sama. Minta source code nya bang

[@DavidGTech]

Hi @akbartan! Jika video tidak tampil meskipun koding sudah sama, mungkin ada kesalahan kecil atau konfigurasi yang berbeda. Untuk source code lengkap, cek di deskripsi video atau di repositori GitHub yang terkait dengan tutorial ini. Jika masih ada masalah, beri tahu saya, dan saya akan mencoba membantu!

[@ashutoshpatel5030]

Thank you could you provide complete source code!!

[@DavidGTech]

You're welcome... Actually same as in the video, but if you don't want to fully watch the video, just contact my gmail [e-mail] to get the source code.

[@hamidahwulandari8364]

kak aku udah gmail kakak, boleh izin minta source code nya kak? soalnya aku error dibagian foto nya ga kesimpan di folder img, makasih kak

[@DavidGTech]

Sudah yah...

[@habibbillah630]

terima kasih, tapi pelik, saya punya tidak keluar gambar pada Image Database walau sudah save successfully, 3 jam mencari solusi, susah betul ye java script + php.

[@DavidGTech]

Sama-sama, coba pastikan kodingan kamu benar sesuai yang ada di video, supaya sistemnya dapat berjalan dengan baik.

[@meryretnoarianti5048]

Terimakasih bang, tapi gimana caranya ngambil 3 gambar dan di save dalam 1 nama.

[@DavidGTech]

Hi @meryretnoarianti5048, Terima kasih! 😊 Untuk mengambil 3 gambar dan menyimpannya dengan satu nama, Anda bisa menyimpan ketiga path gambar tersebut dalam satu field di database atau membuat relasi antar tabel untuk menyimpan nama dengan beberapa gambar. Semoga membantu!

[@shariftaj9278]

Very Helpful can you provide the source code

[@DavidGTech]

Contact my gmail

[@tashigichin7960]

can i get the source code please?

[@DavidGTech]

Hi @tashigichin7960, You're welcome! 😊 For the source code, you can find it in the video description or on my GitHub page. Let me know if you need any further assistance! 👍

[@imamihsani3946]

Hello Mr. david, i have a problem, the webcam isn't appear in my localhost and it just showing " . " , can u help me? i've been sent you by email. Please check it. Thanks, sir

[@DavidGTech]

Hello! I'm sorry to hear that you're having trouble with the webcam on your localhost. Here are a few things that you can try to resolve the issue: Check if the webcam is properly connected and working on your device. You can try testing the webcam with other applications to ensure that it is functioning correctly. Ensure that your web browser has permission to access your webcam. Depending on the browser you're using, you may need to check your browser settings to grant permission. Check if the webcam is supported by the browser you're using. Not all webcams are compatible with all web browsers, so you may need to try a different browser if your current one doesn't work. Verify that your webcam is correctly specified in your code. Double-check that you have specified the correct device ID and make sure that there are no typos or other errors in your code. I hope this helps! Let me know if you have any further questions or concerns.

[@imamihsani3946]

@@DavidGTech okay, thanks

[@norbertgebanga8934]

Thanks you so match. Help me by the source code please

[@DavidGTech]

Please contact my gmail and I will send the source code

[@DavidGTech]

my gmail : [e-mail] i will reply to you as soon as possible

[@jalusomala4326]

Hallo kak atletnya gak jalan kenapa ya?

[@DavidGTech]

Harusnya jalan @jalusomala4326, coba cek lebih teliti lagi kodenya dan database

[@nysazaharim3445]

Hi can i get the source code. I already emailed you. Thanks!

[@DavidGTech]

Done! Thank you for watching...

[@horsemanOfApocalypse]

The code is not working

[@DavidGTech]

I'm sure that there are some missing codes in your code

[@horsemanOfApocalypse]

@@DavidGTech can I see the whole source code because I followed the one in this video line by line

[@DavidGTech]

Contact my gmail to get the source code

[@lqyj]

halo gan saya sudah beli source code nya di paypal

[@DavidGTech]

Iya

[@joshuaelsonhonu4634]

Please can i have the source code

[@DavidGTech]

Contact me through my email please

[@henrydwiseptian4312]

Terimakasih banyak gan tutorialnya.. Ane izin minta sourcecodenya yaa 🙏

[@DavidGTech]

Sama-sama

[@fatmadwianisa813]

Kok gak bisa ya. Udah aku email bang. Boleh di cek?

[@DavidGTech]

Halo, coba cek kembali kodenya, pastikan sesuai kode yang ada di video, supaya bisa berjalan dengan baik

[@snakezy1988]

video yang aku cari makasih bro btw boleh minta source codenya makasih

[@DavidGTech]

Sama-sama

[@tioadjie5361]

Terima kasih mas videonya, membantu sekali. Semoga lancar rezekinya karena sudah membantu. Amiin...

[@DavidGTech]

Sama-sama!!! Aminnnn, thank you!!!

[@joshuaelsonhonu4634]

Boss

[@lqyj]

Check gmail gan

[@KuroBapak]

minta src nya dong broo udh gw contact

[@DavidGTech]

Udah yah...