RaspberryPi+Electron으로 카메라 출력

13315 단어 RaspberryPiElectronWebRTC

내용



RaspberryPi에서 Electron을 사용하여 카메라의 영상을 데스크탑에 출력합니다.

결과



할 수 있었습니다.


카메라의 모습


방법



구성


  • RaspberryPi2 ModelB
  • USB 카메라 (BUFFALO, 130 만 화소)
  • node v.7.7.4
  • electron v1.4.13

    • 소스 코드



    특히 응한 것은 하지 않고, Electron으로 화면을 만들 뿐.
  • index.js 
    • 'use strict';

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var Menu = electron.Menu;
var mainWindow = null;
var remote = require("electron").remote;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', function() {
  // メニューをアプリケーションに追加
  Menu.setApplicationMenu(menu);
  openWindow();
});

function openWindow() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

function fullscreen(){
  var w = BrowserWindow.getFocusedWindow();
  w.setFullScreen(!w.isFullScreen());
}


var template = [
  {
    label: 'ReadUs',
    submenu: [{label: 'Quit', accelerator: 'Command+Q', click: function () {app.quit();}}]
  },

  {
    label: 'View',
    submenu: [
      { label: 'Reload', accelerator: 'Command+R', click: function() { BrowserWindow.getFocusedWindow().reload(); } },
      { label: 'Toggle DevTools', accelerator: 'Alt+Command+I', click: function() { BrowserWindow.getFocusedWindow().toggleDevTools(); } },
      { label: 'Full Screen', accelerator: 'Alt+Command+F', click: fullscreen }
    ]
  }
];

var menu = Menu.buildFromTemplate(template);
  • index.html 
    • <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Read Us</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<video id="camera-preview"></video>
<script type="text/javascript" src="app/camera.js"></script>
</body>
</html>
  • camera.js
    화면 측에서 카메라 장치를 navigator.webkitGetUserMedia로 취득하여 <video>로 출력한다 
    • 'use strict';

var video = document.getElementById("camera-preview");
var handleCameraSuccess = function(mediaStream){
  video.style.display = "block";
  video.src = window.URL.createObjectURL(mediaStream);
  video.play();
};
var handleCameraError = function(){
  alert("カメラ検出に失敗しました");
};
navigator.webkitGetUserMedia({video:true, audio:false}, handleCameraSuccess, handleCameraError);

    지식


  • RaspberryPi 순정의 카메라 모듈 그러면 안 되었습니다. raspstil 로 촬영은 할 수 있는데, Chromium에는 건네줄 수 없었다.
  • RaspberryPi 1 ModelB 는 Electron 자체를 시작하기 어렵다. 파워 부족이라고 생각합니다.
  • 자원 소비는 나름대로 있다. ( top 명령으로 관찰)
  • 단순히 화면을 기동했을 때는 CPU 사용률이 백 프로세스, 렌더링 프로세스 모두 약 1% 정도
  • camera.js 로 화면에 영상을 출력하면 양쪽 프로세스에서 16% 정도의 CPU 사용률이 된다(합계로 약 30%가 Electron에서 사용된다).
  • 영상 출력하고 있는 Electron의 윈도우를 최소화하면 양쪽 프로세스가 약 5%의 CPU 사용률에 걸린다.

  • 표시 개시에 시간이 걸리는 등은 없다 (PC로 HTML을 열었을 때와 같은 정도)
  • 영상은 보통 부드럽게 (스카이프와 같은 느낌)
    • Firefox에서 화면 공유
    [webRTC for android vol3] trickle ICE

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage