android - 如何使用相机作为 Facebook Android Webview 中文件输入的来源

Question

我们有一个带有文件输入的 HTML5 页面:

<input accept="image/*" type="file">

现在在 Chrome、Safari、Firefox(Android 或 iOS)和 Facebook iOS 的 WebView 中，这将允许从相机胶卷或相机中选择图像。

然而，当在 Android 上的 Facebook Webview 中使用它时，它只会提供图像/最近/谷歌驱动器/照片等选项，但没有相机。

这是错误还是 Facebook 有意识的选择？有什么方法可以使用手机摄像头作为 Facebook Android WebView 中图像的来源吗？

Answer 1

最后，我对这个问题的解决方案是创建一个带有本地流的视频元素:

var videoCamera = document.createElement('video');
videoCamera.setAttribute("id", "video");
videoCamera.setAttribute("height", 320);
videoCamera.setAttribute("width", 480);
videoCamera.setAttribute("video", true);
videoCamera.autoPlay = true;
$('#video-container').prepend(videoCamera);


if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
     video.src = window.URL.createObjectURL(stream);
     video.play();
     localStream = stream;
  });
}

然后我会有一个按钮，基本上可以获取当前帧并将其放在 Canvas 上:

 var canv = document.createElement('canvas');
 canv.width = $('#video').width();
 canv.height = $('#video').height();

 var ctx=canv.getContext("2d");

 ctx.drawImage(video, 0, 0,$('#video').width(), $('#video').height());
 ctx.restore();
 localStream.getVideoTracks()[0].stop();

一旦您可以在 Canvas 上获取快照，您就可以将其导出到 Base64:

canv.toDataURL();