IoT(사물인터넷) 보안 2016년 2학기 4. 라즈베리파이 카메라.

Slides:



Advertisements
Similar presentations
Window media player 1. 윈도우 미디어 플레이어가 많이 끊길 때 윈도우 미디어 플레이어실행 > 도구 > 옵션 > 성능 > 연결 속도 > 연결 속도 선택 Lan(10Mbps) 선택 > 네트워크 버퍼링 버퍼 10 초 네트워크창 > 스트리밍 프로토콜 > UDP.
Advertisements

Android 프로그램개발 환경. 학습 목표 ■ 교육 목표  JDK 설치  JDK 환경 설정  Eclipse 설치  Android SDK 설치  ADT Plug-in 설치  Android Virtual Device(AVD) 설치  Android 예제 프로그램.
개발환경 구축 RaspberryPi Sejin Oh.
CHAPTER 11. 자바스크립트와 캔버스로 게임만들기.
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이 gpio.
CHAPTER 16. 모바일 웹페이지.
IoT(사물인터넷) 보안 2016년 2학기 2. 라즈베리파이 준비.
Chapter14 위치 정보 & 모바일 HTML5 Programming.
웹 2.0 및 Ajax 개요.
10장 동적 HTML (Dynamic HTML)
HTML & CSS 겉핥기 2012 SUMMER SPARCS.
1.1 뷰포트 일반 웹 페이지의 모바일 실행 결과 뷰포트(viewport)
JSON(JavaScript Object Notation)
IoT(사물인터넷) 보안 2016년 2학기 2. 라즈베리파이 준비.
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
1 HTML5 개요.
채팅 서버 만들기 10장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
CHAPTER 12. JQUERY, AJAX, JSON.
01. Index StarPlayer API Guide 01. Index 02. 상수값 정의 03. API 정의
임베디드 프로그래밍 Lecture #
GPIO RaspberryPi Sejin Oh.
GPIO RaspberryPi Sejin Oh.
웹 서버 만들기 5장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
1 최초 한번만 실행 Git 초기화 git init git config user.name “StudentNum”
9. Deploying mean applications
임베디드 프로그래밍 Lecture #
MEAN Stack Front to Back
처음부터 다시 배우는 HTML5&CSS3 실전 웹 표준 사이트 제작까지
Chapter05 오디오와 비디오 HTML5 Programming.
AJAX 커머스아이 박준열.
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.
Youn-Hee Han HTML5 - GeoLocation Youn-Hee Han
HTML5+CSS3 실무 테크닉 김은기 저.
CHAPTER 13. HTML5 위치정보와 드래그앤 드롭.
Git 사용법 GitHub 가입 GitHub 새 저장소 만들기 Git 설치 로컬 저장소 만들기 로컬 저장소와 원격 저장소 연결
웹 어플리케이션 보안 2016년 2학기 3. Mongo db.
저수준의 시각적 효과 jQuery의 기본 효과.
Web Socket.
웹 어플리케이션 보안 2016년 2학기 10. Workflow tools.
Chapter03 캔버스(1) HTML5 Programming.
Chapter10 드래그 앤 드롭 & 텍스트 편집 HTML5 Programming.
반응형 웹 프로젝트
CSS Layout Chapter 6 Part 1
Chapter11 웹 스토리지 & 웹 데이터베이스
웹 어플리케이션 보안 2016년 2학기 2. Node routing.
SSH, VNC Mobile Engineering, Kyungwoon Univ. Embedded System Design.
Chapter07 CSS3 글꼴과 문자 HTML5 Programming.
MEAN Stack Front to Back (MEANAuthApp)
HTML CSS 자바스크립트 무작정 따라하기
MEAN Stack Front to Back (MEANAuthApp)
명품 웹 프로그래밍.
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
1장. HTML5 소개 To Flash 정보영재세미나 1 김태영교수님 홍창의.
웹디자인
17장 웹 사이트 제작 완성 한빛미디어(주).
Git 사용하기 Git 소개 Git 사용 환경 GitHub 가입 및 원격 저장소 만들기 Git 설치 Git 최초 설정
LOGIN할 때 아이디, 비번 입력 여부 체크하기
웹 어플리케이션 보안 2016년 2학기 11. Enhancing Security.
암호학 응용 Applied cryptography
StyleCop 소개 SGS Framework 개발 팀.
문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
주요공지로 정할 글을 올립니다. 제목과 주소를 복사해둡니다
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
HTML HTML 기본 구조와 태그 다양한 태그 다루기
웹 스크래핑.
IPC 펌웨어 업그레이드 방법 안내 ** 반드시 IPC를 NVR POE 포트 연결 전에 작업 하시기 바랍니다. IPC를 NVR POE 포트에 연결 하실 경우 IP 대역폭을 마추셔야 하는 작업이 필요합니다. **
Node Red 컴퓨터공학과 오동근 1.
머니투데이 메인 UI수정 Moneytoday.co.kr - 작성자 : 한정환 - 작성일 :
MEAN Stack Front to Back (MEANAuthApp)
Presentation transcript:

