0

I have some problems creating a slideshow. I've used the following tutorial to create a video element with webcam acces, combined with the canvas element so that I can take screenshots:

http://joshondesign.com/p/books/canvasdeepdive/chapter13.html

What I'm trying to do, is to create a slideshow that contains a few images and the freshly taken screenshot. Does anybody know if there's a way, just by using javascript, to accomplish this?

My code so far:

var image1 = new Image()
image1.src = "images/slide1.png"
var image2 = new Image()
image2.src = "images/slide2.png"
var image3 = new Image()
image3.src = "the screenshot here"

 var step = 1;
        function slideit() {
            document.images.slide.src = eval("image"+step+".src");
            if(step<3)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
keenthinker
  • 7,645
  • 2
  • 35
  • 45
user3765402
  • 1
  • Are you having trouble with rendering the webcam image onto a canvas, or with animating it? – Jamie Jun 22 '14 at 20:38
  • One possibility would be to use [PhantomJS](http://phantomjs.org/screen-capture.html) on the server side to capture the image and transfer the image to the client or you can try [feedbackjs](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6678156#6678156). – keenthinker Jun 22 '14 at 20:38
  • Rendering the webcam image onto the canvas element succeeded. What I'm trying to do now, is to get the screenshot from the canvas element to a slideshow. Thanks for your help! – user3765402 Jun 22 '14 at 20:54
  • You can use `canvas.toDataURL()` to create a url for the image. – soktinpk Jun 22 '14 at 20:55

0 Answers0