1. navigator.getUserMedia 로 비디오 촬영하기
자바 스크립트 비디오 촬영 코드는 다음과 같습니다.
<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>
2. CSS를 활용한 미러 효과
video 와 CSS 를 활용합니다.
<style>
video{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
</style>
3. CANVAS를 활용한 거울 효과
css 대신 scale과 translate를 이용하여 좌우를 반전 합니다.
<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>
4. 끄기
stream을 잘 받아 두어야합니다.
stream.getTracks().forEach(track => track.stop());
출처: https://forgiveall.tistory.com/501 [하하하하하]
'프론트엔드 개발 놀이터 > Javascript' 카테고리의 다른 글
| jQuery 를 효율적으로 작성하는 방법 (0) | 2020.01.22 |
|---|---|
| 자바스크립트에서 당장 사용해야 할 5가지의 배열 메소드들 (0) | 2020.01.22 |
| 자바스크립트 Promise 쉽게 이해하기 (0) | 2020.01.17 |
| javascript fetch 를 이용한 ajax 통신 및 주의점 (0) | 2020.01.16 |
| 문서의 로드시점 - onload, $(window).load(); (0) | 2020.01.15 |