Webcam Image Update in Javascript

Webcam Image Update in Javascript - javascript

I am having major brain ache on this one. I have a webcam that i snap an image from every 5 seconds. I have read all of the comments and I can successfully display an image from the webcam but cannot get the image to update. I have read the similar posts and tried everything.
Am i missing something?
This is what I have:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Webcam</title>
<script type="text/javascript">
var x = 0;
function init() {
window.onmessage = (event) => {
if (event.data) {
var ImageURL = document.getElementById("webcam1");
ImageURL.src = event.data;
Clear();
function Clear() {
document.getElementById("Load").style.display = "None";
document.getElementById("Test").innerHTML = "Clearing";
setInterval(UpdateImage, 20000);
function UpdateImage() {
x = x + 1;
var temp = ImageURL.src;
UpdatedImageURL.src = temp + "?=t" + new Date().getTime();
var UpdatedImageURL = document.getElementById("webcam1");
document.getElementById("Test").innerHTML =
"Updating .... " + x;
}
}
}
}
}
</script>
</head>
<body onload="init();">
<p id="Load">Loading ....</p>
<p id="Test">Starting ....</p>
<img id="webcam1" alt=" " width="700" height="450" />
</body>
</html>

Related

Hide AND unhide a <div> or <form> while executing code (progress bar a.o.)

the goal is to hide a form, do some stuff and unhide the form again. For example with this code for a progress bar I thought to do the following but the hiding/unhiding doesn't work. I'm probably overseeing something obvious.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progress Bar Demo</title>
<script>
var button;
var count;
var countmax;
var progressbar;
var timerID;
function start(max) {
show_div();
button = document.getElementById("button");
count = 0;
countmax = max;
progressbar = document.getElementById("bar");
progressbar.max = countmax;
timerID = setInterval(function(){update()},10);
show_div();
}//end function
function update() {
button.innerHTML = "Counting to " + countmax;
count = count + 100;
progressbar.value = count;
if (count >= countmax) {
clearInterval(timerID);
button.innerHTML = "Ready";
progressbar.value = 0;
}//end if
}//end function
function show_div() {
var x = document.getElementById("do_you_see_me?");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}//end function
</script>
</head>
<body>
<div id="do_you_see_me?" style="display: block";>Hi there!</div>
<p>
<button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br>
<br>
<progress id="bar" value="0"></progress>
</p>
</body>
</html>

you can hide and unhide it. the problem with your code is when you trigger ready buton it will hide and then unhide the code automatically. this is becuase setInterval() function is asynchronious function. then you need call show_div() function inside the setInterval().
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progress Bar Demo</title>
<script>
var button;
var count;
var countmax;
var progressbar;
var timerID;
function start(max) {
hide_div();
button = document.getElementById("button");
count = 0;
countmax = max;
progressbar = document.getElementById("bar");
progressbar.max = countmax;
timerID = setInterval(function()
{
update()
if(count>=countmax)
{
show_div();
}
},10);
}//end function
function update() {
button.innerHTML = "Counting to " + countmax;
count = count + 100;
progressbar.value = count;
if (count >= countmax) {
clearInterval(timerID);
button.innerHTML = "Ready";
progressbar.value = 0;
}//end if
}//end function
function show_div() {
document.getElementById("do_you_see_me?").style.display="block";
}//end function
function hide_div()
{
document.getElementById("do_you_see_me?").style.display="none";
}
</script>
</head>
<body>
<div id="do_you_see_me?" style="display: block";>Hi there!</div>
<p>
<button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br>
<br>
<progress id="bar" value="0"></progress>
</p>
</body>
</html>
i hope this will fix your problem.

Click on the text and play the sound - any solution?

Dear Stackoverflow community,
I have these sentences on an HTML below. Each sentence has its voice clip in MP3. I want to find the simplest javaScript code for playing the voice clip. How I need to continue the script in order to play the second sentence from the audio/audio_02.mp3? Thanks in advance from Hungary.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ENGLISH HOMONYMS</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript">
function play() {
var audio = new Audio('audio/audio_01.mp3');
audio.play();
}
</script>
<h2>ENGLISH HOMONYMS</h2>
<p onclick= "play();">The bandage was wound around the wound.</p>
<p onclick= "play();">farm was used to produce produce.</p>
</body>
</html>

Even Better Solution:
let words = document.querySelector('.words');
words.innerHTML = words.innerText.split(' ').map(word => `<span onClick="speak('${word}')" >${word}</span>`).join(' ');
function speak(mes){
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10];
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = mes;
msg.lang = 'en';
speechSynthesis.speak(msg);
}
<p class="words">The bandage was wound around the wound.</p>
Better solution :
function speak(mes){
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10];
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = mes;
msg.lang = 'en';
speechSynthesis.speak(msg);
}
<h1 onClick="speak('hi')" >
hi
</h1>
<h2 onClick="speak('How are you')" >
How are you
</h2>

