본문 바로가기
[자바스크립트] Node.js - 가상 캔버스 라이브러리 pureimage 사용 Node.js 내에서 HTML canvas처럼 사용할 수 있는 라이브러리를 기록합니다. 1. node-canvas : 가장 많이 쓰여지고 있지만 C++로 만들어져, 사용하려면 빌드해야함. Termux를 이용한 안드로이드 linux상에서 사용 불가. 2. pureimage : 빌드가 필요 없는 HTML canvas 모듈. 저는 Termux와 node.js를 좋아하기 때문에 pureimage를 사용하려 합니다. 다음 명령어로 설치 npm install pureimage --save //===node-canvas를 사용한 경우================================================== const mobilenet = require('@tensorflow-models/mobilen.. 2021. 1. 23.
[자바스크립트] Node.js - 웹서버에 Websocket 통신 추가하기 안녕하세요? 어제는 Node.js와 express 모듈을 이용해 웹서버를 구현해보았습니다. 오늘은 웹서버-Client간의 통신 중 가장 빠르고 대표적인 Websocket통신을 구현하겠습니다. 기존 웹서버를 만드는건 https://ohcoach.tistory.com/14 를 참고해 주세요. 1. 프로젝트에 express-ws 추가하기 npm install express-ws 2. index.js에 express-ws 모듈 사용하기 //index.js let express = require("express"); let app = express(); let expressWS = require("express-ws")(app); //웹소켓모듈 추가 app.use(express.static('public')); .. 2021. 1. 23.
[자바스크립트] Node.js - 웹서버 html 파일 랜더링하기 오늘은 Node.js를 이용해 웹서버를 만들고, 접속 시 지금까지 만든 예제를 화면에 보이도록 설정하겠습니다. Node.js 설치 및 기초 사용은 검색하면 잘 정리되어있는 자료들이 많으니, 참고해 주시기 바라며, 저는 완성 코드만 기록하겠습니다. 사실 블로그의 주 목적은 저 스스로 정리하기 위함이라 다른분들이 보시기에는 불친절할 수 있습니다... 나중에 고수가 되면 글도 잘 다듬고 내용도 보강하겠습니다. 1. 완성 코드 //index.js let express = require("express"); let app = express(); app.listen(3000, function(){ console.log("App is running on port 3000"); }); app.get("/", funct.. 2021. 1. 23.
[자바스크립트] 화면 방향(가로/세로) 확인하기 어제는 접속환경(Mobile/PC)을 확인하는 코드를 알아보았습니다. 오늘은 화면의 방향을 확인하는 코드를 기록하겠습니다. 어제보다 더욱 간단한 코드로 스크린의 방향을 확인할 수 있습니다. 방향이 고정된 PC의 경우 window.orientation 의 값이 undefined로 나오게 됩니다. 이 코드를 참고해 , 의 크기를 수정하는 것은 다음과 같습니다. let w, h; if (window.orientation == 0) { w = 240; h = 320; } else { w = 320; h = 240; } video.width = w; video.height = h; canvas.width = w; canvas.height = h; * 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코.. 2021. 1. 23.
[자바스크립트] 접속환경(Mobile/PC) 확인하기 지금까지 글에서 모바일과 PC환경을 구분하지 않았기 때문에 오류가 있었습니다. 예를들면, 카메라 해상도가 320x240일 때 읽어오는 영상의 크기는 스마트폰을 세워서 보면 240x320 즉 세로가 크고 노트북이나 카메라가 달린 PC에서는 320x240으로 가로길이가 더 큽니다. 다음 코드는 접속환경이 모바일인지 PC인지 확인하는 코드입니다. 이를 이용해 기존 코드에 삽입해서 모바일 혹은 PC에 맞는 설정으로 변경할 수 있습니다. * 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다. [끝]. 2021. 1. 23.
[자바스크립트] WebRTC를 이용한 카메라 사용 기초 안녕하세요? 만들오 입니다. 오늘은 WebRTC를 이용해 웹브라우저상에 카메라 화면을 띄우는 것을 알아보겠습니다. WebRTC를 이용하면 브라우저에서 카메라를 호출해 사용할 수 있는데요~ 이를 통해 아주 재미난 일들을 할 수 있게 됩니다. http://blog.naver.com/seineda/221224921920 자바스크립트를 이용한 물체 추적 안녕하세요? 오코치입니다. 자바스크립트를 이용해 선택한 대상을 추적하는 안드로이드 프로그램을 만들었... blog.naver.com 위 영상은 네이버 블로그에 작성했던 물체추적 영상입니다. 더욱 신기하고 재미난 것들이 많은데요~ 이러한 프로젝트의 첫걸음인 카메라 화면을 웹으로 불러오기를 본격적으로 알아보겠습니다. 1. 완성 코드 https://sein-oh.gi.. 2021. 1. 23.

티스토리툴바