前回つかったモック にキャプチャー機能をつけてみました。
挙動としてはキャプチャボタンを押した際にcanvasにコピーしているだけです。
JavaScript
(function(win, doc, $) { "use strict"; win.app = {}; })(this, document, $); (function(win, doc, $, ns) { "use strict"; function Preview(canvas, video) { var $video = $(video), ctx = canvas.getContext("2d"); _init(); function _init() { canvas.style.display = "none"; } function _adjustSize() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; } function capture() { _adjustSize(); canvas.style.display = "block"; video.style.display = "none"; ctx.drawImage(video, 0, 0); } return { capture: capture }; } ns.Preview = Preview; })(this, document, $, app); (function(win, doc, $, ns) { "use strict"; init(); function init() { $(".start").on("click", useCamera).trigger("click"); } function useCamera() { navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.getUserMedia) { navigator.getUserMedia ({video: true, audio: false}, handleSuccess, handleError); } } function handleSuccess(localMediaStream) { var video = doc.querySelector("video"), canvas = doc.querySelector("canvas"), preview; video.style.display = "block"; video.src = window.URL.createObjectURL(localMediaStream); video.play(); preview = new ns.Preview(canvas, video) $(".stop").on("click", function() { localMediaStream.stop(); }); $(".capture").on("click", function() { preview.capture(); }); } function handleError(evt) { console.log(evt); } })(this, document, $, app);
HTML
<video></video> <canvas></canvas> <div class="btn start">START</div> <div class="btn stop">STOP</div> <div class="btn capture">CAPTURE</div>