如何在android的webview中启用前置摄像头

Posted 2023-03-31

【中文标题】如何在android的webview中启用前置摄像头

【英文标题】：How to enable front camera in webview for android

【发布时间】：2015-01-12 18:44:14

【问题描述】：

如何在 Webview 上启用前置摄像头？我已启用 androidManifest.xml 中的功能

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

摄像头不会用于拍照或录音，只是为了打开前置摄像头。

当我使用手机浏览器访问网站时，手机摄像头工作一次，允许提示消息。这如何与 webview 一起使用？

在 html 文件中有一个 Canvas 和 Video 标签显示网络摄像头它不记录或拍照它只是显示相机视图。

这里是html代码

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

它适用于网络摄像头，但不适用于 android 中的 webview。

【参考方案1】：

我不太明白，但我认为可能有以下两种之一，你想要什么。

1) 访问相机并仅在屏幕上显示视频（不捕获 图片）：

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) 从相机捕捉图像：

here 是 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);

【讨论】：

数字 1 或 2。我只想打开相机没有录音或照片

数字 1.. 仅用于打开相机并将其实时显示在屏幕上.. 没有录制

手机上没有任何显示。你在网络浏览器上试试吗？

适用于.. Web 和 android.. 您的手机网络应符合 html5.. 姜饼以上的版本就足够了

是的。我正在构建一个 APK 并运行它。您认为这是设备问题吗？

【参考方案2】：

我会使用类似于下面的脚本来访问手机摄像头。

<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 教程来帮助我。 希望它能让你走上正确的道路:)