As written in this question:
var audio = new Audio('audio_file.mp3');
audio.play();
function play() {
var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
audio.play();
}
<p onclick="play()">...</p>
Or if you want some animation to it:
function play() {
var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
audio.play();
}
.play-music:hover {
background-color: black;
color: white;
}
<p class="play-music" onclick="play()">...</p>
As regular HTML and not separated for the non animated one:
<html>
<body>
<script>
function play() {
var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
audio.play();
}
</script>
<p onclick="play()">...</p>
</style>
</body>
</html>
As regular HTML and not separated for the animated one:
<html>
<body>
<script>
function play() {
var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
audio.play();
}
</script>
<p class="play-music" onclick="play()">...</p>
<style>
.play-music:hover {
background-color: black;
color: white;
}
</style>
</body>
</html>
Hope you'll find it useful.

.toLowerCase() not working among other things not working

JS
var score = 0
var yes = "yes"
var pokemonName = [];
var bg = [];
var index = 0;
document.getElementById('repete').style.visibility = 'hidden';
(function asyncLoop() {
background = bg[num = Math.floor(Math.random() * bg.length)];
document.body.style.backgroundImage = 'url(' + background + ')';
})();
function loop() {
var myAnswer = document.getElementById("myAnswer");
var answer = myAnswer.value;
if (answer.toLowerCase().trim() == pokemonName[num].toLowerCase().trim()) {
document.getElementById("text").innerHTML = "Correct, do you want to try again?";
score++
document.getElementById('repete').style.visibility = 'visible';
} else {
document.getElementById("text").innerHTML = "Incorrect, do you want to try again?" + "\n" + " The pokemon was " + pokemonName[num];
document.getElementById('repete').style.visibility = 'visible';
}
}
function loopRepete() {
var repete1 = document.getElementById("repete");
var replay = repete1.value;
if (replay.toLowerCase().trim() == yes.toLowerCase().trim()) {
asyncLoop();
} else {
document.getElementById("text").innerHTML = "Goodbye, your score is " + score;
location.href = 'index.html'
}
}
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pokemon Quiz</title>
</head>
<body>
<lable> Answer </lable>
<input id="myAnswer" type="text">
<button onclick="loop()">click</button>
<p id="text"></p>
<div id="repete">
<lable> Answer </lable>
<input id="loop" type="text">
<button onclick="loopRepete()">click</button>
<p id="loopText"></p>
</div>
<script src="Gen3.js">
</script>
</body>
</html>
When I try take the input from the second second button (div id = repete) and put a toLowerCase() on it it does not work, and we I remove the toLowerCase() it still doesn't work but doesn't show a console error on the page. So I am confused On what I need to try do. I have tried to google it, but I could not find anything that helped.

You have to check if num exists in pokemonName array.
Otherwise, you'll be doing something like this:
[1,2,3][5].toLowerCase() which results in undefined.toLowerCase(), and you can't call .toLowerCase() on undefined as it only exists for String.

If you want asyncLoop to be defined you can't wrap it in a IIFE like that. I suspect you did that so it would run when the page loads, however there's another way to do that and still have the function defined for later use:
// define it like a normal function
function asyncLoop() {
background = bg[num = Math.floor(Math.random() * bg.length)];
document.body.style.backgroundImage = 'url(' + background + ')';
}
// and call it right away
asyncLoop();

Google Maps iFrame not loading when using javascript variables on "src"

I have an html file with javascript used to get the exif data out of an image, more specifically GPS latitude and longitude.
That data is the converted to a format readable by a Google Maps iFrame to then show where that photo was taken...
The problem I'm having at the moment is on the use of JavaScript variables that contain the values of the latitude and longitude on the "src" of the iFrame.
If I use the specific values on the source, the iFrame loads correctly on that specific location... but if I replace them with the variables that DO have the same exact values, nothing loads... the iFrame stays blank.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
<style>
img{
width: 500px;
max-height: auto;
}
</style>
</head>
<body>
<img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />
<iframe id="mapa_google" src="" width="640" height="480"></iframe>
<h1>Latitude Exif</h1>
<p id="local_lat"></p>
<h1>Longitude Exif</h1>
<p id="local_lon"></p>
<h1>Latitude Final</h1>
<p id="local_lat_final"></p>
<h1>Longitude Final</h1>
<p id="local_lon_final"></p>
<script src="exif.js"></script>
<script>
var toDecimal = function (number) {
var d = Math.floor(number[0]);
var m = Math.floor(number[1]);
var s = ((number[1]%1)*60);
var dms= d+(m/60)+(s/3600);
return dms
};
window.onload=getExif;
function getExif() {
img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");
local_lat = document.getElementById("local_lat");
local_lon = document.getElementById("local_lon");
local_lat.innerHTML = `${latitude}`;
local_lon.innerHTML = `${longitude}`;
latitude_final = toDecimal(latitude);
local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `${latitude_final}`;
longitude_final = toDecimal(longitude);
local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `${longitude_final}`;
});
}
getExif();
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q="+latitude_final+"+"+longitude_final;
/* IF I USE THE CODE BELOW WITH THE SPECIFIC LATITUDE AND LONGITUDE, THE iFrame works perfectly but id I use the one above, with the variables that contain those same values, nothing loads on that iFrame... it stays blank*/
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q=41.38448666666667+2.1066883333333335";
</script>
</body>
</html>

