在Android WebView中使用HTML JS打开相机？ [英] Open Camera in Android WebView using HTML JS?
问题描述
我想在我的本机应用程序中的Android手机的webview中使用HTML JavaScirpt访问摄像头。我试过很多解决方案没有帮助。 html字符串如下，
I want to access camera using HTML JavaScirpt in a webview in Android phone within my native application. I tried a lot of solutions none were helpfull. The html string is as follows,
String html =
"<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<meta charset='utf-8'>"+
"<title>Display Webcam Stream</title>"+
"<style>"+
"#container {"+
" margin: 0px auto;"+
" width: 500px;"+
" height: 375px;"+
" border: 10px #333 solid;"+
"}"+
"#videoElement {"+
" width: 500px;"+
" height: 375px;"+
" background-color: #666;"+
"}"+
"#canvas {"+
" width: 500px;"+
" height: 375px;"+
" background-color: #CCC;"+
"}"+
"</style>"+
"</head>"+
"<body>"+
"<input id='fileselect' type='file' accept='image/*' capture='camera'>"+
"<div id='container'>"+
" <video autoplay id='videoElement'>"+
"</video>"+
"</div>"+
"<canvas id='canvas' width='500' height='375'></canvas>"+
"<input type='button' value='Save' id='save' />"+
"<img id='imgtag' src='' width='500' height='375' alt='capture' /> "+
"<script>"+
"var video = document.querySelector('#videoElement');"+
"navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;"+
"if (navigator.getUserMedia) { "+
" navigator.getUserMedia({video: true}, handleVideo, videoError);"+
"} "+
"function handleVideo(stream) {"+
" video.src = window.URL.createObjectURL(stream);"+
"}"+
"function videoError(e) {"+
"}"+
"var v,canvas,context,w,h;"+
"var imgtag = document.getElementById('imgtag');"+
"var sel = document.getElementById('fileselect');"+
"document.addEventListener('DOMContentLoaded', function(){"+
" v = document.getElementById('videoElement');"+
" canvas = document.getElementById('canvas');"+
" context = canvas.getContext('2d');"+
" w = canvas.width;"+
" h = canvas.height;"+
"},false);"+
"function draw(v,c,w,h) {"+
" if(v.paused || v.ended) return false;"+
" context.drawImage(v,0,0,w,h);"+
"var uri = canvas.toDataURL('image/png');"+
"imgtag.src = uri;"+
"}"+
"document.getElementById('save').addEventListener('click',function(e){"+
" draw(v,context,w,h);"+
"});"+
"var fr;"+
"sel.addEventListener('change',function(e){"+
" var f = sel.files[0];"+
" fr = new FileReader();"+
" fr.onload = receivedText;"+
" fr.readAsDataURL(f);"+
"})"+
"function receivedText() {"+
" imgtag.src = fr.result;"+
"} "+
"</script>"+
"</body>"+
"</html>";
我正在将此字符串加载到我的webview，
I am loading this string into my webview,
WebView browser;
browser=(WebView)findViewById(R.id.WebView01);
browser.getSettings().setJavaScriptEnabled(true);
browser.getSettings().setPluginsEnabled(true);
browser.addJavascriptInterface(new WebAppInterface(this), "Android");
browser.loadDataWithBaseURL("", html, mimeType, encoding, "");
我总是在日志消息中出现异常：
I always get an exception in the log messages:
捕获属性作为枚举已被弃用，请将其作为布尔值使用，并指定accept属性中应接受的媒体类型。 （或）block webkit draw
"Using the 'capture' attribute as an enum is deprecated. Please use it as a boolean and specify the media types that should be accepted in the 'accept' attribute." (or) "block webkit draw"
任何帮助都会很棒。提前感谢
Any help will be greatfull. Thanks in advance
推荐答案
将捕获属性更改为capture ='true'并尝试。
change the capture attribute as "capture='true'" and try it.
这篇关于在Android WebView中使用HTML JS打开相机？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
