1
Ich habe eine MVC 4 Web App, die get Benutzermedien verwendet. Ich habe auch ein Android webview die api 18 ausgerichtet ist, das Gerät api ist 19, aber die Fehler, die ich aus dem Konsolenprotokoll erhalten, istGetusermedia funktioniert nicht in webview für api 19 Gerät
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.
Die App funktioniert auf einem Laptop in Chrom feinen, auf einem Telefon, das ich nicht bekommen kann es funktioniert aber.
Es ist ein SSL-Zertifikat beigefügt, und es verwendet getUserMedia(), um die Kamera zu verwenden und ein Bild zu machen ist hier der Code:
JS von MVC App:
/*
** 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();
});
}
meiner Ansicht von 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>
die Online-Hilfe schlage ich die folgenden
meine Web-Einstellungen webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
aber das ist nur api 21, die mein Problem nicht beheben, eigentlich stürzt die App gerade ab. Wie behebe ich dies für die Webansicht und Chrome auf einem Telefon.
mein android webview Code:
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
}
}
}
Haben Sie den Debugger verwendet und überprüft, dass der handler.proceed() tatsächlich aufgerufen wird? –
Ja, ja, tut es. Es dient der Seite gut, es führt nur nicht das Javascript für getusermedia. Die Seite wird geladen. minus die Funktionalität. – Danimal