kimizuka.hatenablog.com
kimizuka.hatenablog.com
前々回 、 前回 とElectronをつかってきましたが、今回も引き続きつかっていきます。
今回はカメラを立ち上げてそれをプレビューするアプリを制作しました。
ブラウザだとhttpsでないとgetUserMediaを叩けなくなりましたが、アプリであれば叩けるようです。
ディレクトリ構成
こんな感じになりました。
package.json
{ "name": "app", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "electron-prebuilt": "^1.2.1" } }
main を main.js にしました。(前回までは index.js でした)
main.js
"use strict"; var electron = require("electron"), app = electron.app, BrowserWindow = electron.BrowserWindow, mainWindow; app.on("ready", function() { mainWindow = new BrowserWindow({ width : 640, height : 500 }); mainWindow.loadURL("file://" + __dirname + "/index.html"); mainWindow.on("closed", function() { mainWindow = null; }); });
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="main.css"> <title>Camera</title> </head> <body> <video id="video"></video> <script src="index.js"></script> </body> </html>
videoタグを用意しています。
index.js
"use strict"; var video = document.getElementById("video"); navigator.webkitGetUserMedia({video: true, audio: false}, _handleSuccess, _handleError); function _handleSuccess(localMediaStream) { video.style.display = "block"; video.src = window.URL.createObjectURL(localMediaStream); video.play(); } function _handleError() { alert("ERROR: カメラを起動できませんでした。"); }
カメラを立ち上げ、videoタグにプレビューします。
main.css
* { margin: 0; padding: 0; } body { background: #000; overflow: hidden; } #video { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 640px; height: 480px; }
簡単にスタイルを当てます。
名前をindex.cssにすればよかったー。と思っています。
今回は以上です。