How to create a webcam with JavaScript
?Or how to create a camera app with JavaScript?
If you are a beginner web developer or programmer you want to create a camera web app using JavaScript and databases then this article will tell you more about how to create a camera app.
To create a camera web app you need to know about navigator media device GetUsermedia Canvas Get Context 2d etc.
Must have a good idea about html canvas.
Where to save the image after taking the picture with the web camera The image can be saved in two ways one freeway(firebase) the second one is premium hosting I like PHP as my admin.
However, in this article, I will show you how to save the image for free with Money FireBase.
If you do this with FireBase, you will need to create an account first.
Now you have to give API key. then your image will be stored in your firebase store.
Below is the source code=========================>
index.html page
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
<title>Firebase Image capture and Upload in Javascrip | web developer joy</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<style type="text/css">
body{
background-color: black
}
#video {
position: relative;
animation: mymove 3s infinite;
}
@keyframes mymove {
from {border:4px solid tomato}
to {border:4px solid hotpink}
}
#snap {
position: relative;
animation: mymoves 2s infinite;
}
@keyframes mymoves {
from {border:4px solid red}
to {border:4px solid yellow}
}
</style>
<body>
<!-- Stream video via webcam -->
<center>
<video autoplay="" controls="" height="300" id="video" playsinline="" width="300"></video><br />
<!-- Trigger canvas web API -->
<button class="btn btn-primary font-weight-bold" id="snap">capture</button>
<!-- Webcam video snapshot -->
<canvas height="621px" id="canvas" style="filter: brightness(120%);" width="500px"></canvas>
</center>
</body>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-storage.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyAw--V0nd8ohVnbmAab4ICoVjs9CGMNCLo",
authDomain: "imghack-c264d.firebaseapp.com",
projectId: "imghack-c264d",
storageBucket: "imghack-c264d.appspot.com",
messagingSenderId: "867535249967",
appId: "1:867535249967:web:4cdf87b3d1ec3246195cda"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.querySelector('span#errorMsg');
const constraints = {
audio: false,
video: {
width: 400, height: 400
}
};
// Access webcam
async function init() {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
// Success
function handleSuccess(stream) {
window.stream = stream;
video.srcObject = stream;
}
// Load init
init();
// Draw image
var context = canvas.getContext('2d');
snap.addEventListener("click", function() {
context.drawImage(video, 0, 0, 500, 700);
var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
//console.log(image.src)
//var button = document.createElement('button')
//button.textContent = 'Save'
//document.body.appendChild(button)
const ref = firebase.storage().ref();
ref.child(new Date() + '-' + 'base64').putString(image.src, 'data_url').then(function(snapshot) {
//console.log('Uploaded a data_url string!');
//alert("Image Uploaded")
//location.replace("https://web-developer-joy.blogspot.com/")
console.log(image.src)
});
});
</script>
</html>
No comments