Przeglądaj źródła

tiny getUserMedia/camera example.

fancyness: supports getting single images.
not so fancyness: doesn't display any instructions.
Lucas Stadler 11 lat temu
rodzic
commit
c6ba6b7de1
1 zmienionych plików z 31 dodań i 0 usunięć
  1. 31 0
      js/camera.html

+ 31 - 0
js/camera.html

@ -0,0 +1,31 @@
1
<p>(Intentionally left blank, take a look at the console.)</p>
2
3
<script>
4
  navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
5
6
  window.video = document.createElement("video");
7
  window.canvas = document.createElement("canvas");
8
  window.ctx = canvas.getContext("2d");
9
10
  navigator.getUserMedia(
11
    {video: true},
12
    function(lms) {
13
      window.lms = lms;
14
15
      video.src = URL.createObjectURL(lms);
16
      video.onplaying = function() {
17
        console.log("recording ...");
18
        // this is a hack, there's probably an event that we could use instead
19
        setTimeout(getImage, 1000); };
20
      video.play();
21
    },
22
    function(err) { console.error(err); }
23
  );
24
25
  function getImage() {
26
    console.log("taking image");
27
    ctx.drawImage(video, 0, 0);
28
    window.img = ctx.getImageData(0, 0, canvas.width, canvas.height);
29
    return img;
30
  }
31
</script>