Accessing Webcam and Capturing Image From Webcam | Only HTML and JAVASCRIPT

Поделиться
HTML-код
  • Опубликовано: 12 ноя 2024

Комментарии • 205

  • @anshukumari7154
    @anshukumari7154 2 месяца назад

    thank you so much it is worked perfectly 🥰

  • @javerialodhi
    @javerialodhi 8 месяцев назад +2

    It is possible that capture the image without streaming the video

  • @yourbrandnamehere
    @yourbrandnamehere 3 года назад +2

    Yea bro thank u. My friends have call me "computer expert"😂

  • @lavanyam9337
    @lavanyam9337 5 лет назад +3

    You saved my life bro!! Thanks a lot..cheers!

  • @varshapatil7864
    @varshapatil7864 3 месяца назад

    where I will get code of above video?? his website is not working so not able to get code of it.....please help me....

  • @kolyxix
    @kolyxix 3 года назад +2

    I tried it and it worked. This is amazing. great tutorial

    • @CodeFlix12
      @CodeFlix12  3 года назад

      ♥️♥️

    • @PA4TRON
      @PA4TRON 3 года назад

      can u send me the source code ?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      Check my website

    • @PA4TRON
      @PA4TRON 3 года назад

      @@CodeFlix12 wesbite link pls

    • @CodeFlix12
      @CodeFlix12  3 года назад

      Codeflixchannel.com

  • @oguerrero20U
    @oguerrero20U 10 месяцев назад

    Great Job!!!!

  • @excaliburgz1996
    @excaliburgz1996 4 года назад

    Thank youuuuu this is very good without the needs of webcam.js nice

  • @CR7-y4p1e
    @CR7-y4p1e 10 месяцев назад

    why its not asking me fr microphone I had done the same code as it is?

    • @CodeFlix12
      @CodeFlix12  10 месяцев назад

      Possibly you have js blocking or you already have given it? Please also check microphone button

    • @CR7-y4p1e
      @CR7-y4p1e 10 месяцев назад

      how can i unblock the js
      @@CodeFlix12

  • @smrutipragnyadash2143
    @smrutipragnyadash2143 4 года назад +3

    It works successfully .. thank you so much 😊😊😊
    My web cam is opening and it can record video .. but i am unable to capture image. Any solution???

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Just check the javascript for the click Action. Check by putting consoles

    • @satyam-talks
      @satyam-talks 4 года назад

      @@CodeFlix12 I am having the same problem.

    • @satyam-talks
      @satyam-talks 4 года назад +1

      @@CodeFlix12 on console i had -> Uncaught TypeError: Cannot read property 'addEventListener' of null at webcam.html(my file name is webcam.html)

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Check syntax near event listener , you might be missing something there

    • @MarkGreen-pp3qy
      @MarkGreen-pp3qy Год назад

      so can I use a chrome laptop for this

  • @tsuki__shima
    @tsuki__shima 3 года назад

    Is it need to download/install JavaScript first?

  • @2031732
    @2031732 4 года назад

    Excellent!!

  • @saiharish6117
    @saiharish6117 4 года назад +2

    How can i save it in my phpmyadmin database with php ...
    can u provide guidelines for this ....

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Take the image from canvas via javascript. Run insert query to save the image name to db. Save image to a folder. Watch my file upload videos for more help

  • @MrsBabar-ui2dh
    @MrsBabar-ui2dh 2 года назад

    Can we change webcam?

  • @ahmedfaraz2267
    @ahmedfaraz2267 4 года назад +1

    What if i want to record video?
    I mean this is for picture but i want to record video and show live on my site.
    How it is possible?

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      I have less idea about that sir but it should be possible with modern api's

  • @adeelsyed7291
    @adeelsyed7291 5 лет назад +1

    I want to do this, plus one more button for submit. So when I press submit I want to send the canvas image to server side. How to do ?

    • @CodeFlix12
      @CodeFlix12  5 лет назад +2

      I have a video on store image to MySQL. Please watch and follow it

  • @bandarisrikanthoriginal
    @bandarisrikanthoriginal 3 года назад

    How can I see ur video total adds only in it

  • @satyam-talks
    @satyam-talks 4 года назад +2

    I have written the same code as you did, but it only open webcam and reflect sound but my capturing button is not working.

    • @CodeFlix12
      @CodeFlix12  4 года назад +2

      Please check for the browser webcam permissions

    • @MarkGreen-pp3qy
      @MarkGreen-pp3qy Год назад

      ​@@CodeFlix12this don't look easy

  • @jlm000
    @jlm000 4 года назад +1

    Can you help me add a timer on the camera? i can show you my javascript code for the timer

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Is the code in working condition or not?

    • @jlm000
      @jlm000 4 года назад

      @@CodeFlix12 it is in working condition

    • @garvtambi5786
      @garvtambi5786 4 года назад

      @@jlm000 can you Please share the code with timer...Please Sir!!

    • @jlm000
      @jlm000 4 года назад

      @@garvtambi5786 what's your email?

    • @garvtambi5786
      @garvtambi5786 4 года назад

      @@jlm000 garvtambi05@gmail.com
      Btwn Thank you very much Sir 😊

  • @harrnish
    @harrnish 5 лет назад +3

    okay this is something quirky, my guy 💯❤

  • @prakanshuparadise59
    @prakanshuparadise59 4 года назад

    can u help me to correct the below code

  • @shaikheajajuddin8317
    @shaikheajajuddin8317 4 года назад

    Thanks a lot! but i want to save captured image in hard disk on capture image event eg. in c drive or any path so what i have to do?? and i am working in django.

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      Just get the image using its tag, grab it and give an anchor tag on it. See one of my videos on how to download a file. Download it that way!

    • @shaikheajajuddin8317
      @shaikheajajuddin8317 4 года назад +1

      but i want that on capture button event image will get saved in any location eg. in c drive or Desktop directory. Basically my project is to compare 2 faces in 2 images, first image is present in database but second i have to read from camera, so what i have to do? I do not want user to see image as downloaded just it get saved.

    • @aashnasahil4623
      @aashnasahil4623 4 года назад

      @@shaikheajajuddin8317 Aoa Bro Have Done it ??

  • @deepalisonavane3030
    @deepalisonavane3030 3 года назад

    How can i store this img in my mongodb

    • @CodeFlix12
      @CodeFlix12  3 года назад +1

      You store path and not the image

  • @mrlee-oo6zz
    @mrlee-oo6zz 3 года назад +1

    hey sir. wheres the link of the code? actually its hard to find it in description.

    • @CodeFlix12
      @CodeFlix12  3 года назад +1

      You will have to follow the video sir

  • @hariharapamarjane2215
    @hariharapamarjane2215 3 года назад

    how can i automatically get a rgb image from a webcam as a input ?

  • @sugumaris2429
    @sugumaris2429 3 года назад

    how do I save the captured image to the project folder?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      Use js

    • @CodeFlix12
      @CodeFlix12  3 года назад

      Or use my download files using php video and integrate it here

  • @MxIxL
    @MxIxL 3 года назад

    When I run this code in non localhost, other devices (neither mine) can access to camera, do you know why this happens or how can I do it?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      I did not get it, what do you mean by other devices can access camera

    • @MxIxL
      @MxIxL 3 года назад

      @@CodeFlix12 I think I have solved it. The thing is that I'm working this on Django, so I run the script for a specific IP. When I go to that IP on my navigator to see my web site, I am not able to open the camera; the thing is that my project will be public so I needed to test it working on all devices whoe can connect to my web site.
      But first, I need a httpS connection to be secure and be able to access to device's camera. I think the solution is when I get the domain, it will be secure and will be able to access to the camera of every device connected.

    • @CodeFlix12
      @CodeFlix12  3 года назад +1

      Yep and you will need an ssl certificate to get that https connection

    • @MxIxL
      @MxIxL 3 года назад

      @@CodeFlix12 that's right, thx man

  • @pranjalnaphade6953
    @pranjalnaphade6953 3 года назад

    Sir capture image ko file me kese save kre

  • @yahiaelbnna1081
    @yahiaelbnna1081 4 года назад

    how can I download taken webcam capture to the server and after that send his name to the database?

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Just put it in anchor tag with type download to download

    • @yahiaelbnna1081
      @yahiaelbnna1081 4 года назад

      @@CodeFlix12 it's will download at user device not the server !

    • @CodeFlix12
      @CodeFlix12  4 года назад

      I have a video on how to send image to db

    • @yahiaelbnna1081
      @yahiaelbnna1081 4 года назад

      @@CodeFlix12 pro I know how to send image to database but I want when user take a capture this capture download at the server and name send to dB how can I do this

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Oh ok

  • @hariprasanna5682
    @hariprasanna5682 5 лет назад

    Great!!

  • @ninjani-ms.anjvlogs4160
    @ninjani-ms.anjvlogs4160 4 года назад

    capturing photo using wink of eye it is possible ? please help me .

  • @JNET_Reloaded
    @JNET_Reloaded 5 лет назад +2

    Can you share code for this?

    • @CodeFlix12
      @CodeFlix12  5 лет назад +1

      Brother i have written the code very precisely and slowly in the video. I request you to watch the full video and you will get the code . If it still doesn't work then ping me on the mail I will send you for sure ❤️

  • @hanakaewdee7916
    @hanakaewdee7916 2 года назад

    did you know how to make save botton?

    • @CodeFlix12
      @CodeFlix12  2 года назад

      Have a video to download images

    • @hanakaewdee7916
      @hanakaewdee7916 2 года назад

      @@CodeFlix12 oh I can do it but how can i save and Forward a picture to server.

    • @CodeFlix12
      @CodeFlix12  2 года назад

      Yes you can

  • @vasupadh6111
    @vasupadh6111 4 года назад

    pz give your git hub link or source code link for help. i try to make this but i can't

  • @marcelotedescodemiranda401
    @marcelotedescodemiranda401 3 года назад

    I have problem with .getContext :( TypeError: Cannot read property 'getContext' of null ps: i'm doing in react

    • @CodeFlix12
      @CodeFlix12  3 года назад

      There must be problem in syntax above

  • @sandiipsilwal9747
    @sandiipsilwal9747 4 года назад

    what to do for browsers in mobile??

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Brother this is only for webcam and not the front facing camera

    • @duggirambabu7792
      @duggirambabu7792 2 года назад

      It will work in android mobile using chrome browser.

  • @saranjs6611
    @saranjs6611 3 года назад

    Hello Bro, Can we access Scanner machine using javascript ?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      What kind of scanner machine?

  • @aishwaryaiyer9720
    @aishwaryaiyer9720 5 лет назад

    Great

  • @wenxinye8937
    @wenxinye8937 3 года назад

    Hi bro, do you know how can i send the captured image to my server/ other python file and process the image?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      I have a video to send file to db

    • @wenxinye8937
      @wenxinye8937 3 года назад

      @@CodeFlix12 Hi bro, i took a look at the video however, the option is only for choosing a image from our computer. what if i want to use the image that is capture like in this video and upload it?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      You need to see download file using php video, and upload it by downloading

  • @robiulislamrobin2315
    @robiulislamrobin2315 4 года назад

    Everything is fine but when i click on capture button it does not captured.I don't understand why it doesn't capture a image!

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Javascript is not working, look in the console for errors

  • @kamalal_hallaby8566
    @kamalal_hallaby8566 3 года назад

    can insert the code

  • @RohanGhare
    @RohanGhare 4 года назад

    This is working in my device but not working in another device. what should I do?

    • @CodeFlix12
      @CodeFlix12  4 года назад

      What is that another device?

    • @tntrmknn
      @tntrmknn 3 года назад

      @@CodeFlix12 does it work in mobile camera if I'm in mobile view?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      If you have access to yes

  • @n1official
    @n1official 5 лет назад

    Nice :D

  • @jurasv2
    @jurasv2 4 года назад +2

    Hi, somebody knows how to use the phone's back camera?

    • @ZZskpsm
      @ZZskpsm 4 года назад

      www.digitalocean.com/community/tutorials/front-and-rear-camera-access-with-javascripts-getusermedia Perhaps this could help?

    • @duggirambabu7792
      @duggirambabu7792 2 года назад

      *Change the following:*
      video:{
      width: 1280, height: 720
      }
      *to:*
      video:{
      width: 1280, height: 720, facingMode: "environment"
      }
      *Note:* M is capital in facingMode property.

  • @kaedmero
    @kaedmero 5 лет назад

    The web browser doesn't show me any video. Why should it be?

    • @CodeFlix12
      @CodeFlix12  5 лет назад

      There can be 2 possible reasons :
      1. Either you have disabled javascript, in that case the browser won't ask you for the permission to allow web cam
      2. The allow button or webcam won't be functioning correctly on you device. Please check that once.
      Other wise try the code with the link in the description

  • @mazharulislam8380
    @mazharulislam8380 2 года назад

    Laravel can not support this video

  • @manassawant6459
    @manassawant6459 3 года назад

    how to close webcam after image cpature

    • @CodeFlix12
      @CodeFlix12  3 года назад

      It does not cover this functionality

  • @hemantsah8567
    @hemantsah8567 4 года назад

    I want to save this picture in a folder, how to do that

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Save it after capturing from the canvas

    • @noussneed7142
      @noussneed7142 4 года назад

      CodeFlix but how to do taht

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      I have a video to download files, maybe just download it

  • @namitaashodia1383
    @namitaashodia1383 4 года назад +1

    Hey, can you please let me know how we can save the captured image into database?
    Thank You.

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      So take the image via javascript and then look at one of my videos on how to upload a file/image to database. Thanks

    • @chetandivekar1813
      @chetandivekar1813 3 года назад

      Same question

  • @inayatmemon3320
    @inayatmemon3320 4 года назад

    How can we save this image to any location in pc?
    Can you please share the link of your video of how to save image to location

    • @CodeFlix12
      @CodeFlix12  4 года назад

      I have a video on that sir

  • @kgamerop204
    @kgamerop204 4 года назад

    can you also place the link to download the code

  • @prakanshuparadise59
    @prakanshuparadise59 4 года назад

    can you please put this code on github

  • @AnhLe-xm5th
    @AnhLe-xm5th 4 года назад

    How can i access my embedded camera(another device)?

    • @CodeFlix12
      @CodeFlix12  4 года назад

      It can be if you give browser permission

  • @zeslap
    @zeslap 4 года назад

    the span#ErrorMsg is where ???

    • @CodeFlix12
      @CodeFlix12  4 года назад

      If error occurs it will be displayed

  • @marlonmanuel8312
    @marlonmanuel8312 4 года назад

    Turno off the camera?

  • @VivekKumar-bu6ho
    @VivekKumar-bu6ho 4 года назад

    i see no source code in description !!!

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Then you have to follow the video sir

  • @pkltravels6616
    @pkltravels6616 5 лет назад

    bro i writing the code but not working can you please send me

    • @CodeFlix12
      @CodeFlix12  5 лет назад

      Brother I just checked the code and it's working completely fine for me. Maybe you might have missed some bits and pieces. If it still doesn't work, Mail me, i will have a look into it. Thanks❤️

  • @mrksssdev6089
    @mrksssdev6089 3 года назад

    source code sir?

    • @CodeFlix12
      @CodeFlix12  3 года назад

      Check my website for source code

  • @CrackTheHack
    @CrackTheHack 4 года назад +1

    Great Video Bro,
    I have a question
    Do you know how can I take 5 photos and put it in 5 canvas at the same time?
    I would appreciate you answer!!

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      Don't know about that at the moment. Sorry sir!

  • @HELLO-sb9nw
    @HELLO-sb9nw 2 года назад

    It would be better if you had given the source code;

  • @akashingulkar3365
    @akashingulkar3365 3 года назад

    can you give this Source code.

  • @gudboi5596
    @gudboi5596 5 месяцев назад

    code?

    • @CodeFlix12
      @CodeFlix12  4 месяца назад

      Just follow video pls :)

    • @gudboi5596
      @gudboi5596 4 месяца назад

      @@CodeFlix12 bro

  • @babufeisal415
    @babufeisal415 4 года назад

    my video cant appear

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      Webcam access might be denied

    • @babufeisal415
      @babufeisal415 4 года назад

      @@CodeFlix12 how do i fix that

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      Turn on the webcam in computer and enable it

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Then when you run the code, a popup will ask you to allow it or not as I have shown in my video

    • @babufeisal415
      @babufeisal415 4 года назад

      @@CodeFlix12 thank you

  • @judesuthagar3461
    @judesuthagar3461 4 года назад

    can you please share the coding. Thank you

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Please follow the video, sorry

  • @aashnasahil4623
    @aashnasahil4623 4 года назад

    Sir Kindly Share How to Took image with Javascript and move into the folder ! Thanks in Advance

    • @CodeFlix12
      @CodeFlix12  4 года назад +1

      You will have to use PHP sir

    • @aashnasahil4623
      @aashnasahil4623 4 года назад

      @@CodeFlix12 can you please Review my code i really need help ??

    • @aashnasahil4623
      @aashnasahil4623 4 года назад

      @@CodeFlix12 I'm a PHP developer but i don't know how to took image data from canvas with javascript

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Ya sure

  • @arjunpa8648
    @arjunpa8648 5 лет назад

    Nice.
    But there is no css contents and still some elements have css class y

    • @CodeFlix12
      @CodeFlix12  5 лет назад +1

      Brother I have used classes and ID's in the JavaScript portion please watch the whole video. This video does not require any css

  • @harshilparmar9076
    @harshilparmar9076 5 лет назад

    Oh my my

  • @edmartinez5345
    @edmartinez5345 3 года назад

    Great video bro! do you know how to capture 15 photos after a countdown?

  • @rahulwangekar9685
    @rahulwangekar9685 4 года назад +1

    source code

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Follow the video please

    • @rahulwangekar9685
      @rahulwangekar9685 4 года назад +1

      No give the source code or just copy paste in description and I will sub to your channel

  • @anupnair1983
    @anupnair1983 2 года назад

    please upload source code

    • @CodeFlix12
      @CodeFlix12  2 года назад

      Please check my website for source code

  • @LindaLouise625
    @LindaLouise625 4 года назад

    :O > I would like to plug in the USB from my camocam and view.

  • @DrProductivity
    @DrProductivity 4 года назад

    dude he said " you can use it to see who visits you site" like wtf are you crazy ? creep

    • @CodeFlix12
      @CodeFlix12  4 года назад

      Sorry sir I didn't mention that

  • @codeflex5180
    @codeflex5180 5 лет назад

    Cool, brother!