We Keep Coding

Webcam Access for Custom Filters:vTypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads

I am currently trying to improve my JS skills by going through WesBos's 30 Days of JavaScript. (It is really fun if!) I'm currently on Day 19, which is about using JS to access the WebCam, and then add affects using CSS.
I was successfully able to set up a local server, and here is my code so far:
function getVideo() {
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(localMediaStream => {
console.log(localMediaStream);
video.src = window.URL.createObjectURL(localMediaStream);
video.play();
})
.catch(err => {
console.error(`Web camera access is not enabled. To resolve, reload the page and allow
access.`, err);
});
}
getVideo();
However, I am getting this error:
TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.
getVideo http://localhost/19-webcam-fun/scripts.js:12
promise callback*getVideo http://localhost/19-webcam-fun/scripts.js:10
<anonymous> http://localhost/19-webcam-fun/scripts.js:27
Idk if this helps, but the console.log(localMediaStream) results in the following:
MediaStream { id: "{97c3d27e-404e-4d14-b1d2-2a9ebbf09137}", active: true, onaddtrack: null,
onremovetrack: null }
​
active: true
​
id: "{97c3d27e-404e-4d14-b1d2-2a9ebbf09137}"
​
onaddtrack: null
​
onremovetrack: null
​
<prototype>: MediaStreamPrototype { getAudioTracks: getAudioTracks(), getVideoTracks:
getVideoTracks(), getTracks: getTracks(), … }
I would really appreciate it if someone could help me understand this a little better! Thanks!

Try:
video.srcObject = localMediaStream;
if you're on firefox

How to solve the problem of cannot read property addEventListener of null

