I'm trying to use Affectiva's Web SDK (Javascript) to detect emotions via a Camera Stream. I tried using it in JS Fiddle. It works fine but when I got the code from JSFiddle and used in on my Java Web Project in Eclipse, the Web Camera prompt isn't showing up. Nor can it access the Web Cam. Here's the code:
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="affdex_elements" style="width:680px;height:480px;"></div>
<div class="col-md-4">
<div style="height:25em;">
<strong>EMOTION TRACKING RESULTS</strong>
<div id="results" style="word-wrap:break-word;"></div>
</div>
<div>
<strong>DETECTOR LOG MSGS</strong>
</div>
<div id="logs"></div>
</div>
</div>
<div>
<button id="start" onclick="onStart()">Start</button>
<button id="stop" onclick="onStop()">Stop</button>
<button id="reset" onclick="onReset()">Reset</button>
<h3>Affectiva JS SDK CameraDetector to track different emotions.</h3>
<p>
<strong>Instructions</strong>
</br>
Press the start button to start the detector.
<br/> When a face is detected, the probabilities of the different emotions are written to the DOM.
<br/> Press the stop button to end the detector.
</p>
</div>
</div>
</body>
The Javascript file is similar to the contents in https://jsfiddle.net/affectiva/opyh5e8d/show/
I copied the code but the camera doesn't work on my end when I used it on Eclipse. I'm using Chrome as my browser.
Related
I have some Bootstrap-based HTML pages with some javascript and internal CSS, served in Flask, using Jinjja templates. It works perfectly fine on Windows and Android, using Chrome. But when I try to click certain buttons while on an iPhone (Chrome) or on Safari, they don't work. There's no error message in Chrome either.
Here's a sample of the button I used:
<div class="container mt-4">
<form action="/skill" method="get">
<div class="btn-group-vertical mt-10" style="width:100%">
<button id="Health" onClick="selection(this.id)" type="button" class="btn btn-secondary mb-3" style="background-color: #4a8bae;white-space: normal;">
<h4 class="display-5 pt-2">Health</h4>
<p class="mb-2 font-weight-normal">The centre of human happiness and well-being.</p>
</button>
</div>
</form>
</div>
After clicking the button, it's supposed to sessionstorage the id chosen.
Please advise on what I can do to fix this! Let me know if I should post any other information. Thank you!
I had the same situation, but at least in my case I just turned of the safari's pop-up blocker (at the iphone settings) and everything works fine...
I try to click a button whenever the button shows. However when the button shows, in google chrome's page source, the actual URL is not shown. Here's the source:
<div id="fname2" style="display:none" > Description1 <br/> <span> Description2 </span></div>
<div id="fname"><h1 class="ThreeDee"> Preparing Your Links....<br/> Please wait...</h1></div>
<div id="hata" style="display:none" > Failed to Create Links.. <br/> <span>Please Restart your link Translation . </span></div>
<div id="vip" style="display:none" > None This Link Download your consent <br/> <span> More Description1.. </span></div>
</div>
<div id="buton" style="display:none">
<div class="info-link right" >
Download
</div>
</div>
# is a link of the current page(it is a hyperlink), when it should be the URL of next page. However when I "inspect" the button after it appears:
<div id="wrapper">
<div class="main-menu clearfix">
</div>
<center> <img src="./images/example.png"></center>
<div class="info-v3 clearfix">
<div class="info-txt left">
<div id="fname2" style=""> Created to download Links <br> <span> Download your Download Push Button </span></div>
<div id="fname" style="display: none;"><h1 class="ThreeDee"> Preparing Your Links....<br> Please wait...</h1></div>
<div id="hata" style="display:none"> Failed to Create Links.. <br> <span>Please Restart your link Translation . </span></div>
<div id="vip" style="display:none"> None This Link Download your consent <br> <span> This file is a private Vip our users.. </span></div>
</div>
<div id="buton" style="">
<div class="info-link right">
Download
</div>
</div>
</div>
</div>
Any idea how to click the button? Thanks!
The link must be a side effect of JS. You can't see the changes made by JS in source code. JS is client-side. It executes on the browser. However, you can see in inspect element.
And source code doesnt show the side-effects of executed JS. It show the page got from the server.
You can use waitForKeyElements with jQuery's :visible selector to click the button only once it is displayed.
Something like:
waitForKeyElements (
"#button:visible",
clickButtton
);
function clickButton(jNode) {
jNode.click();
}
I'm not using any JS code, but the console gives me the error
Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is my html code
<div id="navbar">
<div class="width2">
<div class="navbarchild right">
<div class="NBsearch right">
<input type="text" placeholder="search" />
</div>
<div class="NBuser right">
<div class="NBpicture left">
</div>
<div class="NBreputation left">
</div>
<div class="NBbadge left">
</div>
</div>
</div>
<div class="navbarchild left">
</div>
</div>
</div>
*I tried to see where the problem come from,and it seems that it comes from
<input type="text" placeholder="search" />
because when I delete this line the error don't appear.
Disable your extensions one by one from chrome://extensions (i'm supposing you're using chrome, for FF check this link) and see which one causes the problem there's no point in disabling all of them.
And as an answer to you're question about how a can an extension do that the simple answer is that it's just javascript, html and css injected into you page(not really experienced in this field).
For more information about chrome extensions check here
To know which Extension was loaded on your page you can go (when extensions are activated) in the Dev Tool (F12) -> Source -> Content scripts.
This is for Chrome.
I'm using Arctext to curve some text on my web page.
However I have a problem.
When I link to the page the first time the curve is just seen slightly like below
When I reload the page however the curve comes properly as seen in this image
That's the HTML :
<div class='row'>
<div class='columns '>
<hr class='songtitlehr'>
<p class='sotd'>SONG OF THE DAY</p>
<p class='songtitle'>SOTD</p>
<p class='songartist '>BY CARL SALDANHA</p>
<p class='sotd2'>SONG OF THE DAY</p>
<hr class='songtitlehr'>
</div>
</div>
That's the JS
$(document).ready(function(){
$('.sotd').arctext({radius:240});
$('.sotd2').arctext({radius:240, dir:-1});
});
I am working with a new angular app and need to make it backward compatible to IE8. From what it looks like it loads in my routing info, loads the template (to a point) but in the concole log i see the following error.
TypeError: Object doesn't support this property or method <div
class=ng-scope ng-view>
This is what my index html page looks like:
<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<!--Add dependencies-->
<script src="jquery.min.js"></script>
<link rel="stylesheet" src="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="ui-bootstrap.js"></script>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
</head>
<body>
<div id="wrapper">
<header class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary">
<div class="container">
<div class="row">
<div class="col-md-7" style="color:white; margin-top:14px;">Thinflash: Fullscreen Demo</div>
</div>
</div>
</section>
</header>
<section role="main" class="container main-body">
<div ng-view></div>
</section>
<!--Add AngularJs Files-->
<script src="swfObject.js"></script>
<script src="app.js"></script>
<script src="appControllers.js"></script>
<script src="thinflash.js"></script>
</div>
</body>
</html>
Template.html :
<div ng-controller="thinflash.controllers.playback">
<div ng-controller="app.controllers.fullscreen">
<div class="mainWrapper" id="stageWrapper">
<label>SWF Object Display </label>
<div class="swfWrapper" style="width:320px; height:240px;" id="swfStage">
<div class="tf-container" tf-swf tf-interface="flashInterface" tf-src="thin.swf" tf-min-version="11.0.0"></div>
</div>
</div>
<div class="col-md-5">
<form role="form">
<!-- Video Playback Controls -->
<div class="row">
<div class="form-group col-md-7">
<label>Select Preloaded Video:</label>
<select class="form-control" ng-model="myVideo" ng-init="myVideo = videos[2]" ng-change="changeVideo(myVideo)" ng-options="v for v in videos"><option></option></select>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<button type="button" class="btn btn-primary" ng-click="pausePlaybackToggle()">Pause</button>
<button type="button" class="btn btn-primary" ng-click="playVideo()">Play</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<label>Volume Control:</label>
<input style="width:50%;" type="range" id="slider" min="1" max="100" step="1" ng-model="volume" ng-change="changeVolume()">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label>Size Controls:</label><br/>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(1)">Small</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(2)">Medium</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(3)">Large</button>
</div>
</div>
</form>
</div>
</div>
</div>
Again when the app loads in IE8 it appears that the template loads (or starts too ... but i get this error)
Add html5 support for IE8 by using something like html5shiv or this little snippet:
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
Edit
Fixing an "Object does not support this method or property" on IE can be a beast, cause it isn't telling you anything. It's not telling you what object, it's not telling you what property, it's not telling you what method and worst of all it's not telling you where this actually occurred. See the pattern? Effectively it's saying; something bad has happened somewhere, go figure. This is one of the reasons why everyone loves IE.
Adding the above snippet has probably solved a problem but then another problem popped up, which produced the same brilliant error message. Fixing this breadcrumb adventure of error messages by posting each new involved piece of html can take a very long time and should rather be discussed with the helpdesk of IE. They have an answering machine telling you to upgrade to their new crappy box of other issues. Troubleshooting this problem via Stackoverflow is like shooting satellites out of the sky with a water pistol, in the dark, blindfolded and drunk.
Some other things you might consider:
Move the snippet to above any other script include
Replace the snippet with html5shiv
Downgrade the include version AngularJS. Version 1.1.5 seems to work for IE7. Version 1.3 does not support IE8 at all.
Check the guide lines of Angular IE compatibility
Start commenting code (javascript/html) to better isolate the part that is causing the problem. Keep in mind that multiple problems generate the same error message in IE.
Upgrade to their new crappy box of other issues.
I wanted to take a second and answer this incase someone else has the same type of thing happen. I tried to polyFill and that didnt work so I tried running the code in IE9 while running in IE8 mode hoping to get a different error .... Voila ....
null hit the nail on the head ... it was in the JS and it was because I was doing document.addListener(). Luckily I was able to quicly decide that the functionality that this supported was not important enough to pull my hair out so i removed that line in my js...
Everything else worked .... Hopefully this can be of some help to someone in the future as IE provides stellar error messages