刷新相機流jquery

我使用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>

來源

2016-12-11 rasanomera

可能 $().removeClass('.effet1'); -> $().removeClass('effet1');

其他也。 :)

來源

2016-12-12 02:06:57

刷新相機流jquery

回答

相關問題