I am rendering the paypal button in my application and when the page is loading it shows me the error in the console:
Error: Cannot read property 'addEventListener' of null
at er.error (https://www.paypal.com/sdk/js?client-id=AaAW2HxBuPPI3Awa__I7KGk8FYCLkia1jgm91t8SlBJAULAA4mHOc8oVBcOBp-MlVfyh24svB2EyPiNs&disable-funding=credit,card:3:60631)
at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=AaAW2HxBuPPI3Awa__I7KGk8FYCLkia1jgm91t8SlBJAULAA4mHOc8oVBcOBp-MlVfyh24svB2EyPiNs&disable-funding=credit,card:2:68388)
at JSON.parse (<anonymous>)....
this is the code
var initPaypal = function(){
try
{
paypal.Buttons({
style: {
layout: 'horizontal',
color: 'gold',
shape: 'pill',
//size: 'responsive',
//label: 'pay',
//fundingicons : 'false',
//tagline: 'true'
},
//enableStandardCardFields: false,
onInit: function(data, actions) {
actions.disable();
document.querySelector('#invalidCheck')
.addEventListener('change', function(event) {
if (gsp.creditCardModel.get("agreePolicy")) {
actions.enable();
} else {
actions.disable();
}
});

Does your project work properly locally? Or does this error only appear when published on iis?
document.querySelector('#invalidCheck')
If it's local, the first thing you need to check is whether invalidCheck is null. If it still does not work, the reason for this error may be the script is executed before the page loads, you can try to place the script at the bottom of the page.

Getting Started with ember tutorial: Changing router in 'displaying model data' raises errors

So forgive me in advance, I'm obviously totally new to ember (and pretty new to JS in general as well. I'm going through the enhanced Getting Started tutorial, following it line by line, (unless I missed something) when my browser decides to render nothing but the background. I backtracked and noticed it happens immediately after altering the router as directed here: http://emberjs.com/guides/getting-started/displaying-model-data/
I commited and pushed to github here: https://github.com/justuseapen/ember_tut_mock
^The first commit rendered in the browser fine, the second commit is broken, if you want to see the difference.
This is my console output:
Uncaught ReferenceError: Todos is not defined todo.js:1
DEBUG: ------------------------------- ember.js:394
DEBUG: Ember.VERSION : 1.0.0 ember.js:394
DEBUG: Handlebars.VERSION : 1.0.0 ember.js:394
DEBUG: jQuery.VERSION : 1.10.2 ember.js:394
DEBUG: ------------------------------- ember.js:394
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Assertion failed: No model was found for 'todo' ember.js:394
(anonymous function) ember.js:394
DEPRECATION: Action handlers contained in an `events` object are deprecated in favor of
putting them in an `actions` object (error on <Ember.Route:ember222>)
at Object.triggerEvent
Error while loading route:
TypeError
ember.js:394
Uncaught TypeError: Cannot set property 'store' of undefined
This is the router.js that breaks the code:
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Todos.TodosRoute = Ember.Route.extend({
model: function () {
return this.store.find('todo');
}
});
this is the model with fixtures:
Todos.Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
Todos.Todo.FIXTURES = [
{
id: 1,
title: 'Learn Ember.js',
isCompleted: true
},
{
id: 2,
title: '...',
isCompleted: false
},
{
id: 3,
title: 'Profit!',
isCompleted: false
}
];
any ideas are greatly appreciated.

It's a bug in that version of Ember Data (maybe Ember/Ember Data)
http://emberjs.jsbin.com/OpOsIGEK/1/edit

Uncaught TypeError: Cannot call method 'request' of undefined

In my javascript code, I keep getting the following error:
Uncaught TypeError: Cannot call method 'request' of undefined
My Javascript is below. Any assistance would be greatly appreciated!
myJsonStore = {
store1: new Ext.data.JsonStore({
root: 'rootstore1',
fields: ['UserID', 'UserName']
})
};
//------My panel------
items: [{
xtype: 'combo',
id: 'UName',
fieldLabel: 'User',
emptyText: 'All',
store: myJsonStore.store1,
displayField: 'UserName',
valueField: 'UserID'
}]
//--------------------
Ext.Ajax.request({
url: "rPages/rLogMatchOdds.aspx",
params: {
m: 'init'
},
success: function(response) {
var data = Ext.decode(response.responseText);
myJsonStore.store1.loadData(data);
}
});
Ext.getCmp('UName').store.on('load', function(my, rec) {
Ext.getCmp('UName').setValue(rec[0].get('UserName'));
}, this);

Usually, when the error is of the form Cannot call method 'X' of undefined, it means that whatever object you are attempting to call X from does not exist.
In your case, it appears as though Ext.Ajax is undefined. The easiest way to resolve this involves two simple steps:
Make sure that you've included the javascript file that creates Ext.Ajax. If you're using the ext-all.js file, then you shouldn't have to worry about this.
Make sure that none of your code executes until the browser is ready. The best way to do this is to wrap all of your code within a
Ext.onReady() call. I've provided an example below.
Ext.onReady( function() { //your code goes here });
You can see more examples of this at the ExtJS Examples page.

Got bitten by this problem too.
The solution is for you to call Ext.require('Ext.Ajax') before Ext.onReady like so:
Ext.require('Ext.Ajax');
Ext.onReady(function() {
Ext.Ajax.request({
// your code here...
});

how to override flowplayer onError message

I have the following js. If the flv url doesn't exist the onError function is called which is great.
However currently it displays the alert and then proceeds to display an unfriendly error message. How can i override this message with something more user friendly.
$f(videoid, "/swf/flowplayer-3.1.5.swf", {
playlist: list1,
wmode: 'opaque',
plugins: {
gatracker: {
url: "/swf/flowplayer.analytics-3.1.5.swf",
trackingMode: "Bridge",
debug: false
}
},
onError: function(err) {
alert('Error Code: ' + err);
}
});

You should also be sure to set the player property showErrors to false. That way the ugly boxy error won't show up in the video player frame.

Not really sure what you had in mind but you could do something like this.
Place this where you want your error message to show
<div id="errorbox"></div>
Paste this in your CSS
#errorbox{
color: #D8000C;
border: 2px solid #D8000C;
background-color: #FFBABA;
}
And change the javascript to this
$f(videoid, "/swf/flowplayer-3.1.5.swf", {
playlist: list1,
wmode: 'opaque',
plugins: {
gatracker: {
url: "/swf/flowplayer.analytics-3.1.5.swf",
trackingMode: "Bridge",
debug: false
}
},
onError: function(err) {
$('#errorbox').text('Your error message.... '+ err).fadeIn('fast');
}
});
What this will do is make an error message show up where ever you pasted that HTML in a nice user friendly way. Hope this helps, but it's hard to know exactly what you mean.