title: HTML5 Canvas not working for mobile devices
body: <p>I am trying to access the native camera with HTML5 to capture images for my web application it was working fine in my laptop but in mobile device it is not working..</p>
  
  <p>I am testing it with opera 12.0 in Android Gingerbread, the browser asks me whether to allow camera or not. But after allowing it doesn't show anything in the video tag.Here is my code,</p>
  
  <p>The HTML:</p>
  
  <pre><code> &lt;video autoplay id="vid" style="" width="200" height="150"&gt;&lt;/video&gt;
   &lt;canvas id="canvas" width="640" height="480" style="display:none;""&gt;&lt;/canvas&gt;&lt;br&gt;
   &lt;input type="button" value="Take Picture" onclick="snapshot()"/&gt;
  </code></pre>
  
  <p>the JavaScript:</p>
  
  <pre><code>    var video = document.querySelector("video");
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');
      var localMediaStream = null;
  
      var onCameraFail = function (e) {
          console.log('Camera did not work.', e);
      };
  
      function snapshot() {
  
          if (localMediaStream) {
              ctx.drawImage(video, 0, 0);
          }
          var strDataURI = canvas.toDataURL("image/png");
  
          $('#canvas_image').src = strDataURI;
  $.ajax({type: 'POST',url: "&lt;?php echo base_url().'my_profile/save_image' ?&gt;",data: {strDataURI:strDataURI },
                           success: function(resultData) {
                               location.reload();
                           }
                      });}
  
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia({video:true}, function (stream) {
          video.src = window.URL.createObjectURL(stream);
          localMediaStream = stream;
      }, onCameraFail);
  </code></pre>