안녕하세요? 만들오 입니다.
오늘은 지난번 만든 안드로이드폰으로 CCTV만들기에 이어
RC카에 카메라를 달아 FPV를 구현하는게 목표입니다.
사실 마이크로비트 제어 + CCTV 만들기 내용을 잘 조합하기만 하면 됩니다 ㅋㅋ;
이제는 설치부분은 생략하고 각 코드부분만 올릴게요.
1. Droidscript HTML 앱 코드
New Html App 만들기로 파일을 만들어 줍니다. 저는 MB_FPV로 했습니다.
만든 MB_FPV.html의 코드를 다음과 같이 바꿔주세요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Droidscript CCTV</title>
</head>
<body>
<video id="webcam" style="display:none;"></video>
<canvas id="canvas" width="395" height="395"></canvas>
<p id="ip" style="color:white">...</p>
<p id="info" style="color:white">Waiting for Client...</p>
</body>
<script src=file:///android_asset/app.js></script>
<script type="text/javascript">
let port = 9000;
let serv = app.CreateWebServer( port, "Upload,ListDir" );
serv.SetFolder( "/sdcard/DroidScript/"+app.GetAppName());
serv.SetOnReceive( serv_OnReceive );
serv.Start();
app.LoadPlugin("MicroBit");
microbit = app.CreateMicroBit();
microbit.SetOnConnect(MBconnected);
microbit.SetOnReceive(MBreceive);
microbit.Scan();
document.getElementById("ip").innerHTML = app.GetIPAddress()+":"+port;
let w=395, h=395;
let video=document.getElementById("webcam");
var constraints = {video: {facingMode: { exact: "environment" },width: {exact:w}, height:{exact:h}}, audio: false };
function successCallback(stream){
video.srcObject = stream;
video.play();
}
function errorCallback(error){
console.log(error);
app.ShowPopup(error );
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
let canvas=document.getElementById('canvas');
let ctx=canvas.getContext("2d");
function processVideo(){
ctx.drawImage(video, 0, 0, w, h);
let imageData = ctx.getImageData(0, 0, w, h);
setTimeout(processVideo, 0);
}
processVideo();
function sendStream(){
let rawData = canvas.toDataURL("image/jpeg", 0.5);
serv.SendText(rawData);
}
setInterval(sendStream, 30);
function serv_OnReceive(msg, ip){
document.getElementById("info").innerHTML = "Connected. Start streaming my camera...";
app.ShowPopup(msg);
microbit.Send(msg+"\n");
}
function MBreceive(data){
app.ShowPopup('microbit: ' + data);
}
function MBconnected(){
app.ShowPopup("MicroBit is connected!");
}
</script>
</html>2. index.html 추가하기
위 그림과 같이 프로젝트 내에서 New File을 선택하여 index.html파일을 생성 후 다음과 같이 수정해 주세요.
<!DOCTYPE html>
<html>
<head>
<title>OCOACH</title>
<meta name="viewport" content="width=device-width">
</head>
<style>
body{
background-color:rgb(150,150,150);
text-align:center;
-webkit-user-select:none;
}
button{
width:90px;
height:90px;
margin:6px 1px 6px 1px;
font-size:30px;
color: white;
background-color:rgb(51,51,51);
border:none;
border-radius:20px;
box-shadow: 0 9px rgba(104,104,104, 0.5);
}
button:active{
box-shadow: 0 5px rgba(104,104,104, 0.5);
transform: translateY(4px);
}
</style>
<body>
<image id="window" src="">
<div align='center'>
<div style='position:relative; width:90%; height:90%; border:2px dashed #BDBDBD'>
<button id='w' ontouchstart=touch(this.id) onmousedown=touch(this.id) onmouseup=touch('s')>w</button>
<div>
<button id='a' ontouchstart=touch(this.id) onmousedown=touch(this.id) onmouseup=touch('s')>a</button>
<button id='s' ontouchstart=touch(this.id) onmousedown=touch(this.id) onmouseup=touch('s')>s</button>
<button id='d' ontouchstart=touch(this.id) onmousedown=touch(this.id) onmouseup=touch('s')>d</button>
</div>
<button id='x' ontouchstart=touch(this.id) onmousedown=touch(this.id) onmouseup=touch('s')>x</button>
</div>
</div>
</body>
<script>
var img = document.getElementById("window");
var addr = location.href;
var ip = addr.replace("http", "ws");
var ws = new WebSocket(ip);
ws.onmessage = function(msg){
img.src = msg.data;
}
function touch(id){
ws.send(id);
}
</script>
</html>
위의 index.html파일은 사실 마이크로비트 블루투스 앱 만들기와 유사합니다. 이미지 태그와 웹소켓을 추가하여 통신한 부분이 추가되었군요.
3. 실행 및 코드 작동설명
다음은 작동 영상입니다. 서버로 구현한 안드로이드폰 화면을 캡쳐했습니다.
최근 만든 영상으로 대체합니다. 컨셉은 해당 글과 동일하며, Droidscript 대신 ESP CAM을 이용했습니다.
작동 순서는 다음과 같습니다.
1) 앱 실행 직후 마이크로비트 검색
2) 마이크로비트 연결되면 팝업창에 MicroBit is connected! 문구 출력
3) 표시된 웹서버 주소로 접속. ex)192.168.0.2:9000)
4) 영상 스트리밍 시작
5) 버튼을 누르면 스마트폰으로(Droidscript가 만든 웹서버) Websocket을 이용해 문자 전송
6) Websocket 문자를 받으면 마이크로비트로 문자 전송(블루투스)
* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.
[끝].
728x90
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] Canvas를 이용한 조이스틱 만들기 (1) | 2021.01.23 |
|---|---|
| [자바스크립트] Droidscript - Tensorflow.js를 이용한 사물인식(Object Detection) (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 물체추적(Object tracking) 앱 만들기 (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 안드로이드폰 CCTV 앱 만들기 (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 마이크로비트 조종앱 만들기 (0) | 2021.01.23 |
댓글