html5 调用摄像头

来源：互联网发布：linux安装ssh服务编辑：程序博客网时间：2024/04/30 19:27

通过Camera API能够用你的设备的摄像头拍照并上传到当前网页。通过使用input标签，设置type=”file”，accept属性设置为能接收图像，就能够实现前面的要求了。HTML代码如下：

<inputtype="file"id="take-picture"accept="image/*">

当使用者选择激活这个HTML元素时，他们就会以选择某个文件的选项形式呈现出来，设备摄像头就是其中一个选项。如果用户选择了摄像头选项，就进入了拍照模式。拍完照后，用户要在弹出的选项里选择接受或放弃。如果选择接受的话，将会跳到

1
<input type="file">

标签，onchange事件被激发。

在File API的帮助下你能够访问拍完的照片或者被选中的文件：

1
2
3
4
5
6
7
8
9
vartakePicture=document.querySelector("#take-picture");
takePicture.onchange=function(event){
    // Get a reference to the taken picture or chosen file
    varfiles=event.target.files,
        file;
    if(files&&files.length>0){
        file=files[0];
    }
};

如果你想要引用拍好的照片，你可以使用window.URL.createObjectURL()方法生成一个引用照片的URL并设置为图片的src:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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是可供选择的替代方案：

1
2
3
4
5
6
// Fallback if createObjectURL is not supported
varfileReader=newFileReader();
fileReader.onload=function(event){
    showPicture.src=event.target.result;
};
fileReader.readAsDataURL(file)

如果你想要知道运行结果是什么样的，你可以看下完整的Camera API示例。

示例代码如下：
HTML PAGE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPEhtml>
<html>
    <head>
        <metacharset="utf-8">
        <title>CameraAPI</title>
        <linkrel="stylesheet"href="css/base.css"type="text/css"media="screen">
    </head>
 
    <body>
 
        <divclass="container">
            <h1>CameraAPI</h1>
 
            <sectionclass="main-content">
                <p>AdemooftheCameraAPI,currentlyimplementedinFirefoxandGoogleChromeonAndroid.Choosetotakeapicturewithyourdevice'scameraandapreviewwillbeshownthroughcreateObjectURLoraFileReaderobject(choosinglocalfilessupportedtoo).</p>
                
                <p>
                    <inputtype="file"id="take-picture"accept="image/*">
                </p>
 
                <h2>Preview:</h2>
                <p>
                    <imgsrc="about:blank"alt=""id="show-picture">
                </p>
 
                <pid="error"></p>
 
            </section>
 
            <pclass="footer">Allthecodeisavailableinthe<ahref="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">CameraAPIrepositoryonGitHub</a>.</p>
        </div>
 
 
        <scriptsrc="js/base.js"></script>
 
 
    </body>
</html></code>
 
<strong>JavaScriptfile</strong>
 
<code>(function(){
    vartakePicture=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
            varfiles=event.target.files,
                file;
            if(files&&files.length>0){
                file=files[0];
                try{
                    // Get window.URL object
                    varURL=window.URL||window.webkitURL;
 
                    // Create ObjectURL
                    varimgURL=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
                        varfileReader=newFileReader();
                        fileReader.onload=function(event){
                            showPicture.src=event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch(e){
                        //
                        varerror=document.querySelector("#error");
                        if(error){
                            error.innerHTML="Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();

0 0