The getExif() function is asynchronous. You need to use the results of the asynchronous load of the <img> inside the callback function, once the image has loaded.
function getExif() {
img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");
local_lat = document.getElementById("local_lat");
local_lon = document.getElementById("local_lon");
local_lat.innerHTML = `${latitude}`;
local_lon.innerHTML = `${longitude}`;
latitude_final = toDecimal(latitude);
local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `${latitude_final}`;
longitude_final = toDecimal(longitude);
local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `${longitude_final}`;
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q=" + latitude_final + "+" + longitude_final;
});
proof of concept fiddle
code snippet:
img {
width: 500px;
max-height: auto;
}
<script src="https://cdn.jsdelivr.net/gh/exif-js/exif-js#2.3.0/exif.js"></script>
<img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" onload="getExif();" />
<iframe id="mapa_google" src="" width="640" height="480"></iframe>
<h1>Latitude Exif</h1>
<p id="local_lat"></p>
<h1>Longitude Exif</h1>
<p id="local_lon"></p>
<h1>Latitude Final</h1>
<p id="local_lat_final"></p>
<h1>Longitude Final</h1>
<p id="local_lon_final"></p>
<script>
var toDecimal = function(number) {
var d = Math.floor(number[0]);
var m = Math.floor(number[1]);
var s = ((number[1] % 1) * 60);
var dms = d + (m / 60) + (s / 3600);
return dms
};
// window.onload = getExif;
function getExif() {
img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");
local_lat = document.getElementById("local_lat");
local_lon = document.getElementById("local_lon");
local_lat.innerHTML = `${latitude}`;
local_lon.innerHTML = `${longitude}`;
latitude_final = toDecimal(latitude);
local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `${latitude_final}`;
longitude_final = toDecimal(longitude);
local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `${longitude_final}`;
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q=" + latitude_final + "+" + longitude_final;
});
}
// getExif();
</script>

how to make images link to different pages with javascript

What i want to do is to have each of the images that i m using link to a site when i click on them.The images keep changing with the setinterval() method and the function changeimage().I have some html and some javascript code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLES.css">
<title>KURIA SELIDA</title>
<meta charset="utf-8">
</head>
<body>
<table class="tablearxikhs">
<tr>
<td></td>
<td class="tdarxikhs" STYLE="font-size:150%;"> ΚΑΤΑΧΩΡΗΣΕΙΣ </td>
<td class="tdarxikhs"><h1>ΤΑΞΙΔΙΩΤΙΚΟ ΓΡΑΦΕΙΟ </h1></td>
<td class="tdarxikhs" style="font-size:150%;">ΕΠΙΚΟΙΝΩΝΙΑ</td>
</tr>
</table>
<h2 style="text-align: center; ">Κορυφαίοι Προορισμοί Για το 2017-2018</h2>
<center><img id="myimages" src="kalabruta1.jpg" height="230" width="600"></center>
<br><br>
The JS part:
<br><br>
<script>
var image = document.getElementById("myimages");
var images = ["kalabruta1.jpg", "metewra1.jpg", "naxos11.gif", "metewra2.jpg", "kalabruta2.jpg", "naxos2.jpg"];
var i = 0;
function changeimage() {
if (++i >= images.length) i = 0;
image.src = images[i];
images[i].onclick = imglink;
}
setInterval(changeimage, 3000);
function imglink() {
window.location.href = 'https://www.google.gr/';
}
</script>
What i have tried in order to have the images link to a site doesnt work..Can somebody help?

I don't understand the logic of your code, however, this is my suggestion:
This line images[i].onclick = imglink; is using images[i] and that's incorrect because you're getting String objects, instead you need to replace that line with this: image.onclick = imglink; in order to apply the onclick event to the image.
<script>
var image = document.getElementById("myimages");
var images = ["kalabruta1.jpg", "metewra1.jpg", "naxos11.gif", "metewra2.jpg", "kalabruta2.jpg", "naxos2.jpg"];
var i = 0;
function changeimage() {
if (++i >= images.length) i = 0;
image.src = images[i];
image.onclick = imglink;
}
setInterval(changeimage, 3000);
function imglink() {
window.location.href = 'https://www.google.gr/';
}
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Webcam Image Update in Javascript - javascript

Related

Hide AND unhide a <div> or <form> while executing code (progress bar a.o.)

Click on the text and play the sound - any solution?

.toLowerCase() not working among other things not working

Google Maps iFrame not loading when using javascript variables on "src"

how to make images link to different pages with javascript

Categories

Resources