Menu
I would like to make a website that can open the camera on mobile like this example.
On mobile, by clicking the AR icon a camera app is opened. Does anyone know how to do this? More specifically, what kind of libraries and JavaScript libraries are required.
926
Progressive web apps can also access device features, like the camera, GPS, contact book, and calendar.
On Android devices, you can access the camera from the Browser widget. The feature is available on devices with Android OS 5.0 and later.
In addition to PWAs being able to work on all devices, it also doesn't matter which operating system the user has. They work on both Apple and Android devices.
You can use Progressive Web Apps (PWAs) for a fast web experience on your computer or mobile device. You can install the PWA for faster access and additional functionality, like more storage for content to use offline. On your Android device, open Chrome . Go to a website with a PWA that you want to install. Tap Install.
Build and serve the static files in build directory to get the following view, which will launch the camera of your mobile device (android) by clicking the camera icon on the UI after installing the PWA app in your device. In this article, you were able to learn how to create a simple PWA which can access a device’s camera, using React.
“The numbers don’t lie! Companies that have launched Progressive Web Apps have seen impressive results. For example, Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%.
Like native apps though they can be launched from a home screen icon, send push notifications to the user’s device, load in a split second, and be built to work offline. Progressive web apps are not separate from your site.
If I am getting you right then you are talking about adding AR to the web so that you can provide an AR experience to your users.
You can achieve these types of things using the immersive web. The immersive web means virtual world experiences hosted through the browser. This covers entire virtual reality (VR) experiences surfaced in the browser or VR-enabled headsets like Google's Daydream, Oculus Rift, Samsung Gear VR, HTC Vive, and Windows Mixed Reality Headsets, as well as augmented reality experiences developed for AR-enabled mobile devices.
For web applications to make use of Augmented Reality (AR) capabilities, they must be able to identify real-world geometry. For example, a web application may wish to detect a horizontal plane (e.g, the floor) in the camera feed, and render an object (e.g, a mouse) on that plane. For this thing, you can use the hit-test API. This API would allow the developer to cast a ray into the real world and return a list of intersection points for that ray against whatever world understanding the underlying system gathers.
Learn more about hit-test API - https://github.com/immersive-web/hit-test/
You can read more about immersive-web here - https://developers.google.com/web/updates/2018/05/welcome-to-immersive
81
If you are looking to create a custom AR application, Google Developers has a tutorial on using the WebXR API. However, if you just want to display a model object (such as the Logitech mouse), you can use Google's <model-viewer> component, which will launch a separate AR viewer on supported devices.
If you are not looking to build an AR application and just want access to the camera stream for whatever reason, you can use the MediaDevices web API, specifically getUserMedia(). If you do not need a live video feed and just want a video file, an <input> element also has attributes that allows users to upload pre-recorded videos, as well as capture new ones. Google Web Fundamentals has more information about these different options of capturing video, depending on your use-case, as well as code examples and tutorials.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
