2016-11-25 44 views
1

我有一個使用獲取用戶媒體的MVC 4網絡應用程序。我也有針對API 18,該設備是API 19一個Android的WebView,但我從控制檯日誌得到的錯誤是Getusermedia不適用於api的webview設備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

/* 
** 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應用程序JS 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 
    } 
} 
} 
+0

你有使用的調試和驗證了handler.proceed()實際上被調用? –

+0

是的,是的。它爲頁面提供了很好的服務,它只是不會爲getusermedia運行javascript。頁面加載。減去功能。 – Danimal

回答

0

這是因爲API 18或更低的 「怪癖模式」 的動作作爲官方文檔中定義。

注意:如果您的targetSdkVersion設置爲「18」或更低,WebView中 在「怪癖模式」,以便操作,以避免一些下面描述 改變行爲,儘可能地,同時還提供 你的應用程序的性能和網絡標準升級。請注意,雖然 單一和窄列布局和默認縮放級別不是 在Android 4.4上完全支持,並且可能還有其他行爲 差異尚未確定,因此請務必在Android 4.4上測試您的應用 或更高,即使您將targetSdkVersion設置爲 「18」或更低。

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

+1

我的目標是18這個設備是19.我不能在sdk 21中使用這個命令來修復這個行爲..我認爲這裏最好的舉動實際上是繼續前進到一個鉻的web視圖或沒有web視圖完全可以只寫一個程序。 – Danimal

相關問題