通过 Camera API（WebAPI 的一部分），可以利用设备的摄像头拍照并将其上传到当前网页中。这是通过一个 input 元素实现的，该元素具有 type="file" 和 accept 属性来声明它接受图像。

HTML 代码如下所示

获取拍摄照片的引用

借助 File API，您可以访问拍摄的照片/所选文件。

var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
    // Get a reference to the taken picture or chosen file
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
    }
};

在网页中显示拍摄的照片

一旦我们获得了拍摄照片（即文件）的引用，我们就可以使用 createObjectURL 创建一个引用该照片的 URL，并将其设置为图像的 src 属性。

// Image reference
var showPicture = document.querySelector("#show-picture");

// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create ObjectURL
var imgURL = URL.createObjectURL(file);

// Set img src to ObjectURL
showPicture.src = imgURL;

// For performance reasons, revoke used ObjectURLs
URL.revokeObjectURL(imgURL);

如果 createObjectURL 不受支持，则可以回退到 FileReader。

// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

完整的示例演示和代码

如果您需要一个完整的可运行示例页面，我创建了一个 Camera API 演示。以下是 HTML 页面及其配套 JavaScript 文件的代码。

HTML 页面

    
        
        
        
    

    

        

            
Camera API

            

                
A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).

                

                    
                

                
Preview:
                

                    
                

                


            

            
All the code is available in the Camera API repository on GitHub.
        


        


    

JavaScript 文件

(function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");

    if (takePicture && showPicture) {
        // Set events
        takePicture.onchange = function (event) {
            // Get a reference to the taken picture or chosen file
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // Get window.URL object
                    var URL = window.URL || window.webkitURL;

                    // Create ObjectURL
                    var imgURL = URL.createObjectURL(file);

                    // Set img src to ObjectURL
                    showPicture.src = imgURL;

                    // Revoke ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch (e) {
                        //
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();

Web 浏览器支持

• Camera API 目前在 Android 设备上的 Firefox 和 Google Chrome 中受支持。
• createObjectURL 在 Firefox、Google Chrome 和 Internet Explorer 10 及更高版本中受支持。
• FileReader 在 Firefox、Google Chrome、Internet Explorer 10 及更高版本和 Opera 11.6 及更高版本中受支持。

未来

随着 WebRTC（对两个浏览器之间实时音频、视频和数据通信的支持）和 navigator.getUserMedia 方法的出现，我们将在不久的将来在许多主要的 Web 浏览器中看到更多此类功能。有关更多信息，请参阅我们的 Firefox Web 平台路线图。

但现在，您可以尽情享受拍照/捕捉照片的乐趣！