如何從HTML頁面打開手機相機？

我的Android手機通過網頁視圖連接到Web服務器。在我的HTML中，我有一個上傳照片的按鈕。用戶應該可以選擇上傳圖像或從相機拍攝照片。我的HTML代碼：如何從HTML頁面打開手機相機？

<div class="takePhoto"> 
    <form id="take" action="" method="POST"> 
     <input type="file" id= "cap" name="personalPhoto" accept="image/*" capture ="camera" id="camera"><p> 
    </form> 
</div>

然而，當我點擊按鈕將文件選擇打開，我要選擇圖像的能力，但是不要使用相機。任何解決方案？

P.S.在我的代碼字（捕獲）不具有特殊的樣式或顏色，我覺得奇怪，這可能是問題！

來源

2017-05-30 Kalkhouri

是通過點擊此按鈕，文件瀏覽器打開成功....但沒有與相機有關的 – Kalkhouri

在iPhone iOS6的和Android的ICS起，HTML5具有以下標籤，它允許你從你的設備中的圖片：

<input type="file" accept="image/*" capture="camera">

你也可以嘗試

<input type="file" accept="image/*" capture="capture">

或

<input type="file" accept="image/*;capture=camera">

來源

2017-05-30 13:58:37

的第一個建議是在我的代碼裏面，不工作！其他兩個選項都不起作用 – Kalkhouri

可以對接與JavaScript Android原生代碼，以捕捉按鈕上的點擊，並有android代碼發送意圖打開cammera，拍攝照片，並將其存儲在某個路徑中。

然後，在onActivityResult你將獲得從路徑照片並上傳到Web服務器的照顧。要做到這一點的方法之一是位圖編碼在一個base64字符串，並使用Android HTTP客戶端在POST形式發送。

我將演示如何執行javscript和android之間的接口（這是quesiton的作用），關於操作foto的所有其他內容都有其自身的複雜性，並且有許多關於它的教程。

主要活動

public class MainActivity extends AppCompatActivity { 

    private WebView webView; 
    private Bitmap imageBitmap; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     webView = (WebView) findViewById(R.id.webview); 


     WebSettings webSettings = webView.getSettings(); 
     webSettings.setJavaScriptEnabled(true); 

     webView.addJavascriptInterface(new WebAppInterface(this),"Android"); 

     webView.loadData(
       "<Button id=\"btnTakePhoto\" onClick=\"takePhoto()\">TakePhoto</Button><div class=\"takePhoto\">\n" + 
         "<script type=\"text/javascript\">" + 
         "function takePhoto() {\n" + 
         "  Android.takePhoto();\n" + 
         " }\n" + 
         "</script>" + 
         "</div>", "text/html","UTF-8"); 
    } 

    public class WebAppInterface { 
     Context mContext; 

     /** Instantiate the interface and set the context */ 
     WebAppInterface(Context c) { 
      mContext = c; 
     } 

     /** The android function calld from javascript */ 
     @JavascriptInterface 
     public void takePhoto() { 
      dispatchTakePictureIntent(); 
     } 
    } 


    /* This gests a Thumbnail only*/ 

    static final int REQUEST_IMAGE_CAPTURE = 1; 



    private void dispatchTakePictureIntent() { 
     Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 
     if (takePictureIntent.resolveActivity(getPackageManager()) != null) { 
      startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE); 
     } 
    } 



    @Override 
    protected void onActivityResult(int requestCode, int resultCode, Intent data) { 
     if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) { 
      Bundle extras = data.getExtras(); 
      imageBitmap = (Bitmap) extras.get("data"); 

      /* Encode bitmap as base64 and transmit to server */ 

     } 
    } 

}

注意：這種接口的是不安全的上下面的Andriod 17.

EDIT 1

在HTML

<html> 
    <body> 
     <div class="takePhoto"> 
       <Button onClick="takePhoto()">Take Photo </Button> 
     </div> 

     <script type="text/javascript"> 
      function takePhoto(){ 
       Android.takePhoto(); 
      } 
     </script> 
    </body> 
</html>

編輯2

在清單中，我只添加了：

<uses-feature android:name="android.hardware.camera" 
    android:required="true" />

對於您的應用程序，您還需要INTERNET權限。

來源

2017-05-30 15:12:51 Juan

我已經將此代碼集成到了我的android studio MainActivity中，但是如何從網頁調用它？你能給我一個簡單的HTML/Javascript代碼來調用這個函數嗎？ – Kalkhouri

它在示例代碼中表示webview.loadData，您有一個onCllick指向javascript函數的按鈕。並根據該功能調用android功能。您可以將html/javascript放在網頁上，然後調用loadUrl。 – Juan

我很抱歉提出了很多問題，但我對android非常陌生，我非常感謝您的幫助...其實在onCreate函數中，我使用以下方式從服務器加載我的網頁： webView.loadUrl（「http ：//192.168.43.115/myPage.php「）; 在這個頁面我有應該調用相機的按鈕，以便如何將它與您的代碼連接起來？ – Kalkhouri

<input type="button" value="Say hello" onClick="showCamera('Android! Start Camera')" /> 

<script type="text/javascript"> 
    function showCamera(toast) { 
     Android.showCamera(toast); 
    } 
</script>

Intialise網頁視圖中的Java文件

WebView webView = (WebView) findViewById(R.id.webview); 
webView.addJavascriptInterface(new WebAppInterface(this), "android")

WebInterface：

public class WebAppInterface { 
    Context mContext; 
    static final int REQUEST_IMAGE_CAPTURE = 1; 

    /** Instantiate the interface and set the context */ 
    WebAppInterface(Context c) { 
     mContext = c; 
    } 

    /** Show a toast from the web page and here tell to open camera */ 
    @JavascriptInterface 
    public void showCamera(String toast) { 
     Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); 
     dispatchTakePictureIntent(); 
    } 


    /** Handle Camera result*/ 
    private void dispatchTakePictureIntent() { 
    Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 
    if (takePictureIntent.resolveActivity(getPackageManager()) != null) { 
     mContext.startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE); 
     } 
    } 
}

來源

2017-05-30 19:20:16 PrakhaRaM

謝謝你的建議。其實我試過了，當我按下按鈕時除了消息「Android！啓動相機「它顯示在屏幕上。這意味着該函數被調用，但並非一切正常！並在行中： mContext.startActivityForResult（takePictureIntent，REQUEST_IMAGE_CAPTURE）; Android studio說：無法解析startActivityForResult方法。直到現在，我無法讓它工作。 – Kalkhouri

如何從HTML頁面打開手機相機？

回答

相關問題