I just started trying the A-frame with AR.js to hopefully get an object to render on a piece of paper. I have tested the object and it is correctly rendered. However, when I try it with a custom image, it no longer works... I am trying to show a gltf file on a pattern. THe pattern is (in image form): and was made using https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
Does anyone see anything wrong with my code as to why that pattern is not being taken by the camera as a match? Is it my code? or is it something to do with the pattern file I am trying to load?
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<a-assets>
<a-asset-item id="mesh" src="./data/Camargue.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#mesh" rotation="0 180 0" modify-materials></a-entity>
<a-light type="directional" color="#fff" position="-1 -5 -5" look-at="a-entity"></a-light>
<a-light type="ambient" color="#fff" intensity="3" look-at="a-entity"></a-light>
<a-marker-camera type="pattern" patternUrl="data/pattern-logo.patt"></a-marker-camera>
</a-scene>
<script>
AFRAME.registerComponent('modify-materials', {
init: function () {
// Wait for model to load.
this.el.addEventListener('model-loaded', () => {
// Grab the mesh / scene.
const obj = this.el.getObject3D('mesh');
// Go over the submeshes and modify materials we want.
obj.traverse(node => {
if (node.name.indexOf('Loggia-frame') !== -1) {
var environment = new THREE.CubeTextureLoader().setPath('data/HDR/').load(
[
'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'
]
);
environment.format = THREE.RGBFormat;
environment.mapping = THREE.CubeReflectionMapping;
var material = node.material;
material.envMap = environment;
}
});
});
}
});
</script>
</body>
I'm using 2 custom patterns and trying to make AR.js recognize them. both of the markers are 6x6 barcodes that I've made into pattern using AR.js Marker Training, and put the downloaded pattens into the folder (as 500.patt and 600.patt). The result is both markers identified when I show it a single marker as showed in picture.
In addition, I would like to get a reaction when a marker is recognized (that's why the console prints are there), but although both markers' shapes are drawn, there are no prints in the console.
My code:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ar.js</title>
</head>
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="patternRatio: 0.90">
<!-- create your content here. just a box for now -->
<!-- define a camera which will move according to the marker position -->
<a-marker-camera type='pattern' url='500.patt'>
<a-box position='0 0.5 0' material='opacity: 0.5; color: red;'></a-box>
console.log(500);
</a-marker-camera>
<a-marker-camera type='pattern' url='600.patt'>
<a-sphere position='0 0.5 0' material='opacity: 0.5; color: blue;'></a-sphere>
console.log(600);
</a-marker-camera>
</a-scene>
</body>
</html>`
Outcome:
How do I make the pattern recognition show only one item and print the correct pattern recognized?
Thanks
How to log something to the console when a marker is recognized:
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
marker.addEventListener('markerFound', function() {
var markerId = marker.id;
console.log('! markerFound', markerId);
// do additional things you want to do
});
marker.addEventListener('markerLost', function() {
var markerId = marker.id;
console.log('! markerLost', markerId);
// do additional things you want to do
});
}
});
Then add the registerevents component to your marker:
<a-marker id="marker" preset='hiro' registerevents>
That should do it.
Say I have the file test.x3d (included below), exported from Blender. Then, I can load it in an HTML page by using either x3dom or X_ITE X3D Browser JS libraries. Examples for each, load_test_x3dom.html and load_test_x_ite.html, are also included below. The rendering I get is like this:
I find this too dark, so I would like to increase the ambient light (or add ambient light, or any kind of light to the scene) to the scene - however, I would NOT like to modify test.x3d in any way.
Since I'm loading the model externally, all I have is <inline url="test.x3d"> or <X3DCanvas src="test.x3d">, so it's not quite clear to me where could I add statements to additionally control the light of the scene.
So my question is: is it possible to control the lighting for a loaded .x3d model in x3dom/x_ite without changing the .x3d model itself; and if so - how?
load_test_x3dom.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">
<title>X3DOM load test</title>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/1.5/x3dom.css'>
<style>
html, body { height: 100%; }
x3d { width: 90%; height: 90%; margin-right:10px; margin-bottom:10px; }
</style>
</head>
<body>
<div class="content" style="width: 100%; height: 100%;">
<p>X3DOM load test</p>
<x3d>
<scene>
<inline url="test.x3d"> </inline>
</scene>
</x3d>
</div>
<script type="text/javascript" src="https://www.x3dom.org/download/1.5/x3dom.js"></script>
</body>
</html>
load_test_x_ite.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">
<title>X_ITE load test</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/create3000/x_ite/master/dist/x_ite.css"/>
<script type="text/javascript" src="https://rawgit.com/create3000/x_ite/master/dist/x_ite.min.js"></script>
<style>
html, body { height: 100%; }
X3DCanvas { width: 90%; height: 90%; margin-right:10px; margin-bottom:10px; }
</style>
</head>
<body>
<div class="content">
<p>X_ITE load test</p>
</div>
<!-- X3DCanvas must not be enclosed in a div to load properly! -->
<X3DCanvas src="test.x3d">
<p>Your browser may not support all features required by X_ITE!</p>
</X3DCanvas>
</body>
</html>
test.x3d
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" "http://www.web3d.org/specifications/x3d-3.0.dtd">
<X3D version="3.0" profile="Immersive" xmlns:xsd="http://www.w3.org/2001/XMLSchema-instance" xsd:noNamespaceSchemaLocation="http://www.web3d.org/specifications/x3d-3.0.xsd">
<head>
<meta name="filename" content="test.x3d" />
<meta name="generator" content="Blender 2.79 (sub 0)" />
</head>
<Scene>
<NavigationInfo headlight="false"
visibilityLimit="0.0"
type='"EXAMINE", "ANY"'
avatarSize="0.25, 1.75, 0.75"
/>
<Background DEF="WO_World"
groundColor="0.051 0.051 0.051"
skyColor="0.051 0.051 0.051"
/>
<Transform DEF="Icosphere_TRANSFORM"
translation="0.000000 0.000000 0.000000"
scale="1.000000 1.000000 1.000000"
rotation="0.000000 0.707107 0.707107 3.141593"
>
<Transform DEF="Icosphere_ifs_TRANSFORM"
translation="0.000000 0.000000 0.000000"
scale="1.000000 1.000000 1.000000"
rotation="1.000000 0.000000 0.000000 0.000000"
>
<Group DEF="group_ME_Icosphere">
<Shape>
<Appearance>
<Material DEF="MA_Material_001"
diffuseColor="0.085 0.036 0.800"
specularColor="0.401 0.115 0.104"
emissiveColor="0.000 0.000 0.000"
ambientIntensity="0.333"
shininess="0.098"
transparency="0.0"
/>
</Appearance>
<IndexedFaceSet solid="true"
coordIndex="2 3 0 -1 0 3 7 -1 0 7 4 -1 7 6 1 -1 8 7 1 -1 6 8 1 -1 4 7 8 -1 3 6 7 -1 5 8 6 -1 5 4 8 -1 3 5 6 -1 2 5 3 -1 4 2 0 -1 2 4 5 -1 "
>
<Coordinate DEF="coords_ME_Icosphere"
point="0.209504 0.802371 -0.717194 -0.178166 0.129444 1.060728 0.178166 -0.129444 -1.060728 -1.005028 0.000000 -0.502516 1.035628 -0.125637 -0.271637 0.200539 -1.023765 -0.271638 -0.505344 -0.760048 0.740536 -0.134035 1.087594 0.305579 0.850254 0.000000 0.671351 "
/>
</IndexedFaceSet>
</Shape>
</Group>
</Transform>
</Transform>
<Transform DEF="Lamp_TRANSFORM"
translation="-4.076245 5.903862 1.005454"
scale="1.000000 1.000000 1.000000"
rotation="-0.498084 -0.762016 -0.413815 1.513875"
>
<PointLight DEF="LA_Lamp"
ambientIntensity="0.0000"
color="1.0000 1.0000 1.0000"
intensity="0.5714"
radius="30.0000"
location="-0.0000 -0.0000 0.0000"
/>
</Transform>
<Transform DEF="Camera_TRANSFORM"
translation="-7.481132 5.343665 -6.507640"
scale="1.000000 1.000000 1.000000"
rotation="-0.098233 -0.968789 -0.227591 2.349487"
>
<Viewpoint DEF="CA_Camera"
centerOfRotation="0 0 0"
position="-0.00 -0.00 0.00"
orientation="-0.00 -0.47 -0.88 0.00"
fieldOfView="0.858"
/>
</Transform>
</Scene>
</X3D>
Right - I managed to do this with X_ITE, which was a pain, since it doesn't seem to be documented anywhere, so for the most part I had to tediously inspect variables in Browser Console...
Anyways; first, in X_ITE, it is possible to do Accessing the External Browser in JavaScript; then, X_ITE X3D Browser » XHTML DOM Integration is achieved with an additional JS library, x_ite_dom.
Also, it turns out that when I try adding lights to a Scene in HTML, and I also try to Inline the .x3d file, something goes wrong and nothing is rendered. So, I have to load via <X3DCanvas src="test.x3d"> as in the OP, and then iterate through its root nodes. It seems that Blender exports some five root nodes: "NavigationInfo { }", "Background { }", and 3x "Transform { }"; and to light everything up, one can use .headlight of the NavigationInfo root node; and also the background color can be manipulated via .groundColor and .skyColor of Background root node.
The only problem left is, that after load, the Examine mode does not quite work (i.e. the view doesn't rotate around the object); one has to double-click the object first, and then the browsing with rotation around works. Unfortunately, I cannot find how to "double-click" the object automatically on page load. Which is why I've left most of my misses as comments inside the code.
Here is the changed load_test_x_ite.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">
<title>X_ITE load test</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/create3000/x_ite/master/dist/x_ite.css"/>
<!-- <script type="text/javascript" src="https://rawgit.com/create3000/x_ite/master/dist/x_ite.min.js"></script> -->
<script type="text/javascript" src="https://rawgit.com/create3000/x_ite/master/dist/x_ite.js"></script>
<!-- see: http://create3000.de/x_ite/xhtml-dom-integration/: -->
<script type="text/javascript" src="https://rawgit.com/andreasplesch/x_ite_dom/master/latest/x_ite_dom.js"></script>
<style>
html, body { height: 100%; }
X3DCanvas { width: 90%; height: 90%; margin-right:10px; margin-bottom:10px; }
</style>
</head>
<body>
<div class="content">
<p>X_ITE load test</p>
</div>
<!-- X3DCanvas must not be enclosed in a div to load properly! -->
<X3DCanvas id="browser" src="test.x3d">
<p>Your browser may not support all features required by X_ITE!</p>
</X3DCanvas>
<!-- <X3DCanvas>
<Scene>
<!-- <Background DEF="WO_World" <!-- NOTE: this prevents the inline model from showing! -- >
groundColor="0.8 0.8 0.8"
skyColor="0.1 0.1 0.8"
/> -- >
<!--Viewpoint></Viewpoint-- >
<!--NavigationInfo type='"FLY", "ANY"'></NavigationInfo-- >
<!-- <NavigationInfo headlight='true' /> <!-- NOTE: this prevents the inline model from showing! -- >
<!-- <PointLight color='0.99, 0.99, 0.99' /> <!-- NOTE: this prevents the inline model from showing! -- >
<Inline DEF='myStuff' url='"test.x3d"' />
<Transform translation='0 0 0'>
<Inline USE='myStuff' />
</Transform>
<Transform translation='0 0 30'>
<PointLight color='0.99, 0.1, 0.1' /> <!-- NOTE: this allows showing of the inline model, but no light effect is visible ! -- >
</Transform>
</Scene>
<p class="fallback">
Your browser may not support all features required by Cobweb! You can use Firefox, <br/>
because this is currently the choice of the choice. We will continuously keep you informed <br/>
on technical developments and as soon as Cobweb is running in other browser too.
</p>
</X3DCanvas> -->
<script>
window.addEventListener("load", function(){
console.log("Window load"); // fires way before .x3d is fully loaded; first
//~ alert("Window load");
});
function printnodes(node) {
console.log(node);
if (typeof node.childNodes !== "undefined"){
var childNodes = node.childNodes;
for (var i = 0; i < childNodes.length; i++) {
printnodes(childNodes[i]);
}
}
}
function x_ite_callback (){ // (el) { el here is undefined
console.log("x_ite_callback"); // this one fires after the .x3d is loaded in FF57, but ONLY if it is as attribute src; if it is inline, it fires way before model is loaded!
var tbrowser = X3D.getBrowser("X3DCanvas#browser");
console.log("Browser", tbrowser); // <unavailable> in Ctrl-Shift-J Browser Console of FF57, but visible in F12 Console of FF57 (visible in both in FF43)
//~ var protoScene = document.querySelector('[DEF="myStuff"] Scene');
//~ var protoScene = document.querySelector('Scene'); // undefined
printnodes(tbrowser.element[0]); // this is not the X3D nodes
// tbrowser.currentScene.namedNodes has all 3D nodes; transforms, shapes, groups etc - but not Viewpoint or NavigationInfo
// tbrowser.currentScene.rootNodes.length can be 5 for a Blender .x3d
// tbrowser.currentScene.rootNodes[0].getId() -> could be 425, 430, 434, 22046, 22053; probably internal
// tbrowser.currentScene.rootNodes[0].headlight = true; but rootNodes[1,2,3,4] might not have .headlight
// there exists .toSource() which causes InternalError: allocation size overflow in FF57 (also "script slows down page); .toString() produces e.g. "NavigationInfo { }", "Background { }", "Transform { }" and it seems to work
// so depending on type of x3d note (seen via .toString()), there are different properties available
var numRootNodes = tbrowser.currentScene.rootNodes.length;
for (var i = 0; i < numRootNodes; i++) {
var trnode = tbrowser.currentScene.rootNodes[i];
if (trnode.toString() === "Background { }") {
//trnode.set_bind = false; // no effect here? but yes in console...
console.log("is Background", trnode.groundColor, trnode.skyColor, trnode.isBound);
trnode.groundColor = [{ r_: 0.051, g_: 0.451, b_: 0.051 }];
trnode.skyColor = [{ r_: 0.051, g_: 0.051, b_: 0.451 }];
}
if (typeof trnode.headlight !== "undefined"){
console.log("rootnode", i, "HAS headlight", trnode.isBound, trnode.toString());
tbrowser.currentScene.rootNodes[i].headlight = true;
} else {
console.log("rootnode", i, "no headlight", trnode.isBound, trnode.toString());
}
} // end for
// tbrowser.currentScene.namedNodes // Object { WO_World: Proxy, Icosphere_TRANSFORM: Proxy, ...
// tbrowser.currentScene.rootNodes[0].type[0] == "EXAMINE", [1] == "ANY"
// http://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#NavigationInfo:
// ""EXAMINE" shall provide the ability to orbit or spin the user's eyepoint about the center of rotation in response to user actions. The center of rotation for moving the viewpoint around the object and determining the viewpoint orientation is specified in the currently bound X3DViewpointNode node"
// ./src/x_ite/Browser/Navigation/X3DViewer.js: this .getActiveViewpoint () .lookAtPoint (hit .intersection .point, 2 - 1.618034, straightenHorizon);
// ./src/x_ite/Browser/X3DBrowser.js: changeViewpoint: function (name)
// ./src/x_ite/Browser/X3DBrowser.js: this .currentScene .changeViewpoint (name);
// ./src/x_ite/Browser/X3DBrowser.js: this .bindViewpoint (viewpoints [0
// ]);
// ./src/x_ite/Browser/X3DBrowser.js: bindViewpoint: function (viewpoint)
console.log("tbrowser.viewerNode:", tbrowser.viewerNode); // is null upon run - but OK later when called from console?!
//~ console.log("Active Viewpoint:", tbrowser.viewerNode.getActiveViewpoint());
// this is a function, too: tbrowser.getActiveLayer().defaultViewpoint.lookAtPoint - hard to use it to set;
// ./src/x_ite/Browser/Navigation/ExamineViewer.js: dblclick: function (event) ; this .lookAt (x, y);
// stack trace upon double click // dblclick:
// lookAt (X3DViewpointNode) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:57547:1
// .. ends with:
// this .centerOfRotationOffset_ = Vector3 .subtract (point, this .getCenterOfRotation ());
// this .set_bind_ = true;
// lookAtPoint (X3DViewpointNode) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:57527:1
// this .lookAt (point, minDistance, factor, straighten);
// lookAt (X3DViewer) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:58004:5 :
// this .getActiveViewpoint () .lookAtPoint (hit .intersection .point, 2 - 1.618034, straightenHorizon);
// dblclick (ExamineViewer) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:58486:4 :
// this .lookAt (x, y);
// dispatch https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:7362:16
// add/elemData.handle https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:7171:6
vncheck = function() {
if (tbrowser.viewerNode) {
console.log("have tbrowser.viewerNode:", tbrowser.viewerNode);
// SO:6157929
var event = document.createEvent('MouseEvents'),
//options = options || {},
opts = { // These are the default values, set up for un-modified left clicks
type: 'click',
canBubble: true,
cancelable: true,
view: Document.defaultView,
detail: 1,
screenX: 0, //The coordinates within the entire page
screenY: 0,
clientX: 596, //The coordinates within the viewport
clientY: 56,
//~ pageX: 596,
//~ pageY: 56,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
button: 0, //0 = left, 1 = middle, 2 = right
relatedTarget: null,
};
//Pass in the options
event.initMouseEvent(
opts.type,
opts.canBubble,
opts.cancelable,
opts.view,
opts.detail,
opts.screenX,
opts.screenY,
opts.clientX,
opts.clientY,
opts.ctrlKey,
opts.altKey,
opts.shiftKey,
opts.metaKey,
opts.button,
opts.relatedTarget
);
tbrowser.viewerNode.dblclick(event);
} else {
console.log("no tbrowser.viewerNode:", tbrowser.viewerNode);
setTimeout(vncheck, 10);
}
}
setTimeout(vncheck, 10);
//const start = performance.now();
//while(performance.now() - start < 1000); // busy wait; does nothing; viewerNode still null after it
//console.log("tbrowser.viewerNode:", tbrowser.viewerNode);
} // end function x_ite_callback
function x_ite_errorCallback (error) {
console.log("x_ite_errorCallback", error);
}
X3D (x_ite_callback, x_ite_errorCallback);
// X3D(function(el) {
// console.log("el", el); // also undefined here, FF57
// });
var Browser;
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
console.log("Window complete"); // fires way before .x3d is fully loaded; second
//~ alert("Window complete");
// Obtain X3DBrowser object of X3DCanvas element with id »browser«.
var tbrowser = X3D.getBrowser("X3DCanvas#browser"); // no var here, so we set the global? This is randomly either undefined or defined in FF 43; but in FF 57 is always undefined
//Browser = tbrowser;
console.log("Browser", tbrowser); //, tbrowser);
}
}, 100);
//~ var intervalB = setInterval(function() { // this one never clears..
//~ if (typeof Browser !== "undefined") { //if (Browser.hasOwnProperty("loading")) {
//~ if (Browser.loading === false) {
//~ clearInterval(intervalB);
//~ console.log("Browser loaded");
//~ alert("Browser loaded");
//~ }
//~ }
//~ }, 100);
</script>
</body>
</html>
We're trying to offer the ability to switch between different video bitrates using the resolution switcher plugin (https://github.com/kmoskwiak/videojs-resolution-switcher) for a video.js player.
Here is a demo page with basic setup to run videojs player in flash mode: jsbin (click on 'edit in jsbin on your top right to see the actual code)
The plugin works correct in HTML5 (DASH and HLS) streaming but fails in Flash mode. The player will start playing with default bitrate value ('1080p' in this case) without any issues. The problem occurs when you actually switch the bitrate. If you select to change to a different bit-rate the player will stop playing. No browser console errors, player will not crash, just freezing. Seems like the player even doesn't sent the actual http request to get the new video source. Sometimes plugin even can actually switch the source, but it's happened just few times and randomly. In other words the behavior is way unstable and not acceptable.
Plugin provides resolutionchange event which should be fired when resolution is changed, but it's not. Only UI changes are visible.
I'm really appreciate on any help or ideas on how this behavior can be fixed!
Also including it here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">
<style>
.video-js { background-color: black; }
video { width: 100%; height: 100% }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.16.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.1.0/videojs-contrib-hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.0/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.7.1/videojs-dash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" width="450" height="250"></video>
<script>
videojs('player', {
preload: 'auto',
autoplay: true,
techOrder: ["flash"],
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 1080,
dynamicLabel: true
}
}
}, function(){
handleReady(this);
});
var sources=[
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/1080p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"HQ",type:"rtmp/mp4",res:1080},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/720p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Medium",type:"rtmp/mp4",res:720},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/480p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Low",type:"rtmp/mp4",res:480}
];
function handleReady(player) {
window.player = player;
player.updateSrc(sources);
}
</script>
</body>
</html>
var player = videojs('video', {
controls: true,
muted: true,
width: 800,
plugins: {
videoJsResolutionSwitcher: {
ui: true,
default: '< default_res >', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: false
}
}
},
function() {
player.updateSrc([ < sourcetags > ]);
player.on('resolutionchange', function(){
player.play();
console.info('Source changed to %s', player.src());
})
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;
}