Ngx Webcam with angular | Accessing the webcam in angular | Capturing image the live image

Подписаться 3 тыс.

Просмотров 9 тыс.

50% 1

In this video you will learn how to access webcam in angular. How to capture image and preview an image using ngx-webcam in angular.
How you can get the image as Data URL and base 64 string.
Github link with all the code access:
github.com/sai...
To know about angular concepts click on the below playlist link
• Angular Tutorials
To know about Angular Reactive forms click on the below playlist link
• Angular Reactive forms
To know about Angular unit testing click on the below playlist link
• Angular Unit Testing
To know about Angular Reactive forms Unit testing click on the below playlist link
• Angular Unit Testing
To know about Javascript concepts click on the below playlist link
• Concepts of JavaScript
To know about Javascript Objects click on the below playlist link
• Javascript Objects
#angular #ngx-webcam #webcam #ngx #livestreaming

Опубликовано:

19 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

@luczztem 7 месяцев назад

you are a hero man great video, very simple and well explained thanks bro

@techshareskk 6 месяцев назад

Welcome 🙏 thanks a lot

@oscarleon5928 2 года назад

Muchas gracias amigo, logre avanzar en mi proyecto gracias a ti, un saludo desde Guatemala

@techshareskk 2 года назад

Thank you.

@alexoxley5058 Год назад

So helpful and actually works, thank you!

@techshareskk Год назад

Thank you Alex Oxley 🤟

@arshad4630 8 месяцев назад

Well done ❤

@Daniblueboy 2 года назад

awesome work, really helped out

@techshareskk 2 года назад

Thank you

@keertipathak7482 9 месяцев назад

hii, so its so helpful, thank you.. it is working on desktop with webcam and also loptop and mobile but not able to open front camera in mobile with this

@techshareskk 9 месяцев назад

First a fall thank you. For your question there is a property called allowCameraSwitch which will receive boolean value you can add this property as input property for webcam selector and the. You can see the switching camera option.

@techshareskk 9 месяцев назад

Even there is an output event called cameraSwitched which will be emitted when we switch camera and you can do some functionality even there if you want to

@yoothmag Год назад

helped so much, thank you

@s3fa840 2 года назад

thank you so much. very very helpful. new subscriber

@ahmedbahpullo8544 2 года назад

good job

@bertrandmappa7448 Год назад

thank you so much

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

Why doesn't the camera activate on an Android device? ...On devices with Windows and/or Mac iOS it works correctly

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

The plugin is related to web access but for android it should have confirmation and access should be allowed We have to make other logics for it to make the access for android devices

@pulkitdixit1887 9 месяцев назад

@Techshareskk It's working on server system or not, I mean I have implement that functionality for image capture then deploy the code on server, now that functionality is working on all ip?

@techshareskk 9 месяцев назад

Yeah it will never depend on the servers or Ip

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

Hi bro How can save captured image into any folder or create new folder and save that image

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

If you want to download that image we can do that by using some download logic and that stores in local system

@dannieljocol4105 11 месяцев назад

How to set maximum resolution for download file?

@techshareskk 11 месяцев назад

0.92 is the maximum image quality you can set and you can use imageQuality property

@srihary 7 месяцев назад

How to access scanner device, that was connected to my cpu through usb, now how to read qr codes with that scanner in angular. Iam using scanner Zebra DS2200 device

@srihary 7 месяцев назад

When I connect external devices those are not showing in navigator.mediadevices object, I think due to chrome security policy not allowing to access

@techshareskk 7 месяцев назад

Yeah could be security policy try disabling security policy and a new browser will open it think you can try that way

@techshareskk 7 месяцев назад

There is a case which we did but to scan something we may need to have mobile chipset and that should be connected to your scanner and that should passed to chip set chip set should pick the data and showcase that on the UI of your browser… by using some backend services May be try this way and investigate I did not work on this type of scenario but there is a chance to do this way

@srihary 7 месяцев назад

@@techshareskk yaa, okk bro I will try and thanks for you reply

@rahmanasadur8167 Год назад

Really GREAT! But i am getting image in reverse mode. If i could send an screen shoot i could show the actual fact. Please reply....

@techshareskk Год назад

Sure bro just ping me over Instagram @techshareskk

@asenathikondlo2112 2 года назад

Hello, this has been very helpful thank you. Is there a way I can use the captured image and send it to a storage as an image object and not base64 or image url?

@techshareskk 2 года назад

You can do it as image URL.

@kishorek.konangi1549 2 года назад

Hey @sai, is there any zoom pption avaialble for this plugin tried my best but didnt find any

@techshareskk 2 года назад

Neee to do a work around kishore.

@carlose1462 2 года назад

Hi, mi webcam it isn't getting width and height from this code video:{ width:500, height:500 } Instead, it show me the megapixels quality, if I write 1080 or more (in Width and Height), quality increases and not window size. I'm working in laptop Dell with integrated camera, not extern webcam... Could be that?

@techshareskk 2 года назад

Width and height property should only increase the size but not the quality can you check exactly how are you giving this configurations ?

@techshareskk 2 года назад

Image quality is the property which increase the quality of an image after capturing from the webcam.

@carlose1462 Год назад

@@techshareskk Yes, I was check it line by line, but doesn' matter :) Other question: How I can save the photo file in my project folder? I didn't found anything about that :(

@techshareskk Год назад

You have to use file saver npm and you can pass the base64 or image format to that and can save that image

@TheMostafa5000 Год назад

Nice Job! How can we capture a video and save it?

@techshareskk Год назад

You cant capture complete videos it may need some streaming mechanism and should save the streams to save them as video 📹 .

@s3fa840 2 года назад

would there be a way to add a button to download the image after capturing?

@techshareskk 2 года назад

We can do that storing that values

@hasithaamruthavakkula5352 2 года назад

can we capture on mobile as well!! How can we capture multiple images and proceed them? Is it possible, how can i achieve it

@techshareskk 2 года назад

Good question. I did not tried on mobile devices but as per my knowledge this has to work even on mobile with some small minor code changes. Anyway will clone that and will make you clear on this Hasitha

@hasithaamruthavakkula5352 2 года назад

@@techshareskk Okay sure Thank you and can we capture multiple images and proceed them?

@techshareskk 2 года назад

Ha you can capture each image and store in one array so you can proceed further.

@techshareskk 2 года назад

I tried this on mobile it is working but you should make sure your application is running in https server when you are using in mobile other wise this will not work without secured URL.

@S.h.iv.an.i Год назад

how to get live stream through ip camera ?

@techshareskk Год назад

For that we need to access live streaming using some node js or any other libraries

@S.h.iv.an.i Год назад

@@techshareskk can u please help in that. I need to stream live feed of ip camera

@techshareskk Год назад

@@S.h.iv.an.i sure will check that and will try to make the video on this. Please send me exact requirements so that i can try it out the same way you are expecting

@S.h.iv.an.i Год назад

@@techshareskk can we connect on linkedin?

@techshareskk Год назад

@@S.h.iv.an.i sure you can search on my name Sai Kumar korthivada

@muhammadzaid2498 2 года назад

how to stop the stream?

@techshareskk 2 года назад

By using some conditions you should hide the webcam component from the html and then it stops streaming and when you want enable that condition

@pulkitdixit1887 9 месяцев назад

@Techshareskk It's working on server system or not, I mean I have implement that functionality for image capture then deploy the code on server, now that functionality is working on all ip?

@techshareskk 9 месяцев назад

It should work even in all the IPs until we are not allowing to use webcam This will not depend on IPs or servers it always depends on the system browser and permissions given for camera access