I am using a basic html/javascript script where I load a webcam component.
<html>
<head>
<!-- Load the latest version of TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/mobilenet"></script>
</head>
<body>
<div id="console"></div>
<!-- Add an image that we will use to test -->
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
<!-- Load index.js after the content of the page -->
<script src="index.js"></script>
</body>
</html>
const webcamElement = document.getElementById('webcam');
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
const webcam = await tf.data.webcam(webcamElement);
while (true) {
const img = await webcam.capture();
const result = await net.classify(img);
document.getElementById('console').innerText = `
prediction: ${result[0].className}\n
probability: ${result[0].probability}
`;
img.dispose();
await tf.nextFrame();
}
}
This seems to be the correct way to load a webcam as per other answers. However, nothing opens for me. No console logs as well. I am trying this on Firefox.
First of all, simply include the script webcam-easy.min.js in the section of the html file.
and try instead of that js, you will get the web cam output
Related
I would like to automate the change of the profile picture according to the current theme on the github page, day or night. Is there a way to make this change?
I tried an html script but no way to get a result on github.
<!DOCTYPE html>
<html>
<head>
<title>switch_them</title>
</head>
<body>
<img id="day" src="img/0XCAF3_day.png" alt="day theme">
<img id="night" src="img/0XCAF3_night.png" alt="night theme">
<script>
function switchTheme() {
const dayThemePicture = '0XCAF3_day.png';
const nightThemePicture = '0XCAF3_night.png';
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
document.getElementById('night').src = nightThemePicture;
} else {
document.getElementById('day').src = dayThemePicture;
}
}
switchTheme();
window.addEventListener('load', switchTheme);
window.addEventListener('resize', switchTheme);
</script>
</body>
</html>
I want to have JavaScript to get a user's URL and return the source code of the website. I want to have this to essentially make an iframe, but with the actual code.
E.g. :
let userUrl = prompt("What website do you want displayed?","e.g. https://www.google.com");
function getSource(url){
//some code
return pageSource;
}
document.body.innerHtml=getSource(userUrl);
I tried to scrape a view page source website and turn it into an API that I could inject into JavaScript, but I had no luck.
<html>
<head><meta charset="us-ascii">
<title></title>
<script>
let userUrl = prompt("What website do you want displayed?","e.g.
https://www.google.com");
if (userUrl){
var srcFrame=""; //complete page code to inject into your iframe or return
var fetchMe = "https://example.com?q=" + userUrl;
fetch(fetchMe).then((response) => response.text()).then((text) => {
srcFrame = text;
//if injecting into iframe
myFrame.document.open();
myFrame.document.write(srcFrame);
myFrame.document.close();
// USE THE FOLLOWING TO ADD THE ORIGINAL URL AS THE baseURI SO RELATIVE
//LINKS & SCRIPTS WILL WORK AND ACCESS THE ORIGINAL SOURCE AND NOT YOUR
//SERVER
var addOrigBase= document.createElement('base');
addOrigBase.setAttribute('href',userUrl);
document.getElementById("myFrame").contentDocument.head.appendChild(addOrigBase);
});
};
</script>
</head>
<body>
<iframe onload="myFrame.frameElement.height =
(myFrame.frameElement.contentDocument.body.clientHeight)+10" frameborder=""
height="25px" id="myFrame" name="myFrame" scrolling="no" src="about:blank"
width="100%"></iframe>
</body>
</html>
I'm receiving an error that says "puppeteer is not defined" when it is clearly in the only javaScript file.
How do i get the JavaScript/single page html project to recognize the puppeteer module? I have already looked into this potential answer;[Nodejs. Proper way to include modules, however it does not help.
(The goal is to launch the html page, enter a url from booking.com, click the button, and have the scraped hotel name, rating, etc returned in the console)
app.js
function main()
{
var Url = document.getElementById('inputUrl').value
const puppeteer = require('puppeteer');
let bookingUrl = Url;
(async () => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto(bookingUrl);
await page.waitForSelector('div.sr_property_block[data-hotelid]');
let hotelData = await page.evaluate(() => {
...
...
...
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="app.js" type="text/javascript"></script>
<meta name="description" content="">
<link rel="stylesheet" href="">
</head>
<body>
<input id = "inputUrl" type="text" placeholder = "type url here"/>
<button id = "button" button onclick="main();"> click</button>
</body>
</html>
Puppeteer is a library that requires a server (like node.js), you can't run it on the client side.
I'm working on the front end for a project to display a graph of data collected from sensors. I'm following Net Ninja's youtube series on connecting to firebase, as well as trying many other approaches found online, but nothing I try works. I cannot get data from my firebase test database to display, and also can't display example data from others. I was hoping for a bit of help in what I could have missed.
const dataList = document.querySelector('#data-list');
// create element & render data
function renderData(doc) {
let li = document.createElement('li');
let time = document.createElement('span');
let data = document.createElement('span');
li.setAttribute('data-id', doc.id);
time.textContent = doc.data().time;
data.textContent = doc.data().data;
li.appendChild(time);
li.appendChild(data);
dataList.appendChild(li);
}
// getting data
db.collection('sensorData').get().then(snapshot => {
snapshot.docs.forEach(doc => {
renderData(doc);
});
});
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-database.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>test</h1>
<div class="content">
<form id="add-data-form"></form>
<ul id="data-list"></ul>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = { **
FIREBASE DATA **
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
firebase.analytics();
</script>
<script src="app.js"></script>
</body>
</html>
When I launch the index, I only see the "test" heading, no data from the firebase. I have used powershell to initialise the database, that didn't make a difference though. Any help would be greatly appreciated, thank you
I have a service that I call after every 5 secs to return data from postgres table, now I want this data to be displayed on html document
app.js
const stats=app.service('test_view');
// console.log(stats);
function getstats(){
stats.find().then(response=>{
console.log('data is ',response.data)});};
setInterval(function() {
getstats();
}, 5000);
// console.log(stats);
stats.html
<!DOCTYPE html>
<html>
<head>
<title>Stats</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>
Everything is running fine and I am getting results in console, I am using feather.js now I want these results to be displayed in div tag of html.Please help me in this regard.
You need to call the feathers service from the browser. You can do this a number of different ways (as a REST call, with the feathers client, etc.).
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script src="//unpkg.com/#feathersjs/client#4.0.0-pre.3/dist/feathers.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script>
// #feathersjs/client is exposed as the `feathers` global.
const app = feathers();
app.configure(feathers.rest('http://localhost:3000').axios(axios));
app.service('test_view').find();
})
.then(data => {
// do something with data
});
</script>
</head>
<body></body>
</html>
A lot of this depends on what (if anything) you're using for your front-end implementation. This sets up a minimal feathersjs/client using axios for REST, with no authentication, and calls your service (on port 3000) and gets the payload.
To do this every 5 seconds is outside the scope of feathers and up to how you build your web app.
Here is a working example of how you could change the contents of that div when you get data back from your remote call.
// Simulate your remote call... ignore this part.
const stats = {}
stats.find = () => new Promise((resolve, reject) => resolve({
data: 'here is some data ' + new Date().toLocaleTimeString('en-US')
}));
// Div you want to change.
const resultsDiv = document.getElementById('stats');
// Get the data
function getstats () {
stats.find().then(response => {
console.log('data is ', response.data);
// Update the contents of the div with your data.
resultsDiv.innerHTML = response.data;
});
}
setInterval(function() {
getstats();
}, 1000);
<html>
<head>
<title>Stats</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>