안녕하세요? 만들오 입니다.
오늘은 WebRTC를 이용해 웹브라우저상에 카메라 화면을 띄우는 것을 알아보겠습니다.
WebRTC를 이용하면 브라우저에서 카메라를 호출해 사용할 수 있는데요~
이를 통해 아주 재미난 일들을 할 수 있게 됩니다.
http://blog.naver.com/seineda/221224921920
자바스크립트를 이용한 물체 추적
안녕하세요? 오코치입니다. 자바스크립트를 이용해 선택한 대상을 추적하는 안드로이드 프로그램을 만들었...
blog.naver.com
위 영상은 네이버 블로그에 작성했던 물체추적 영상입니다.
더욱 신기하고 재미난 것들이 많은데요~ 이러한 프로젝트의 첫걸음인 카메라 화면을 웹으로 불러오기를 본격적으로 알아보겠습니다.
1. 완성 코드
<!DOCTYPE html>
<html>
<body>
<video id="videoInput"></video>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
//var constraints = { video: { facingMode: { exact: "environment" }, width: { exact: 395 }, height: { exact: 395 } }, audio: false };
var constraints = { audio: false, video: true };
var video = document.getElementById("videoInput");
function successCallback(stream) {
video.srcObject = stream;
video.play();
}
function errorCallback(error) {
console.log(error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
</script>
</body>
</html>https://sein-oh.github.io/WebRTC_basic/ -> 실행 예제
2. 코드 설명
사실 몇줄 안되는 코드로 WebRTC를 이용해 카메라를 호출할 수 있습니다. constraints를 이용해 카메라를 선택하거나 크기를 조절할 수 있는데요, 모바일 접속과 데스크탑 접속 시 구분을 해주어야 정상적으로 작동합니다.
(위 코드는 데스크탑, 모바일의 전면 카메라로 작동합니다)
3. 마무리
영상관련 javascript 프로젝트의 첫걸음인 WebRTC를 사용했습니다. 세부 코드에 대한 질문은 댓글로 남겨주세요~
* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.
[끝].
728x90
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 화면 방향(가로/세로) 확인하기 (0) | 2021.01.23 |
|---|---|
| [자바스크립트] 접속환경(Mobile/PC) 확인하기 (0) | 2021.01.23 |
| [자바스크립트] Canvas를 이용한 조이스틱 만들기 (1) | 2021.01.23 |
| [자바스크립트] Droidscript - Tensorflow.js를 이용한 사물인식(Object Detection) (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 물체추적(Object tracking) 앱 만들기 (0) | 2021.01.23 |
댓글