如何从 HTML 页面打开手机摄像头？

Question

我的 android 手机通过 webview 连接到 web 服务器。在我的 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>

但是，当我单击按钮时，文件选择器会打开，我可以选择图像但不能使用相机。有什么解决办法吗？

附：在我的代码中，（捕获）这个词没有我觉得很奇怪的特殊样式或颜色，这可能是问题所在！

Answer 1

在 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">

Answer 2

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

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

在 Java 文件中初始化 Webview

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

网页界面：

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

Answer 3

您可以将 android 本机代码与 javascript 接口，以捕获对按钮的点击，并让 android 代码发送意图以打开相机、拍摄照片并将其存储在某个路径中。

然后，在 onActivityResult 中，您将负责从路径中获取照片并将其上传到网络服务器。要做到这一点，一种方法是将位图编码为 base64 字符串并使用 android http 客户端以 POST 形式发送。

我将展示如何做 javscript 和 android 之间的接口（这就是问题所涉及的），所有其他关于操作 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 */

        }
    }

}

注意：这种接口在 17 岁以下的 Andriod 上是不安全的。

编辑 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 权限。

Answer 4

我现在有这种问题。我认为我找到了解决方案。但是你必须对我的解决方案做更多的事情。 你可以检查一下。 https://simpl.info/imagecapture/ 核对后，请与我分享您的经验。谢谢

Answer 5

我已经测试过这个方法，它适用于移动设备

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