kasperkamperman / mobilecameratemplate Goto Github PK

View Code? Open in Web Editor NEW

195.0 10.0 79.0 29.21 MB

A HTML5, JS, CSS Camera interface template. Feel free to use it in your next Computer Vision or AI project.

Home Page: https://www.kasperkamperman.com/blog/camera-template/

License: MIT License

HTML 10.57% JavaScript 67.58% CSS 21.85%

camera canvas-2d-context computer-vision ai mobile-first javascript webrtc-demos

mobilecameratemplate's Introduction

Mobile (and Desktop) Camera App Template (HTML, CSS, JS and WebRTC)

Release 17-05-2020: Replaced DetectRTC with own code to solve a bug on iOS 13.4.1

I like to experiment with Computer Vision and AI API's (like Azure Cognetive Services, Google Cloud Vision, IBM Watson) to see if I can utilise them for some ideas.

The most easy way to test those scripts and APIs them is by directly making a photo and sending image data to the API/script, instead of uploading files. I didn't find a fast mobile first camera template for HTML5 as a starting point for my prototypes, so I developed one myself. The interface setup is mainly inspired by the standard Android and iOS Cameras.

The template doesn't do anything with the image(canvas) data yet, I'll leave that up to you. If you need help with integrations or app development (PHP, Vue), feel free to contact me.

Feel free to use it in your next Computer Vision or AI project.

Requirements

WebRTC is only supported on secure connections. So you need to serve it from https. You can test and debug in Chrome from localhost though (this doesn't work in Safari).
A recent OS and browser. It should work on recent Phones and OS-es. If it isn't, please let me know (issue) (including a suggestion to fix it). Also add the debugging info in the console.

Functionalities

Fullscreen mode (not on Safari mobile (iOS))
Take Photo
Flip Camera (environment / user)
Supports both portrait and landscape mode

Check the demo

Used Libraries:

Fullscreen functionality: Screenfull.js
WebRTC cross-browser: Adapter.js
UI click sound: Howler.js

Used Assets:

"Basic Click Wooden" - by GameAudio
Material Design Icons (camera front, camera rear, photo camera, fullscreen, fullscreen exit)

Tested with:

Chrome Android 8.0 (Nokia 5)
Chrome 65 - Chrome 80
Safari 11.0.3, 13.1
Safari mobile - iOS 11, iOS 12, iOS 13.4.1

Created by

Kasper Kamperman

Credits and a link to my website are always appreciated. I'm always curious how people end up using my stuff, so feel free to mail or send a tweet @kasperkamperman.

Good WebRTC resources

mobilecameratemplate's People

Contributors

Stargazers

Watchers

mobilecameratemplate's Issues

switch camera on PC

Switch camera is't work on pc(i have 2 cam on my laptop, native and usb cam ), becouse PC is't support facingMode user and environment. I think you should use deviceId, when you detect pc or laptop on client browser

How can i display capture image?

any ways to capture image display and save the image in disk..

ViewFinder

Hey @kasperkamperman, first of all thanks for the great project and clean code with document.

I have a question, is there any way I can add ViewFinder kind of functionality while working on phone camera from html? If yes, any idea how to do that? I have to provide document scanning (just picture taking not reading/OCR) and for that I want to add some kind of frame while camera preview stream is ON. This is something like the box you can see in following image.

Any help in this would be a great help. I am trying to work on this but no idea where to start. I know this is possible for sure because there are many browser based barcode scanner do offer such feature but I want to add a rectangle on screen and want user to fit document in that box.

Thanks.

could not find camera

downloaded current code and it could not fix camera says browser not support camera etc. but works fine with demo link on the same mobile.
Please, advice

demo flip camera button not show on iphone

OS
iOS 13.3
iPhone 8 Plus
Safari

Thank you !

install External webcam device

Hello, thanks for your source code, the source code used my local server, and access my mobile, when used the browser then show Please install External webcam device, but my mobile already have cam.

How to Save capture images?

Hello, camera good work and capture ok,
but how i saved capture images, my mobile images folder automatically?

I need help

I try test your demo https://demo.kasperkamperman.com/mobilecamtemplate open with safari on iphone it's can open camera of mobile . But when i try run code in github then try open safari it's can't open camera of mobile. What happen ? .. thank you

is it possible to add video recording function?

doesn't work on 13.4.1

Because of dependency on DetectRTC.
See this open issue:
muaz-khan/DetectRTC#88

Some images having problems

Tried to run your code in different devices and I am facing issues with the front camera of some Android devices. Android version is 9. Please see the attached image. Some images are generated as layers like this. Is there anyway I can fix this issue or am I doing something wrong.

Thank you for your great work. Keep it up.

what is error?

Mobile camera is not supported by browser, or there is no camera detected/connected