0
div에 웹캠 스트림을 표시하려면 getUserMedia을 사용하고 있습니다. filter : blur(15px); 및 기타 CSS 효과와 같은 일부 CSS 효과를 비디오 스트림에 적용하려고합니다.카메라 스트림 jquery 새로 고침
문제는 클래스를 적용 할 때 효과가 작동하지 않지만 페이지가로드 될 때 .effect0에있는 것처럼로드됩니다.
아무도 내가 카메라의 스트림을 새로 고침하여 효과를 볼 수있는 방법을 알고 있으며 내 코드에 포함시키는 방법을 설명 할 수 있습니까?
도움을 주시면 감사하겠습니다.
내 코드 :
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true
}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
$('.bouton0').click(function() {
$('#videoElement').removeClass('.effet1');
$('#videoElement').addClass('.effet0');
});
$('.bouton1').click(function() {
$('#videoElement').removeClass('.effet0');
$('#videoElement').addClass('.effet1');
});#container {
margin: 0px auto;
margin-top: 10%;
}
#videoElement {
width: 100%;
height: 100%;
background-color: #666;
}
.effet0 {
filter: none;
}
.effet1 {
filter: blur(15px);
}
ul li {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul>
<li><a href="#" class="bouton0">effet 0</a></li>
<li><a href="#" class="bouton1">effet 1</a></li>
</ul>
<div id="container">
<video autoplay="true" id="videoElement" class=""> </video>
</div>
</body>