Last active
August 29, 2015 14:16
-
-
Save chikoski/245203c23a466aaf6627 to your computer and use it in GitHub Desktop.
GetUserMediaを使ったカメラアプリ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| navigator.getUserMedia = | |
| navigator.getUserMedia || navigator.mozGetUserMedia; | |
| const SIZE = { | |
| width: 800, | |
| height: 600 | |
| }; | |
| var storage; | |
| var elements; | |
| var gc; | |
| var doGetVideoStream = function(resolve, reject){ | |
| navigator.getUserMedia({video: true, audio: false}, function(stream){ | |
| window.addEventListener("unload", function(event){ | |
| stream.stop(); // アプリ終了時にストリームを停止 | |
| }); | |
| resolve(stream); | |
| }, reject); | |
| }; | |
| var getVideoStream = function(){ | |
| return new Promise(doGetVideoStream); | |
| }; | |
| var setPreviewStream = function(stream){ | |
| if(elements != null && elements.preview != null){ | |
| elements.preview.src = window.URL.createObjectURL(stream); | |
| elements.preview.play(); | |
| } | |
| }; | |
| var createFilename = function(){ | |
| return "handson-20130310-"+ (new Date()).valueOf() + ".jpg"; | |
| }; | |
| var showAndSavePhoto = function(blob){ | |
| if(elements != null && elements.photo != null){ | |
| elements.photo.setAttribute("src", window.URL.createObjectURL(blob)); | |
| } | |
| if(storage != null){ | |
| var request = storage.addNamed(blob, createFilename()); | |
| request.onsuccess = showSavingPhotoSuccess; | |
| request.onerrorr = showSavingPhotoError; | |
| } | |
| }; | |
| var takePhoto = function(){ | |
| if(gc != null && elements != null && | |
| elements.preview != null && elements.canvas != null){ | |
| gc.drawImage(elements.preview, 0, 0, SIZE.width, SIZE.height); | |
| var blob = elements.canvas.toBlob(showAndSavePhoto, "image/jpg"); | |
| } | |
| }; | |
| var enableShootButton = function(){ | |
| if(elements != null && elements.shoot){ | |
| elements.shoot.addEventListener("click", takePhoto); | |
| } | |
| }; | |
| var sendNotification = function(message){ | |
| new Notification(message); | |
| }; | |
| var showSavingPhotoSuccess = function(){ | |
| sendNotification("写真が保存されました"); | |
| }; | |
| var showSavingPhotoError = function(){ | |
| var msg = "写真の保存に失敗しました"; | |
| log(msg); | |
| sendNotification(msg); | |
| }; | |
| var log = function(msg){ | |
| console.log(msg); | |
| }; | |
| var initApp = function(){ | |
| elements = { | |
| preview: document.querySelector("#preview"), | |
| canvas: document.querySelector("#canvas"), | |
| photo: document.querySelector("#photo"), | |
| shoot: document.querySelector("#shoot") | |
| }; | |
| gc = elements.canvas.getContext("2d"); | |
| // キャンバスの解像度をサイズに合わせる | |
| elements.canvas.width = SIZE.width; | |
| elements.canvas.height = SIZE.height; | |
| getVideoStream().then(setPreviewStream, log); | |
| elements.preview.addEventListener("canplay", enableShootButton); | |
| storage = navigator.getDeviceStorage("pictures"); | |
| }; | |
| window.addEventListener("load", initApp); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container{ | |
| padding-bottom: 4em; | |
| width: 100%; | |
| } | |
| #preview{ | |
| width: 100%; | |
| } | |
| #canvas{ | |
| display: none; | |
| } | |
| #shoot{ | |
| font-size: 100%; | |
| width: 100%; | |
| padding: 1em; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| #photo{ | |
| width:100%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"> | |
| <title>Camera With GetUserMedia</title> | |
| <script src="app.js" defer></script> | |
| <link rel="stylesheet" href="app.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <video id="preview"></video> | |
| <canvas id="canvas"></canvas> | |
| <img id="photo"> | |
| </div> | |
| <button id="shoot">撮影</button> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "camera-with-getusermedia", | |
| "description": "A Hello World app", | |
| "launch_path": "/index.html", | |
| "icons": { | |
| "16": "/icons/icon16x16.png", | |
| "48": "/icons/icon48x48.png", | |
| "60": "/icons/icon60x60.png", | |
| "128": "/icons/icon128x128.png" | |
| }, | |
| "type": "privileged", | |
| "permissions": { | |
| "video-capture": { | |
| "description": "写真を撮るため" | |
| }, | |
| "device-storage:pictures": { | |
| "description": "撮影した写真の保存のため", | |
| "access": "readwrite" | |
| }, | |
| "desktop-notification": { | |
| "description": "写真が保存できたかどうかを通知するため" | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment