如何从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页面打开手机相机？

回答

相关问题