I am fairly unfamiliar with web technology.
A software that embeds a web server output a dynamic image
on the local host:
<img src="http://localhost:8000/" alt="http://localhost:8000/" class="transparent shrinkToFit" width="419" height="428">
This image is updated regularly by the software. I am trying to display this update in the web browser. There are several related posts and I have tried two solutions but so far with no luck.
Below are two attempts inspired by existing code and both fail. The problem seems to be related to some caching effect but I am not sure how to work around this.
Thanks in advance,
Trad
<html>
<head>
<title></title>
<meta content="">
<style></style>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="rsc/stylesheet.css" type="text/css" charset="utf-8" />
<!-- <script>
setInterval(function() {
var url = "http://localhost:8000";//document.getElementById("url").value;
var xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
if (xhr.readyState == xhr.DONE && xhr.status == 200 ) { // xhr.readyState == xhr.DONE &&
// Render the downloaded image
var myblob = xhr.response;
var image = document.getElementById("ImageMusic");
image.addEventListener("load", function (evt) {
URL.revokeObjectURL(evt.target.src);
});
image.src = URL.createObjectURL(myblob);
}
}
xhr.send(null);
}, 100);
</script>
-->
<script>
setInterval(function() {
var myImageElement = document.getElementById('ImageMusic');
myImageElement.src = 'http://localhost:8000?rand=' + Math.random();
}, 100);
</script>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="ImageMusic" src="http://localhost:8000" />
</a-assets>
<a-image position="1 1 -4" width="4" height="4" src="#ImageMusic"></a-image>
</a-scene>
</body>
</html>
It is not possible to use a web page as an image or texture.
In the context of A-Frame, you cannot use I-Frames as an image or texture either, it is not possible in the browser.
Try using iframe
<iframe src="http://localhost:8000/">Your browser does not support the iframe HTML tag</iframe>
This should update automatically.
Alternatively, you can use the <embed src="http://localhost:8000/"></embed> tag. As long as you have a set pixel size for the images, (eg: 1080x720), you shouldn't have any problems with scrolling or stretched images.
CSS:
embed {
width:1080px;
height: 720px;
}
Related
Hello i am setting up a selfie "photobooth". Everything works like fine but i found a bug and dont't find a solution.
I'll explain the function: I have a webcam that shows live-video. If i push the "s"-key it takes a picture and freezes it to the screen for 15 seconds. Wile it is showing the frozen image i can push "s"-key again for stopping the freez and start again with the live-video. Otherwise it jumps back to live-video after 15 seconds. Till here everything works perfect.
Now my problem: If i push the "s"-key more often while the freezed image is showing. It clears the frozen image and shows my background-image giving my a error-box with this message: "Webcam.js Error: Webcam is not loaded yet"
How can this be solved?
Thanks for any help!
Here is my code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emotionen Fotobooth</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="bg.jpg" id="bg" alt="">
<div id="foto">
<div id="my_camera"></div>
<!-- <input type=button class=anybutton value="Take Snapshot" onClick="take_snapshot()"> -->
<!-- Webcam.min.js -->
<script type="text/javascript" src="webcamjs/webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
let seconds = 15 // time to show image
// Configure a few settings and attach camera
let propwidth = 1600 // width of webcam window
Webcam.set({
width: propwidth,
height: (propwidth/16)*9,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
// preload shutter audio clip
//var shutter = new Audio();
//shutter.autoplay = true;
//shutter.src = 'shutter.mp3';
//document.addEventListener('DOMContentLoaded', (event) => {
document.addEventListener('keydown', function(event) {
if (event.code == 'KeyS' ) {
take_snapshot()
}
});
function take_snapshot() {
// play sound effect
// shutter.play();
// take snapshot and get image data
Webcam.snap( function(data_uri) {
document.getElementById('my_camera').innerHTML = '<img src="'+data_uri+'"/>';
show_snapshot();
});
}
function show_snapshot(){
// display results in page
document.addEventListener('keydown', function(event) {
if (event.code == 'KeyS' ) {
window.location.href = window.location.href;
}
});
var showTimer = setInterval(function(){
clearInterval(showTimer);
window.location.href = window.location.href;
}, seconds*1000);
}
//})
Webcam.attach( '#my_camera' );
</script>
</div>
</body>
</html>
So I have the following problem: I want my JavaScript to reload an image from my desktop so quickly that the picture in the browser changes as soon as I change/edit the picture on my desktop. It works as intended for maybe the first two times, but then I have to wait a couple of seconds before the picture on my browser changes to the new picture I have on my desktop.
As it's using the same URL, I have a cache breaker so that the browser always loads the new image and I specified at the top as a header that the cache shouldn't store the image, so the browser always checks the image on my desktop. What am I doing wrong? Why isn't it working as intended?
<html>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<head>
<title>JavaScript Refresh Example</title>
</head>
<body>
<canvas id="canvas" width="2000" height="2000"/>
<script type="text/JavaScript">
var img = new Image();
var time = new Date();
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
}
function refreshImage() {
var timestamp = new Date().getTime();
var queryString = "?t=" + timestamp;
return "Bild1.jpg" + queryString;
}
function Animate() {
window.requestAnimationFrame(Animate);
draw();
img.src = refreshImage();
}
img.onload = function () {
Animate();
}
img.src = refreshImage();
</script>
</body>
</html>
Haxe/OpenFL code:
import openfl.net.URLRequest;
import openfl.Lib;
Lib.getURL (new URLRequest (url), "_self");
// Opens the linked document in the same window or tab as it was clicked
Lib.getURL (new URLRequest (url), "_blank");
// Opens the linked document in a new window or tab. (this is default)
However, the second option generate popup that is blocked by Chrome.
How to open a link in another tab without being blocked?
With Javascript this work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>OpenNewTab</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<center>
<canvas id="myCanvas" width="200" height="200" style="border-style: solid; border-width: 1px"> </canvas>
</center>
<script>
var canvas;
var linkURL = "http://www.google.com";
createLink();
function createLink() {
canvas = document.getElementById("myCanvas");
canvas.addEventListener("click", Link_click, false);
}
function Link_click(e) {
window.open(linkURL,'_blank');
}
</script>
</body>
</html>
P.s: I use Stencyl and HTML/JavaScript.
I believe if the popup is opened from a user triggered event (like pointer down, click) no popupblocker should prevent opening it.
note: Personally I find it annoying that a developer decides how a window should be opened, why not let the user decide that theirselves?
While I do not find better solution I will use this:
import openfl.net.URLRequest;
import openfl.Lib;
class Web
{
public static function open(s:String, code:Int)
{
var type:String = "_self";
var s:String = s;
var code:Int = code;
if(code==1){
type = "_self";
}else if(code==2){
type = "_blank";
}
#if js
untyped __js__('
var canvas;
var linkURL = s;
var lock = 0;
if(lock==0){
lock =1;
createLink();
}
function createLink() {
canvas = document.getElementById("openfl-content");
canvas.addEventListener("click", Link_click, false);
}
function Link_click(e) {
window.open(linkURL,type);
}
');
#else
Lib.getURL (new URLRequest (s), type);
#end
}
}
This all happen on page load without click event call:-
Here is updated code, In this I am trying to check internet connection is on or not. If connection is off then 'link' on the will be automatically disable(non clickable) and it bgcolor changes to red.
And if connection is off 'link' will be automatically get enable(clickable) and it bgcolor changes to green. However I am missing some thing:
code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<style>
.connected{ background-color:green;}
.diconnected{background-color:red;}
#link1{
width: 100px;
height: 200px;
border: #0FF 1px solid;
}
</style>
<body>
<img src="images/network.png"> My status
</body>
<script>
window.onload=function() {
var tId = setInterval(function() {
document.getElementById("link1").disabled=!navigator.onLine;
},500);
if (navigator.onLine) {
$("link1").bind('click', true).addClass('connected').removeclass('diconnected');
} else {
$('.link1').unbind('click', false);
$(".link1").bind('click', true).addClass('diconnected').removeclass('diconnected');
}
}
</script>
</html>
Thanks for help.
you can write following just before closing body tag =>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
You can check reachability in following way
function hostReachable() {
// Handle IE and more capable browsers
var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
// Open new request as a HEAD to the root hostname with a random param to bust the cache
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
// Issue request and handle response
try {
xhr.send();
return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
} catch (error) {
return false;
}
}
First of all, if the user doesn't have an internet connection, how can you load in the jQuery library from an outside source? No internet = no web page.
Im going to guess that this is located on an intranet/network of some sort which is accessible without an internet connection, and if so, you will need to download the jQuery libraries yourself and upload them to the local server where they can be accessed by the network.
Second of all, you've referenced your ID's and Class's wrong.
$("link1") // Wrong
$("#link1") // Right
These will need to be amended so that jQuery knows its pointing at the right thing.
So I'm trying to do some very basic div re-sizing based on the properties of the image contained within it. I know I can do something really basic like set the background an padding around the image and achieve the same effect, but this is sort of a personal challenge.
The problem I am having is that when I try to fetch the naturalHeight or naturalWidth values of the image, I get a value of 0. However, when I try to fetch these values using the console, they return the correct values. Also, my resizeDiv() function is coming up as undefined in console.
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>kitten_resize - WesGilleland.com</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var kittens = new Array("100x100_kitten.jpeg","150x150_kitten.jpeg","200x150_kitten.jpeg");
$('#kittens').attr('src', kittens[0]); //set the image
function resizeDiv() {
var img = document.getElementById('kittens');
var imgH = img.naturalHeight;
var imgW = img.naturalWidth;
$('div').width(imgW);
$('div').height(imgH);
console.log('Current imgH: '+imgH);
console.log('Current imgW: '+imgW);
};
resizeDiv();
});
</script>
<style>
div {
background-color: black;
padding: 10px;
margin: auto;
}
</style>
</head>
<body>
<div>
<img id="kittens" src='' />
</div>
</body>
</html>
You can also find a working copy here: http://www.wesgilleland.com/projects/kitten_resize/
I feel like it's something very basic that I'm missing; I haven't fiddled with this stuff since my associate's degree a year ago. Thanks to anyone who can help!
That's because your image isn't yet loaded when you read the original dimensions.
You should read the dimensions when the image is loaded :
var img = $('#kittens')[0];
img.onload = resizeDiv;
img.src = kittens[0];