Getusermedia在api 19设备的webview中不工作。

Question

我有一个MVC 4网络应用程序，使用get用户媒体。我还有一个android webview，它的目标是api 18，设备是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.

这个应用程序在笔记本电脑上可以正常工作，而在手机上，我无法让它正常工作。

这里附加了一个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，它没有解决我的问题，实际上，应用程序只是崩溃。我如何为手机上的webview和chrome修复这个问题。

我的android webview代码：

 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
    }
}
}

Answer 1

这是因为API 18或更低版本在正式文档中定义的“古怪模式”中运行。

注意:如果您的targetSdkVersion设置为"18“或更低，则WebView以”古怪模式“操作，以尽可能避免下面描述的一些行为更改--同时仍然为应用程序提供性能和web标准升级。不过，请注意，Android4.4根本不支持单列和窄列布局以及默认缩放级别，而且可能还存在其他行为差异，因此，即使将targetSdkVersion设置为"18“或更低，也要在Android4.4或更高版本上测试您的应用程序。

更多信息：https://developer.android.com/guide/webapps/migrating.html