今回はリアカメラ編を作成しようと思います
リアカメラとは、キーボードがある方向のカメラです
じゃ作ってみるでー
<li><a href="#area-1">WEBカメラの映像を表示</a></li>
<li><a href="#area-2">リアカメラでの、撮影</a></li>
<li><a href="#area-3">フロントカメラでの撮影</a></li>
<section class="area" id="area-1">
<footer id="footer">
<p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section class="area" id="area-1">
<h2>WEBカメラの映像を表示</h2>
</head>
<body>
<div>
<h1>WEBカメラの映像を表示</h1>
<div>
<video id="video"></video>
</div>
</div>
<script>
const video = document.getElementById("video")
navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then(stream => {
video.srcObject = stream;
video.play()
}).catch(e => {
console.log(e)
})
</script>
</body>
</html>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Camera Test</title>
<style>
canvas, video{
border: 1px solid gray;
}
</style>
</head>
<body>
<html>
<body>
<ol>
<pre>
<section class="area" id="area-2">
<h1>撮影します。</h1>
撮影したものは、右側の画面です。
<video id="camera" width="300" height="200"></video>
<canvas id="picture" width="300" height="200"></canvas>
<form>
<button type="button" id="shutter">撮影する</button>
</form>
<audio id="se" preload="auto">
<source src="camera-shutter1.mp3" type="audio/mp3">
</audio>
<script>
window.onload = () => {
const video = document.querySelector("#camera");
const canvas = document.querySelector("#picture");
const se = document.querySelector('#se');
/** カメラ設定 */
const constraints = {
audio: false,
video: {
width: 300,
height: 200,
facingMode: "user" // フロントカメラを利用する
// facingMode: { exact: "environment" } // リアカメラを利用する場合
}
};
/**
* カメラを<video>と同期
*/
navigator.mediaDevices.getUserMedia(constraints)
.then( (stream) => {
video.srcObject = stream;
video.onloadedmetadata = (e) => {
video.play();
};
})
.catch( (err) => {
console.log(err.name + ": " + err.message);
});
/**
* 撮影
*/
document.querySelector("#shutter").addEventListener("click", () => {
const ctx = canvas.getContext("2d");
// 演出的な目的で一度映像を止めてSEを再生する
video.pause(); // 映像を停止
se.play(); // シャッター音
setTimeout( () => {
video.play(); // 1.5秒後にカメラ再開
}, 1500);
// canvasに画像を貼り付ける
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const c = document.getElementById('picture');
c.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
document.body.appendChild(a);
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var date = nowDate.getDate();
var hours = nowDate.getHours();
var minutes = nowDate.getMinutes();
var Seconds = nowDate.getSeconds();
var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒';
a.download = today + '.png';
a.href = url;
a.click();
a.remove();
setTimeout(() => {
URL.revokeObjectURL(url);
}, 1E4);
}, 'image/png');
});
};
</script>
</body>
</html>
<html>
<body>
<ol>
<pre>
<section class="area" id="area-3">
<h1>撮影します。</h1>
撮影したものは、右側の画面です。
<video id="camera" width="300" height="200"></video>
<canvas id="picture" width="300" height="200"></canvas>
<form>
<button type="button" id="shutter">撮影する</button>
</form>
<audio id="se" preload="auto">
<source src="camera-shutter1.mp3" type="audio/mp3">
</audio>
<script>
window.onload = () => {
const video = document.querySelector("#camera");
const canvas = document.querySelector("#picture");
const se = document.querySelector('#se');
/** カメラ設定 */
const constraints = {
audio: false,
video: {
width: 300,
height: 200,
facingMode: "user" // フロントカメラを利用する
// facingMode: { exact: "environment" } // リアカメラを利用する場合
}
};
/**
* カメラを<video>と同期
*/
navigator.mediaDevices.getUserMedia(constraints)
.then( (stream) => {
video.srcObject = stream;
video.onloadedmetadata = (e) => {
video.play();
};
})
.catch( (err) => {
console.log(err.name + ": " + err.message);
});
/**
* 撮影
*/
document.querySelector("#shutter").addEventListener("click", () => {
const ctx = canvas.getContext("2d");
// 演出的な目的で一度映像を止めてSEを再生する
video.pause(); // 映像を停止
se.play(); // シャッター音
setTimeout( () => {
video.play(); // 3秒後にカメラ再開
}, 3000);
// canvasに画像を貼り付ける
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const c = document.getElementById('picture');
c.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
document.body.appendChild(a);
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var date = nowDate.getDate();
var hours = nowDate.getHours();
var minutes = nowDate.getMinutes();
var Seconds = nowDate.getSeconds();
var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒';
a.download = today + '.png';
a.href = url;
a.click();
a.remove();
setTimeout(() => {
URL.revokeObjectURL(url);
}, 1E4);
}, 'image/png');
});
};
</script>
</body>
</html>
<footer id="footer">
<p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p>
<p class="js-pagetop scroll-top"><a href="#">Page Top</a></p>
<small>© copyright.</small>
</footer>
すべてコピペで使用できます
保存名は、その時の時間を、秒数で表します
まとめ
参考になると嬉しいです