Getusermedia 在 api 19 台设备的网络视图中不起作用
Getusermedia does not work in webview for api 19 device
我有一个使用获取用户媒体的 MVC 4 网络应用程序。我还有一个针对 api 18 的 android webview，设备是 api 19，但我从控制台日志中得到的错误是
source: https://dev.*****.com/truck/home/addpic?truck=C090P (0)
11-25 11:40:19.705 32382-32382/*****.com.trucksurvey I/chromium: [INFO:CONSOLE(0)] "The page at https://dev.****.com/truck/home/addpic?truck=C090P displayed insecure content from android-webview:default_video_poster/8264335106592469907.
该应用程序在 chrome 的笔记本电脑上运行良好，但在 phone 上我无法运行。
附有SSL证书，它使用getusermedia()来使用相机并拍照代码如下：
来自 MVC 应用程序的 JS：
/*
** My jquery/js for handleing the image taking portion
**
*/
if (window.location.href.indexOf("addpic") > -1) {
var canvas = document.getElementById("kfCanvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video");
var canvas2 = document.getElementById("Canvas"),
context2 = canvas2.getContext("2d"),
video = document.getElementById("video");
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function () {
// Grab elements, create settings, etc.
var videoObj = { "video": true, video: {width:400, height:300},"facingMode": "environment" },
errBack = function (error) {
console.log("Video capture error: ", error.code);
$("#drawingForm").hide();
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
document.getElementById("snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 800, 600);
context2.drawImage(video, 0, 0, 400, 300);
// Generate the image data
var Pic = canvas.toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
$("#vid").hide();
$("#drawingForm").show();
$('kfCanvas').hide();
});
$("#btnSave").click(function () {
var form = $("#drawingForm");
var image = document.getElementById("kfCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$("#imageData").val(image);
form.submit();
});
$("#btnRedo").click(function () {
$("#vid").show();
$("#drawingForm").hide();
});
}
我对 MVC 4 的看法：
@model truckEval.Models.DrawingModel
@{
ViewBag.Title = "Add a picture";
}
<div style="margin-left:0px;">
<div style="position:absolute;z-index:1000;max-width:480px;" id="vid">
<button id="snap" >Snap Photo</button>
<video id="video" width="400" height="300" autoplay></video>
</div>
<div style="position:absolute;">
@using (Html.BeginForm(null, null, FormMethod.Post, new { id ="drawingForm" }))
{
<input type="hidden" name="imageData" id="imageData" />
<input type="button" id="btnSave" value="Save Image" />
<input type="button" id="btnRedo" value="Try Again" />
<input type="hidden" name="trucknum" value="@ViewBag.trucknum" />
<input type="hidden" name="tID" value="@ViewBag.ID" />
<canvas id="Canvas" width="400" height="300">Sorry, your browser doesn't support canvas technology.
</canvas>
}
</div>
<div style="display:none">
<canvas id="kfCanvas" width="800" height="600">Sorry, your browser doesn't support canvas technology.
</canvas>
</div>
</div>
<div style="margin-left:500px;">
<h2>Truck# @ViewBag.ID</h2>
<div style="position:relative;">
<a class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all" style="padding-top:10px;padding-bottom:10px;width:25%;" href="@Url.Action("Index","home")" >Back home</a>
</div>
<br />
</div>
在线帮助建议我将我的网络设置设置为以下
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
但这只是 api 21 并不能解决我的问题，实际上应用程序只是崩溃了。如何在 phone.
上为 webview 和 chrome 修复此问题
我的android网页浏览代码：
import android.annotation.TargetApi;
import android.content.Intent;
import android.net.Uri;
import android.net.http.SslError;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.PermissionRequest;
import android.webkit.SslErrorHandler;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private String TAG ="MainActivity";
public WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//webview use to call own site
webview =(WebView)findViewById(R.id.webView);
// for regular sites
// webview.setWebViewClient(new WebViewClient());
// for ssl certs that look invalid
webview.setWebViewClient(new SSLTolerentWebViewClient());
webview.getSettings().setJavaScriptEnabled(true);
if (Build.VERSION.SDK_INT >= 21) {
webview.getSettings().setMixedContentMode( WebSettings.MIXED_CONTENT_ALWAYS_ALLOW );
}
// for camera only
webview.getSettings().setAllowContentAccess(true);
// webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccessFromFileURLs(true);
webview.getSettings().setAllowUniversalAccessFromFileURLs(true);
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
webview.setWebChromeClient( new WebChromeClient(){
@Override
public void onPermissionRequest(final PermissionRequest request){
Log.d(TAG, "onPermissionRequest");
MainActivity.this.runOnUiThread(new Runnable(){
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void run(){
request.grant(request.getResources( ));
}
});
}
});
webview.getSettings().setAllowContentAccess(true);
webview.getSettings().setDomStorageEnabled(true);
if (Build.VERSION.SDK_INT <= 18) {
webview.getSettings().setSavePassword(false);
} else {
// do nothing. because as google mentioned in the documentation -
// "Saving passwords in WebView will not be supported in future versions"
}
webview.getSettings().setSaveFormData(false);
webview.clearFormData();
String url = "https://dev.*****.com/truck";
webview.loadUrl(url);
}
// for ssl certs that appear invalid
private class SSLTolerentWebViewClient extends WebViewClient {
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed(); // Ignore SSL certificate errors
}
}
}
这是因为 API 18 或更低版本在官方文档中定义的 "quirks mode" 中运行。
Note: If your targetSdkVersion is set to "18" or lower, WebView
operates in "quirks mode" in order to avoid some of the behavior
changes described below, as closely as possible—while still providing
your app the performance and web standards upgrades. Beware, though,
that single and narrow column layouts and default zoom levels are not
supported at all on Android 4.4, and there may be other behavioral
differences that have not been identified, so be sure to test your app
on Android 4.4 or higher even if you keep your targetSdkVersion set to
"18" or lower.
更多信息：https://developer.android.com/guide/webapps/migrating.html
我有一个使用获取用户媒体的 MVC 4 网络应用程序。我还有一个针对 api 18 的 android webview，设备是 api 19，但我从控制台日志中得到的错误是
source: https://dev.*****.com/truck/home/addpic?truck=C090P (0)
11-25 11:40:19.705 32382-32382/*****.com.trucksurvey I/chromium: [INFO:CONSOLE(0)] "The page at https://dev.****.com/truck/home/addpic?truck=C090P displayed insecure content from android-webview:default_video_poster/8264335106592469907.
该应用程序在 chrome 的笔记本电脑上运行良好，但在 phone 上我无法运行。
附有SSL证书，它使用getusermedia()来使用相机并拍照代码如下：
来自 MVC 应用程序的 JS：
/*
** My jquery/js for handleing the image taking portion
**
*/
if (window.location.href.indexOf("addpic") > -1) {
var canvas = document.getElementById("kfCanvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video");
var canvas2 = document.getElementById("Canvas"),
context2 = canvas2.getContext("2d"),
video = document.getElementById("video");
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function () {
// Grab elements, create settings, etc.
var videoObj = { "video": true, video: {width:400, height:300},"facingMode": "environment" },
errBack = function (error) {
console.log("Video capture error: ", error.code);
$("#drawingForm").hide();
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
document.getElementById("snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 800, 600);
context2.drawImage(video, 0, 0, 400, 300);
// Generate the image data
var Pic = canvas.toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
$("#vid").hide();
$("#drawingForm").show();
$('kfCanvas').hide();
});
$("#btnSave").click(function () {
var form = $("#drawingForm");
var image = document.getElementById("kfCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$("#imageData").val(image);
form.submit();
});
$("#btnRedo").click(function () {
$("#vid").show();
$("#drawingForm").hide();
});
}
我对 MVC 4 的看法：
@model truckEval.Models.DrawingModel
@{
ViewBag.Title = "Add a picture";
}
<div style="margin-left:0px;">
<div style="position:absolute;z-index:1000;max-width:480px;" id="vid">
<button id="snap" >Snap Photo</button>
<video id="video" width="400" height="300" autoplay></video>
</div>
<div style="position:absolute;">
@using (Html.BeginForm(null, null, FormMethod.Post, new { id ="drawingForm" }))
{
<input type="hidden" name="imageData" id="imageData" />
<input type="button" id="btnSave" value="Save Image" />
<input type="button" id="btnRedo" value="Try Again" />
<input type="hidden" name="trucknum" value="@ViewBag.trucknum" />
<input type="hidden" name="tID" value="@ViewBag.ID" />
<canvas id="Canvas" width="400" height="300">Sorry, your browser doesn't support canvas technology.
</canvas>
}
</div>
<div style="display:none">
<canvas id="kfCanvas" width="800" height="600">Sorry, your browser doesn't support canvas technology.
</canvas>
</div>
</div>
<div style="margin-left:500px;">
<h2>Truck# @ViewBag.ID</h2>
<div style="position:relative;">
<a class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all" style="padding-top:10px;padding-bottom:10px;width:25%;" href="@Url.Action("Index","home")" >Back home</a>
</div>
<br />
</div>
在线帮助建议我将我的网络设置设置为以下
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
但这只是 api 21 并不能解决我的问题，实际上应用程序只是崩溃了。如何在 phone.
上为 webview 和 chrome 修复此问题我的android网页浏览代码：
import android.annotation.TargetApi;
import android.content.Intent;
import android.net.Uri;
import android.net.http.SslError;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.PermissionRequest;
import android.webkit.SslErrorHandler;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private String TAG ="MainActivity";
public WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//webview use to call own site
webview =(WebView)findViewById(R.id.webView);
// for regular sites
// webview.setWebViewClient(new WebViewClient());
// for ssl certs that look invalid
webview.setWebViewClient(new SSLTolerentWebViewClient());
webview.getSettings().setJavaScriptEnabled(true);
if (Build.VERSION.SDK_INT >= 21) {
webview.getSettings().setMixedContentMode( WebSettings.MIXED_CONTENT_ALWAYS_ALLOW );
}
// for camera only
webview.getSettings().setAllowContentAccess(true);
// webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccessFromFileURLs(true);
webview.getSettings().setAllowUniversalAccessFromFileURLs(true);
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
webview.setWebChromeClient( new WebChromeClient(){
@Override
public void onPermissionRequest(final PermissionRequest request){
Log.d(TAG, "onPermissionRequest");
MainActivity.this.runOnUiThread(new Runnable(){
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void run(){
request.grant(request.getResources( ));
}
});
}
});
webview.getSettings().setAllowContentAccess(true);
webview.getSettings().setDomStorageEnabled(true);
if (Build.VERSION.SDK_INT <= 18) {
webview.getSettings().setSavePassword(false);
} else {
// do nothing. because as google mentioned in the documentation -
// "Saving passwords in WebView will not be supported in future versions"
}
webview.getSettings().setSaveFormData(false);
webview.clearFormData();
String url = "https://dev.*****.com/truck";
webview.loadUrl(url);
}
// for ssl certs that appear invalid
private class SSLTolerentWebViewClient extends WebViewClient {
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed(); // Ignore SSL certificate errors
}
}
}
这是因为 API 18 或更低版本在官方文档中定义的 "quirks mode" 中运行。
Note: If your targetSdkVersion is set to "18" or lower, WebView operates in "quirks mode" in order to avoid some of the behavior changes described below, as closely as possible—while still providing your app the performance and web standards upgrades. Beware, though, that single and narrow column layouts and default zoom levels are not supported at all on Android 4.4, and there may be other behavioral differences that have not been identified, so be sure to test your app on Android 4.4 or higher even if you keep your targetSdkVersion set to "18" or lower.
更多信息：https://developer.android.com/guide/webapps/migrating.html