0
私はgetUserMediaを使ってdivにウェブカメラストリームを表示しています。 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>