0
Я использую getUserMedia для отображения потока веб-камеры в div. Я пытаюсь применить некоторые эффекты CSS к видеопотоку, например filter : blur(15px); и некоторые другие эффекты 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>