title: displaying live webcam data in a HTML webapp
body: <p>I want to display data from my webcam live in my web app. Here is my code.Using this code I am able to see my live data that is coming from my web cam. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta content="stuff, to, help, search, engines, not" name="keywords"&gt;
  &lt;meta content="What this page is about." name="description"&gt;
  &lt;meta content="Display Webcam Stream" name="title"&gt;
  &lt;title&gt;Display Webcam Stream&lt;/title&gt;
  
  &lt;style&gt;
  #container {
      margin: 0px auto;
      width: 500px;
      height: 375px;
      border: 10px #333 solid;
  }
  #videoElement {
      width: 500px;
      height: 375px;
      background-color: #666;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;video autoplay="true" id="videoElement"&gt;
  
      &lt;/video&gt;
  &lt;/div&gt;
  &lt;script&gt;
          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) {
      alert("error");
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Suppose I have a webapp with 4 pages.I want to display this webcam data in one of the div in my third page.How can I do that.Do I need to change anything in this?<br>
         <b>video.src = window.URL.createObjectURL(stream);</b></p>