| 1 | <!DOCTYPE html>
|
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 | |
| 9 |
|
| 10 | <html>
|
| 11 | <head>
|
| 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
| 13 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
| 14 |
|
| 15 | <meta name="viewport" content="user-scalable=no, width=400, initial-scale=1, maximum-scale=1" />
|
| 16 | <meta name="apple-mobile-web-app-capable" content="yes" />
|
| 17 | <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
|
| 18 | <meta name="format-detection" content="email=no" />
|
| 19 | <meta name="HandheldFriendly" content="true" />
|
| 20 |
|
| 21 | <title>FileAPI :: WebCam :: example</title>
|
| 22 |
|
| 23 | <script>
|
| 24 |
|
| 25 | var FileAPI = {
|
| 26 | debug: true
|
| 27 | , media: true
|
| 28 | , staticPath: '../dist/'
|
| 29 | };
|
| 30 | </script>
|
| 31 |
|
| 32 | <script src="../dist/FileAPI.js"></script>
|
| 33 | <script src="../plugins/FileAPI.exif.js"></script>
|
| 34 |
|
| 35 | <style>
|
| 36 | body {
|
| 37 | font-size: 15px;
|
| 38 | font-family: "Helvetica Neue";
|
| 39 | }
|
| 40 |
|
| 41 | button {
|
| 42 | font-size: 20px;
|
| 43 | }
|
| 44 | </style>
|
| 45 |
|
| 46 | </head>
|
| 47 | <body>
|
| 48 | <div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">
|
| 49 | <div style="padding: 5px 10px 10px">
|
| 50 | <a href="../">← index</a> |
|
| 51 | <a href="./demo.html">demo</a> -
|
| 52 | <a href="./userpic.html">userpic</a> -
|
| 53 | <a href="./thumbnails.html">thumbnails</a> -
|
| 54 | <a href="./watermark.html">watermark</a> -
|
| 55 | <b>webcam</b> -
|
| 56 | <a href="./caman.html">caman.js</a>
|
| 57 | </div>
|
| 58 | </div>
|
| 59 |
|
| 60 | <div style="padding-bottom: 100px;">
|
| 61 | <h2>WebCam</h2>
|
| 62 | <div id="box"></div>
|
| 63 |
|
| 64 | <div id="readyBox" style="display: none">
|
| 65 | <button id="shotBtn">shot</button>
|
| 66 | <button id="startBtn">start</button>
|
| 67 | <button id="stopBtn">stop</button>
|
| 68 |
|
| 69 | <h3>Shots</h3>
|
| 70 | <div id="shots"><b></b></div>
|
| 71 |
|
| 72 | <h3>Server</h3>
|
| 73 | <div id="server"><b></b></div>
|
| 74 | </div>
|
| 75 | </div>
|
| 76 |
|
| 77 | <script>
|
| 78 | (function (){
|
| 79 | FileAPI.Camera.publish(box, { width: 320, height: 240 }, function (err, cam){
|
| 80 | if( err ){
|
| 81 | alert('WebCam or Flash not supported :[');
|
| 82 | } else {
|
| 83 | readyBox.style.display = '';
|
| 84 |
|
| 85 | FileAPI.event.on(startBtn, 'click', function (){
|
| 86 | cam.start();
|
| 87 | });
|
| 88 |
|
| 89 | FileAPI.event.on(stopBtn, 'click', function (){
|
| 90 | cam.stop();
|
| 91 | });
|
| 92 |
|
| 93 | FileAPI.event.on(shotBtn, 'click', function (){
|
| 94 | if( cam.isActive() ){
|
| 95 | var shot = cam.shot();
|
| 96 |
|
| 97 | shot
|
| 98 | .clone()
|
| 99 | .preview(100, 100)
|
| 100 | .get(function (err, img){
|
| 101 | img.style.marginRight = '5px';
|
| 102 | shots.insertBefore(img, shots.firstChild);
|
| 103 | })
|
| 104 | ;
|
| 105 |
|
| 106 | var file = shot
|
| 107 | .preview(200, 200)
|
| 108 | .overlay({
|
| 109 | x: 5
|
| 110 | , y: 5
|
| 111 | , src: '../statics/watermark.png'
|
| 112 | , rel: FileAPI.Image.RIGHT_TOP
|
| 113 | })
|
| 114 | ;
|
| 115 |
|
| 116 | FileAPI.upload({
|
| 117 | url: '/upload'
|
| 118 | , files: { shot: file }
|
| 119 | , complete: function (err, xhr){
|
| 120 | var res = JSON.parse(xhr.responseText);
|
| 121 | var img = new Image;
|
| 122 | img.src = res.images.shot.dataURL;
|
| 123 | img.style.marginRight = '5px';
|
| 124 | server.insertBefore(img, server.firstChild);
|
| 125 | }
|
| 126 | });
|
| 127 | }
|
| 128 | });
|
| 129 | }
|
| 130 | });
|
| 131 | })();
|
| 132 | </script>
|
| 133 | </body>
|
| 134 | </html>
|