검색결과 리스트
글
LANGUAGE/HTML & CSS & JS
2018. 12. 13. 22:49
HTML5 / Javascript - navigator.getUserMedia Video에 거울효과가 필요할 때
navigator.getUserMedia의 사용시 비디오 화면이 좌우가 반전되어서 나타난다.
navigator.getUserMedia를 이용하여 연결된 캠을 사용할 수 있다.
그런데 잘 보면, 좌우가 반전되어 있다.
처음에는 내 캠이 잘못되었나 했지만..
아무래도 이것이 개발자가 의도한 결과인것 같다.
이게 맘에 들지 않는다면 2가지 방법이 있다.
비디오 촬영하기
Javascript를 이용하여 비디오 촬영하기 위한 코드는 다음과 같다.
<body>
<video id="test-video" width="200" height="200" autoplay loop muted></video>
</body>
<script>
//Polyfill
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
//Video
var video = document.getElementById('test-video');
navigator.getUserMedia({video:true, audio:false}, function(stream){
video.srcObject = stream;
video.play();
}, function(error){
//Error
});
</script>
1. VIDEO에 화면 거울효과
VIDEO의 화면은 다음 CSS를 추가하여 거울효과를 낼 수 있다.
<style>
video{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
</style>
2. CANVAS에 거울효과
CANVAS를 이용하여 VIDEO의 화면을 꾸미기도 하는데, 위의 CSS로는 CANVAS에 전달되는 데이터까지 수정되지 않는다.
대신에 scale과 translate를 이용하여 뒤집으면 OK.
<body>
<video id="test-video" width="200" height="200" autoplay loop muted ></video>
<canvas id="test-canvas" width="200" height="200"></canvas>
</body>
<script>
//Polyfill
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.getElementById('test-video');
var canvas = document.getElementById('test-canvas');
var context = canvas.getContext('2d');
//Video
navigator.getUserMedia({video:true, audio:false}, function(stream){
video.srcObject = stream;
video.play();
}, function(error){
//Error
});
//Canvas
(function loop(){
context.save();
context.scale(-1, 1);
context.translate(-200, 0);
context.drawImage(video, 0, 0, 200, 200);
context.restore();
requestAnimationFrame(loop);
})();
</script>
off - 끄기
여러 방법이 있지만 이렇게 할 수 있다.
stream을 잘 받아두었다가 소유한 track을 전부 stop한다.
stream.getTracks().forEach(track => track.stop());
참고
Is that possible to make video mirrored?: https://stackoverflow.com/questions/14455844/is-that-possible-to-make-video-mirrored
Stop/Close webcam which is opened by navigator.getUserMedia: https://stackoverflow.com/questions/11642926/stop-close-webcam-which-is-opened-by-navigator-getusermedia
'LANGUAGE > HTML & CSS & JS' 카테고리의 다른 글
| [JavaScript] crypto를 이용한 UUID (GUID) 만들기 (0) | 2019.02.26 |
|---|---|
| [Javascript] requestPointerLock 마우스커서 숨기기 (0) | 2018.12.18 |
| [Bower] is gone. (잘 가~) (0) | 2018.12.13 |
| [CryptoJS] SEED (0) | 2017.11.29 |
| [JavaScript] Context Path (0) | 2017.01.03 |