Open camera on mobile via progressive web app

Question

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.

Answer 1

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 (eg, the floor) in the camera feed, and render an object (eg, 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

Answer 2

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.

Answer 3

As long as you configure accept and capture correctly, you can open the phone album, camera, microphone on android enter image description here