Refresh camera stream jquery
Question
i'm using getUserMedia to display the webcam stream in a div. I'm trying to apply some CSS effects to the video stream, like filter : blur(15px); and some other CSS effects.
The problem is that the effect doesn't work, when i'm applying the class, but it works if it's loaded like if it's on .effect0 at the loading of the page.
Does anybody know how i can refresh only the camera stream to see the effect, and can explain to me how to include it in my code ?
Thanks a lot if you read me and thanks again if you help !
My code :
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>
1 answers
solution1
0 2016-12-12 02:06:57
May be $().removeClass('.effet1'); -> $().removeClass('effet1'); $().removeClass('.effet1'); -> $().removeClass('effet1');
Other also. :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.