title: Refresh camera stream jquery
body: <p>i'm using <code>getUserMedia</code> to display the webcam stream in a div. 
  I'm trying to apply some CSS effects to the video stream, like <code>filter : blur(15px);</code> and some other CSS effects. </p>
  
  <p>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 <code>.effect0</code> at the loading of the page. </p>
  
  <p>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 ? </p>
  
  <p>Thanks a lot if you read me and thanks again if you help ! </p>
  
  <p>My code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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');
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" class="bouton0"&gt;effet 0&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="bouton1"&gt;effet 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="container"&gt;
          &lt;video autoplay="true" id="videoElement" class=""&gt; &lt;/video&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>