본문 바로가기
[자바스크립트] WebRTC를 이용한 카메라 사용 기초 안녕하세요? 만들오 입니다. 오늘은 WebRTC를 이용해 웹브라우저상에 카메라 화면을 띄우는 것을 알아보겠습니다. WebRTC를 이용하면 브라우저에서 카메라를 호출해 사용할 수 있는데요~ 이를 통해 아주 재미난 일들을 할 수 있게 됩니다. http://blog.naver.com/seineda/221224921920 자바스크립트를 이용한 물체 추적 안녕하세요? 오코치입니다. 자바스크립트를 이용해 선택한 대상을 추적하는 안드로이드 프로그램을 만들었... blog.naver.com 위 영상은 네이버 블로그에 작성했던 물체추적 영상입니다. 더욱 신기하고 재미난 것들이 많은데요~ 이러한 프로젝트의 첫걸음인 카메라 화면을 웹으로 불러오기를 본격적으로 알아보겠습니다. 1. 완성 코드 https://sein-oh.gi.. 2021. 1. 23.
[자바스크립트] Canvas를 이용한 조이스틱 만들기 2019.05.19 - Canvas를 블로그 내에서 사용할 수 있도록 수정하였습니다. 이번 글은 Html의 태그를 이용해 조이스틱을 만드는 것을 목표로 하고 있고, RC카에 연동하기 위해 w, a, s, d, x 등 커맨드 보내는 것을 간단히 구현하도록 하겠습니다. 1. 완성 코드 2. 작동설명 해당 코드로 html 파일을 만들어 열어보면 조이스틱 모양이 보이고, 움직이면 console.log로 w, a, s, d, x 와 같은 출력을 나타냅니다. send함수를 수정하면 droidscript에서 블루투스로 신호를 보낼 수 있습니다. 모바일 환경의 터치 이벤트와, 마우스를 이용한 클릭 이벤트를 모두 수용하기 위해 try catch문을 사용했습니다. 3. 마무리 Html/css/javascript로 만든 웹.. 2021. 1. 23.
[자바스크립트] Droidscript - Tensorflow.js를 이용한 사물인식(Object Detection) 안녕하세요? 만들오 입니다. 오늘은~ Tensorflow.js를 이용해 사물인식을 구현했습니다. 대표적인 사물인식 신경망은 YOLO(You Only Look Once)가 있습니다. 제가 구현한 것은 SSD(Single Shot MultiBox Detector)방식입니다. 카메라가 달려있는 환경이라면 데모를 실행해보셔도 좋습니다. https://sein-oh.github.io/coco_ssd/ (demo) 설정이 마무리되지 않아 스마트폰에서는 오류가 발생하니 참고해 주세요. 1. 완성 코드 ... tf.min.js 파일과 coco-ssd.js 파일은 다음 링크에서 받아 위 코드가 있는 html파일과 같은 경로에 저장해주세요. https://github.com/Sein-Oh/coco_ssd 2. 코드 설명 .. 2021. 1. 23.
[자바스크립트] Droidscript - 물체추적(Object tracking) 앱 만들기 안녕하세요? 만들오 입니다. Html/Css/Javascirpt로 구현한 물체추적 프로젝트를 Droidscript로 바꾸어 보았습니다. https://sein-oh.github.io/LK_track/ -> (사용 예제) My LK Tracker sein-oh.github.io 1. 완성 코드 1.1. App이름.html 예) LK_track.html Mouse : 1.2. jsfeat (외부 라이브러리) 해당 파일을 Droidscript의 {App이름.html} 과 같은 폴더에 저장 0.06MB 2. 코드 설명 이제부터는 외부 라이브러리를 이용해 프로젝트를 구성했습니다. 위 코드는 나의 html파일이 있는 폴더에서 jsfeat-min.js라는 자바스크립트파일을 불러오라는 요청입니다. let w = 395.. 2021. 1. 23.
[자바스크립트] Droidscript - 카메라를 장착한 RC카 만들기 안녕하세요? 만들오 입니다. 오늘은 지난번 만든 안드로이드폰으로 CCTV만들기에 이어 RC카에 카메라를 달아 FPV를 구현하는게 목표입니다. 사실 마이크로비트 제어 + CCTV 만들기 내용을 잘 조합하기만 하면 됩니다 ㅋㅋ; 이제는 설치부분은 생략하고 각 코드부분만 올릴게요. 1. Droidscript HTML 앱 코드 New Html App 만들기로 파일을 만들어 줍니다. 저는 MB_FPV로 했습니다. 만든 MB_FPV.html의 코드를 다음과 같이 바꿔주세요 ... Waiting for Client... 2. index.html 추가하기 위 그림과 같이 프로젝트 내에서 New File을 선택하여 index.html파일을 생성 후 다음과 같이 수정해 주세요. w a s d x 위의 index.html파.. 2021. 1. 23.
[자바스크립트] Droidscript - 안드로이드폰 CCTV 앱 만들기 Droidscript는 안드로이드의 대부분 기능을 활용할 수 있습니다. 오늘은 카메라 영상을 웹으로 전송해 CCTV로 활용할 수 있는 방법을 소개하겠습니다. 1. Droidscript 설치하기 [필요시] 플레이스토어에서 Droidscript를 검색 후 설치합니다. 2. Droidscript 와이파이 에디터 실행 (필수는 아니지만 추천) Droidscript는 와이파이에 연결해 컴퓨터로 코딩할 수 있습니다. 실행해보면 Wifi Connect 알림창이 나오고 밑에 주소가 나옵니다. ex)192.168.0.2:8088 인터넷 브라우저(저는 크롬을 사용합니다)에서 주소를 입력하면 인터넷 화면에서 코드를 작성하고 수정할 수 있습니다. 편리한 기능이니 사용하도록 하고, 설명은 와이파이 에디터를 사용한 것으로 하겠습.. 2021. 1. 23.

티스토리툴바