IoT(사물인터넷) 보안 2016년 2학기 4. 라즈베리파이 카메라

4. 라즈베리파이 카메라

파이 카메라 카메라 연결하기 흰색 커버를 들어올린 후 케이블을 밀어넣고 다시 커버를 닫음 고화질 FULL HD(1080p) 500만 화소 라즈베리파이 전용 카메라 흰색 커버를 들어올린 후 케이블을 밀어넣고 다시 커버를 닫음

파이 카메라 최신 버전 업그레이드 라즈베리 파이 설정에서 카메라 사용을 enable로 변경 사진 찍기 동영상 찍기 $ sudo apt-get update $ sudo apt-get upgrade 라즈베리 파이 설정에서 카메라 사용을 enable로 변경 $ sudo raspi-config $ 리부팅 사진 찍기 $ raspistill -o image.jpg $ raspistill --help 동영상 찍기 $ raspivid -o video.h264 $ raspivid --help

웹스트리밍 참고 사이트 폴더 생성 프로젝트 초기화 및 패키지 설치 소스 작성 http://thejackalofjavascript.com/rpi-live-streaming/ 폴더 생성 $ mkdir liveStreaming $ cd liveStreaming 프로젝트 초기화 및 패키지 설치 $ npm init $ npm install express socket.io --save 소스 작성 $ nano index.js $ nano index.html

소스 작성 Index.js Index.html var express = require('express'); var app = express(); var http = require('http').Server(app); var fs = require('fs'); var io = require('socket.io')(http); var path = require('path');   var spawn = require('child_process').spawn; var proc; app.use('/', express.static(path.join(__dirname, 'stream')));   res.sendFile(__dirname + '/index.html'); app.get('/', function(req, res) { }); var sockets = {}; io.on('connection', function(socket) {   sockets[socket.id] = socket;   console.log("Total clients connected : ", Object.keys(sockets).length);   socket.on('disconnect', function() {     delete sockets[socket.id];     // no more sockets, kill the stream     if (Object.keys(sockets).length == 0) {       app.set('watchingFile', false);       if (proc) proc.kill();       fs.unwatchFile('./stream/image_stream.jpg');     }   });   socket.on('start-stream', function() {     startStreaming(io); http.listen(3000, function() {   console.log('listening on *:3000'); function stopStreaming() {   if (Object.keys(sockets).length == 0) {     app.set('watchingFile', false);     fs.unwatchFile('./stream/image_stream.jpg');     if (proc) proc.kill();   } } function startStreaming(io) {   if (app.get('watchingFile')) {     io.sockets.emit('liveStream', 'image_stream.jpg?_t=' + (Math.random() * 100000));     return;   var args = ["-w", "640", "-h", "480", "-o", "./stream/image_stream.jpg", "-t", "999999999", "-tl", "100"];   proc = spawn('raspistill', args);   console.log('Watching for changes...');   app.set('watchingFile', true);   fs.watchFile('./stream/image_stream.jpg', function(current, previous) {   }) <!DOCTYPE html> <html lang="en">   <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>Stream My Lab </title>   <!-- Bootstrap CSS -->   <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">   <style type="text/css">   #stream {     height: 99%;     margin: 0px auto;     display: block;     margin-top: 20px;   }   </style>   <!-- jQuery -->   <script src="http://code.jquery.com/jquery.js"></script>   <!-- Bootstrap JavaScript -->   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>   <script src="/socket.io/socket.io.js"></script>   <script>   var socket = io();   socket.on('liveStream', function(url) {     $('#stream').attr('src', url);     $('.start').hide();   });   function startStream() {     socket.emit('start-stream');   </script> </head> <body class="container">   <h1 class="text-center">My Lab     <small>Powered by PI</small>   </h1>   <hr>   <button type="button" id="" class="btn btn-info start" onclick="startStream()">Start Camera</button>   <div class="row">     <img src="" id="stream">   </div> </body> </html> Index.js Index.html <script src="/socket.io/socket.io.js"></script>의 주소를 https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js 으로 변경

웹스트리밍 하부 폴더 생성 실행 브라우저로 접속 $ mkdir stream (이미지가 저장되는 폴더) $ sudo node index.js 브라우저로 접속 로컬 접속 http://localhost:3000 원격 접속 http://IP주소:3000

비디오 서버 raspberry-pi-mjpeg-server 소스 복사 설치 서버 실행 서버 접속 https://github.com/john-doherty/raspberry-pi-mjpeg-server 소스 복사 $ git clone https://github.com/john-doherty/raspberry-pi- mjpeg-server 설치 $ cd raspberry-pi-mjpeg-server $ npm install 서버 실행 $ sudo node raspberry-pi-mjpeg-server.js -w 1280 -l 1024 서버 접속 Localhost:8080

사진 찍기 서비스 참고 사이트 소스 다운로드 설치 http://irisschaffer.com/taking-photos-with-raspberry-pi-socket- io/ 소스 다운로드 $ git clone https://github.com/irisSchaffer/rpi-socket- streaming.git 설치 $ cd rpi-socket-streaming $ npm install