RaspberryPI - 3D Camera streaming

티스토리 뷰

OS/Raspberry Pi

RaspberryPI - 3D Camera streaming

파란크리스마스 2015. 10. 4. 00:59

출처 : MJPG streaming with a Raspberry Pi and a webcam

산딸기 마을에서 만든 rc_car를 이동하면서 구글 Cardboard로 3D 영상을 보기 위해서
RaspberryPI 두개로 각각 PI Camera로 3D 좌우 영상을 얻어 보았지만 싱크가 맞지 않아서,
3D 영상을 얻지 못했습니다.

그래서 3D 카메라를 찾다가 AliExpress에서 USB 타입의 듀얼 카메라를 구입습니다.
PaspberryPI에서 mjpg_streamer를 두번 실행해서, html로 두개의 영상을 좌우로 구성했습니다.

구글의 Cardboard로 핸드폰 브라우져의 좌우 영상보시면 3D 영상을 보실 수 있습니다.

AliExpress에서 구입한 Camera

Camera 설치 확인

USB 방식으로 RaspberryPI에 USB에 연결만 하면 바로 설치가 됩니다.

$ ls /dev/vi*
/dev/video0  /dev/video1

Camera 1 - mjpg_streamer 실행

$ mjpg_streamer -i "input_uvc.so -d /dev/video0 -n -y -f 15 -r 640x480"

Camera 2 - mjpg_streamer 실행

$ mjpg_streamer -i "input_uvc.so -d /dev/video1 -n -y -f 15 -r 640x480" -o "output_http.so -w /usr/local/www2 -p 8081"

듀얼 화면 구성 html 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="js-mjpeg/eventemitter2.min.js"></script>
<script type="text/javascript" src="js-mjpeg/mjpegcanvas.min.js"></script>

<script type="text/javascript" type="text/javascript">
function init() {

	var canvas_width = (document.body.clientWidth / 2);
	var canvas_heigth = canvas_width * 75 / 100;
	
	// Create the main viewer.
	var viewer_l = new MJPEGCANVAS.Viewer({
	  divID : 'mjpeg_l',
	  host : '192.168.1.190',
	  port : '8080',
	  width : canvas_width,
	  height : canvas_heigth,
	  topic : '/?action=stream'
	});
	
	var viewer_r = new MJPEGCANVAS.Viewer({
	  divID : 'mjpeg_r',
	  host : '192.168.1.190',
	  port : '8081',
	  width : canvas_width,
	  height : canvas_heigth,
	  topic : '/?action=stream'
	});
}
</script>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}

.blind, body, button, dd, dl, dt, fieldset, form, canvas {
  margin: 0;
  padding: 0;
}

.grid1_wrap, .grid2_wrap {
  margin: 0;
  box-sizing: border-box;
}

@media (min-width: 640px)
.grid1_wrap.news_wrap .brick-vowel {
  width: 50%;
}

.brick-house .brick-vowel {
  float: left;
  /* width: 100%; */
}
</style>
</head>

<body onload="init()">

<div class="flick-panel" style="height: 100%; transition-property: -webkit-transform; transition-duration: 0ms; position: absolute; width: 100%; left: 0px; top: 0px; float: left;">
	<div class="grid1_wrap news_wrap brick-house" data-last="true" style="padding-left:0px">
		<div class="brick-vowel" id="mjpeg_l"></div>
		<div class="brick-vowel" id="mjpeg_r"></div>
	</div>
</div>

</body>
</html>

ie에서 듀얼 화면 확인