はじめに
こんにちは！@70days_jsです。
JavaScriptでスナップショットを撮るサイトを作ってみました。
今日は47日目。(2019/12/4)
よろしくお願いします。
サイトURL
やったこと
JavaScriptでスナップショットを撮るサイトを作ってみました。
chrome以外では動かない可能性があります。
gif↓
やっていることはシンプルで、カメラにアクセスしてボタンを押すとスナップショットを撮るだけです。
<body>
<h2>Camera Punch</h2>
<div class="videoWrapper">
<video id="player" autoplay></video>
<div id="capture"></div>
</div>
<div id="snapshotWrapper"></div>
</body>
videoタグで映像、id="capture"でボタン、.snapshotWrapperクラスでスナップショットを表示しています。
.snapshotWrapperクラスには、JavaScriptを使って子要素にcanvasタグを加えていきます。
let player = document.getElementById("player");
let captureButton = document.getElementById("capture");
let snapshotWrapper = document.getElementById("snapshotWrapper");
let beferCanvas;
let handleSuccess = function(stream) {
player.srcObject = stream;
};
captureButton.addEventListener("click", function() {
let canvas = document.createElement("canvas");
canvas.setAttribute("class", "snapshot");
// 2枚目以降のスナップショット
if (beferCanvas) {
beferCanvas = snapshotWrapper.insertBefore(canvas, beferCanvas);
randomColor(snapshotWrapper.firstChild);
} // 1枚目のスナップショット
else {
beferCanvas = snapshotWrapper.appendChild(canvas);
randomColor(snapshotWrapper.firstChild);
}
var context = canvas.getContext("2d");
context.drawImage(player, 0, 0, canvas.width, canvas.height);
});
navigator.mediaDevices.getUserMedia({ video: true }).then(handleSuccess);
navigator.mediaDevices.getUserMedia({ video: true }).then(handleSuccess);
getUserMedia APIを使いました。
getUserMedia APIはpromiseを返します。
Mediaの取得ができれば、handleSuccessを実行します。
let handleSuccess = function(stream) {
player.srcObject = stream;
};
handleSuccessは、streamをsrcObjectに格納しています。
srcObjectはメディアソースを提供するオブジェクトをvideoタグ（id="player")に設定しています。
あと細かいですが、最新のスナップショットを左端に置いていくためにif文を使っています。
作成した要素をbeferCanvas変数に格納して、insertBeforeとappendChildを使い分けることで実現しています。
感想
APIの力はすごいなぁと思いました。
こうやって簡単に便利な機能を実装できるAPIやライブラリが増えていくと、プログラマーは必要なくなるんじゃないかと思いました。
が、なくならないんですよね。なぜか。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- ユーザーから画像を取得する | Web | Google Developers (https://developers.google.com/web/fundamentals/media/capturing-images/?hl=ja#top_of_page)
とても分かりやすかったです。ありがとうございます！