How to enable front camera in webview for Android

Question

How to enable the front camera in web view? I have included functions in AndroidManifest.xml

<uses-feature android:name="android.hardware.camera" android:required="true" /> <uses-feature android:name="android.hardware.camera.front" android:required="true" /> 

The camera will not be used for taking photos or recording, just to turn on the front camera.

When I go to the website using the phone browser, the phone’s camera works once, allowing the message. How does this work with web browsing?

The html file has a Canvas and Video tag that displays a webcam. He does not record or photograph, he simply shows you the view of the camera.

Here is the html code

  <canvas id="inCanvas" width="500" height="500" style="display:none"></canvas> <video id="inputVideo" width="100" height="100" autoplay loop ></video> 

It works with a webcam, but not with a webview in Android.

Answer 1

I did not quite understand, but I could do one of the following two what you want.

1) access camera and just show the video on the screen (without capturing an image):

HTML:

  <canvas id='canvas' width='100' height='100'></canvas> 

JS:

  var onFailSoHard = function(e) { console.log('failed',e); } window.URL = window.URL || window.webkitURL ; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; var video = document.querySelector('video'); if(navigator.getUserMedia) { navigator.getUserMedia({video: true},function(stream) { video.src = window.URL.createObjectURL(stream); },onFailSoHard); } var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); setInterval(function(){ ctx.drawImage(video,0,0); }, 100); } 

2) capture the camera image:

here is a doc .

 navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } function onFail(message) { alert('Failed because: ' + message); } 

Answer 2

I would use something similar to the following as a script to access a phone camera.

 <script> var errorCallback = function(e) { console.log('Rejected!', e); }; // Not showing vendor prefixes. navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia. // See crbug.com/110938. video.onloadedmetadata = function(e) { // Ready to go. Do some stuff. }; }, errorCallback); </script> 

The following guide is used to help me. Hope he installs yuo on the right track :)