I downloaded the examples from https://ml5js.org/getting-started/running-examples/ and run them on digital ocean server.
cd /path/to/ml5-examples
python -m http.server 8081
I am running the p5js/PoseNet/PoseNet_webcam/ example
But, it just displays the following, without loading any model.
PoseNet example using p5.js
Loading model...
What i want is to get video stream from webcam on remote server.
EDIT:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with ml5.js</title>
<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5#0.3.1/dist/ml5.min.js"></script>
</head>
<body>
<script>
// Your code will go here
// open up your console - if everything loaded properly you should see 0.3.1
console.log('ml5 version:', ml5.version);
let capture;
function setup() {
createCanvas(390, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
//capture.hide();
}
function draw() {
background(255);
image(capture, 0, 0, 320, 240);
filter(INVERT);
}
</script>
</body>
</html>
The JS console gives the following error:
Error: getUserMedia is not implemented in this browser
at Object.navigator.mediaDevices.getUserMedia.navigator.mediaDevices.getUserMedia (p5.dom.min.js:3)
at m.d.createCapture (p5.dom.min.js:3)
at setup ((index):29)
at m.<anonymous> (p5.min.js:3)
at m.<anonymous> (p5.min.js:3)
at new m (p5.min.js:3)
at n (p5.min.js:3)
When i open the program as a local file on the same Chrome browser, there is no error. I only get the error when i run my program on a cloud server.
Related
I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.
However, it is always a hit or a miss:
Out of 10 reloads, one loads the player.
But anytime I make a
change to the <stream> tag, and angular re-compiles, the player is
loaded. After this if I refresh the browser, it is a blank screen
again.
The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:
In the index.html file:
<!doctype html>
<html lang="en">
<head>
...............
</head>
<body>
<app-root></app-root>
</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>
</html>
In the videoFile.component.ts:
<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>
Found a solution here: https://github.com/angular/angular/issues/13965
So everytime the component loads, the script is removed and reattached using ngOninit, like so:
document.getElementById("video_embed").remove();
let testScript = document.createElement("script");
testScript.setAttribute("id", "video_embed");
testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
document.body.appendChild(testScript);
If anyone has any other solutions, please do let me know.
I am trying to embed an AWS Quicksight dashboard into our application but I am having some trouble with the embed process. The URL has been generated correctly and but I get a permission denied error when I attempt to embed it.
I am able to load the generated URL directly in a new tab but when I attempt to embed it I get a 401 error.
I have whitelisted the domain in the Quicksight console and am accessing the page over HTTPS. The complete test page is shown below.
The following code is what I am using to test embedding. It was taken from an Amazon example.
<!DOCTYPE html>
<html>
<head>
<title>My Dashboard</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk/dist/quicksight-embedding-js-sdk.min.js" ></script>
<script type="text/javascript">
function embedDashboard() {
var containerDiv = document.getElementById("dashboardContainer");
var params = {
url: "<link that works in a standalone browser tab>",
container: containerDiv,
parameters: {
},
height: "700px",
width: "1000px"
};
var dashboard = QuickSightEmbedding.embedDashboard(params);
dashboard.on('error', function(err) {console.log('dashboard error:', err)});
dashboard.on('load', function() {});
}
</script>
</head>
<body onload="embedDashboard()">
<div id="dashboardContainer"></div>
</body>
</html>
Amazon sends a 302, followed by a 401. Which results in a frame with the error message "We can't display this page (Not Authorized).
The first request in the image fetches a fresh link from the server and the subsequent two are the framing attempt.
I would expect that if something was wrong with my authorization then a loading the link in it's own tab would not work. I think the issue must be with the frame but don't know what other options to check beyond the whitelist.
Does anyone have any idea what else I can try?
I am using R Shiny to develop a web page and also include my own R code.
I am using p5.js(https://p5js.org/) to display a game in the web page.
As in the official web page says I have an HTML and the p5 javascript code together with the javascript library. If I run the HTML, that is, clicking right and pressing chrome to display I get the started example (https://p5js.org/get-started/) with no incidence.
Here it is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<script language="javascript" type="text/javascript" src="libraries/p5.js"> </script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>
When I do the same in Shiny, running the code from R-Studio I do not get anything from it. I have stored the javascript files in the www folder as it is supposed to be and I currently know that my HTML called the javascript since I set an alert in the p5 javascript file, but outside the setup and draw methods. The problem is that, even though the alert is loaded, seems like the setup and draw methods are not called and, obviously, as a consequence, they do not load the canvas. I know that they are not called because I have a called to an alert in the setup method that works running the HTML file directly but not if I run the same file from R-Studio.
Here it is the p5 javascript code:
alert("GOOD1");
function setup() {
alert("GOOD2");
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {fill(0);}
else {fill(255);}
ellipse(mouseX, mouseY, 80, 80);
}
I load the HTML page in Shiny using the next line of code
... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...
Attach to the tag "processingMasterThesis" I have the corresponding URL to the HTML file in the server.R, as it is supposed to be so the problem is not here.
Why may be the cause of this? It works if I call the HTML file directly to be load in the browser but not if I do it from R-Studio, why?
I have solved the problem. The p5 java script code will be:
// =====================
// "app/sketch.js"
// =====================
var myCanvas;
function setup() {
var idCanvas = 'divCanvas';
myCanvas = createCanvas(300, 300);
myCanvas.parent(idCanvas);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
The library you need to run the example can be found at https://p5js.org/
In this javascript file I have created an id that reference a html div element so that is the place where I will set my canvas. Once this is done, the rest of the javascript code will code perfectly. The point is to reference that the parent of the canvas is that div as you can see in the code.
After this you just have to create either in shiny or pure html code something like this:
# THE UI (File ui.R)
library(shiny)
library(shinydashboard)
library(rmarkdown)
shinyUI(
fluidRow(
# THE UI
tags$html(
tags$body(
singleton(tags$head(tags$script(src = "master_thesis/app/libraries/p5.js")))
,singleton(tags$head(tags$script(src = "master_thesis/app/sketch.js")))
,singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto'))
))
)
)
The code that I show below is in shiny. The first "head" line include the library p5.js and the second "head" line just say "hey this is my p5 script file" and "divCanvas will be the div that I will print on".
You may have issues with the references to the javascript file. I think is worthy to note that you must create a www folder in your root shiny application. In this folder, you must put your javascript files. For example, as you can see in my code the two javascript files that I am using follow the next path:
ShinyApplication/www/app/libraries/p5.js
ShinyApplication/www/app/sketch.js
Hope this can help!
I can't seem to get any sample app working. I'm trying to run a simple websocket 101 starter app that does nothing more than log something to console.
I have cfws directory in my webroot C:\inetpub\wwwroot, and I'm working in C:\inetpub\wwwroot\site\.
I have enabled web sockets in the cfadmin, with "use proxy" option, port 8579.
The code I'm running is:
index.cfm:
<html>
<head>
<title>Example One</title>
<script language="javascript">
function messageHandler(msg) {
console.log("messageHandler Run");
console.dir(msg);
}
</script>
</head>
<body>
<h1>Example One</h1>
</body>
</html>
<cfwebsocket name="myWS" onMessage="messageHandler" subscribeTo="news">
Application.cfc
component {
this.name="cfwack2_1";
this.wschannels = [{name:"news"}];
}
I run the code and there are no errors, but I don't see the expected log in the console.
So far every sample app I've tried does five eighths of nothing. Any help appreciated.
You may have a typo in your Application.cfc. According to the docs here, it should look like this:
component {
this.name="cfwack2_1";
this.wschannels=[{name="news"}];
}
An = (equal sign) instead of a : (colon) after name.
The documentation also shows that the JavaScript function should accept an event and a token value. Here is the example from the documentation.
<script type="text/javascript">
function mymessagehandler(aevent, atoken)
{
var message = ColdFusion.JSON.encode(atoken);
var txt=document.getElementById("myDiv");
txt.innerHTML +=message +"";
}
</script>
<cfwebsocket name="mycfwebsocketobject" onmessage="mymessagehandler" subscribeto="news">
<cfdiv id="myDiv"></cfdiv>
I have the following problem.
I created an ember application with ember-cli.
The application works fine on nodejs through the url http://localhost:4200/ when running the command ember serve
I want to deploy this application on an apache httpd server.
In order that this will work i think that it should work also standalone when opening in firefox.
When i open it in firefox i get an error:
require is not defined
The generated index.html is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Foo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<base href="/" />
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/foo.css">
</head>
<body>
<script>
window.FooENV = {"environment":"development","baseURL":"/","locationType":"auto","EmberENV":{"FEATURES":{}},"APP":{"LOG_RESOLVER":true,"LOG_ACTIVE_GENERATION":true,"LOG_MODULE_RESOLVER":true,"LOG_VIEW_LOOKUPS":true},"LOG_MODULE_RESOLVER":true};
window.EmberENV = window.FooENV.EmberENV;
</script>
<script src="assets/vendor.js"></script>
<script src="assets/foo.js"></script>
<script>
window.Foo = require('foo/app')['default'].create(FooENV.APP);
</script>
</body>
</html>
How can i solve this issue?
Thanks,
David
file:///J:/assets/ndd.css
This looks to me like you just double clicked your index.html file in your dist folder. This does not work!
You have to serve your directory by an http-server.
Install a simple http server with npm:
npm install -g http-server
Move to your dist folder and run http-server. You will see a message like this:
Starting up http-server, serving ./ on port: 8080
Now you can check your ember app in Firefox on: http://localhost:8080
Here's what you have to do in order to correctly deploy an Ember CLI app in apache.
Let's assume you are going to use XAMPP. You are probably going to create a folder inside htdocs and name it myapp. When running the ember new appname command from within myapp, the CLI when generate the whole project and put it inside appname folder.
Now, when you will build the project when ember build, the whole compiled version of the app will be located in: myapp\appname\dist.
Because Ember CLI uses the base meta tag in index.html, you will need to modify the baseUrl variable in myapp\appname\config\environment.js, and set it to myapp/appname/dist/. Rebuild and the app will work by visiting localhost/myapp/appname/dist
This is a slightly complicated and totally unpractical folder structure, but it is a good example of how it works and I'm sure newcomers will stumble upon the exact same use case.