Electronをつかってカメラを起動するデスクトップアプリをつくろう。

kimizuka.hatenablog.com
kimizuka.hatenablog.com

前々回、前回とElectronをつかってきましたが、今回も引き続きつかっていきます。

今回はカメラを立ち上げてそれをプレビューするアプリを制作しました。
ブラウザだとhttpsでないとgetUserMediaを叩けなくなりましたが、アプリであれば叩けるようです。

ディレクトリ構成

f:id:kimizuka:20160609104322p:plain

こんな感じになりました。

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;
}