How to get specific error message from SourceBuffer - html

I have an HTML5 video with a MediaSource for its source. When I call SourceBuffer.appendBuffer() the SourceBuffer throws an error.
I'm able to detect when this error is thrown like so:
sourceBuffer.addEventListener("error", function() {
console.log(arguments);
});
However the "arguments" in this case contain an ErrorEvent with no meaningful message or data. Just a reference to the SourceBuffer that failed.
I need to figure out why it failed, so I can fix it.

Yes, this is one of the most frustrating parts about MSE... it's really difficult to debug. I think the issue is that the errors have to be standardized from browser to browser. Since there's a lot of
If you're using Chrome, the best place to look is chrome://media-internals.
As of Chrome 91 the media-internals pane is removed. Instead. go to
DevTools / hamburger menu (=== Customize and Control DevTools) / More Tools ▶ / Media
Then you'll have a Media tab on DevTools.

Related

DataVizExtention: issue with clearing viewables while a sprite is selected

In my code, I have this workflow:
When user wants to see some things, add Sprites using 'DataVizCore.addViewables()'
Use 'viewer.addEventListener(DataVizCore.MOUSE_CLICK, onDotClick)' to show info bubble
When user wants to show other things, call 'DataVizCore.removeAllViewables()' to clear Sprites
Repeat from step 1
This sequence works OK except in one situation.
If a sprite was selected (by clicking on it) before removeAllViewables() is called, I don't get MOUSE_CLICK event for newly added Sprites. In browser console, I see following error is thrown.
CustomViewables.js:318 Uncaught TypeError: Cannot read property 'style' of undefined at ViewableData.getViewableUV (developer.api.autodesk.com/modelderivative/v2/viewers/7.*/extensions/DataVisualization/DataVisualization.js:454)
As a workaround, I added 'event.hasStopped = true' to click event handler to prevent Sprite getting selected internally. That seems to work.
This seems like a bug in DataVizExtension to me. Or, my workflow is wrong?
Thanks
Bandu
Bandu. Thanks for the detailed steps to reproduce this issue. I tried with v7.46.0 version of the DataVisualization.js (latest as of my message) but was not seeing the same issue. I'd be curious if you are using this same version of the Forge Viewer (you can figure that out by looking at the viewer3D.js fetched under the Network tab of Chrome DevTools).
Setting event.hasStopped = true works because it internally avoided the code path calls into getViewableUV that threw the exception, but the flag is meant for other use cases (e.g. overriding default sprite selection behavior).
In any case, I've just tweaked our internal code to make use-cases like yours more robust. The changes will be released with the upcoming v7.47.0. Thank you for your feedback 🙂

Javascript Breakpoint When 'undefined' is used

I am asking about Google Chrome Debugging, but it could be a question about any browser that does this in their debugging.
I have a piece of javascript that runs several times a second for a number of seconds. It does a load of calculations. These calculations are done on floating point variables, BUT I suspect after several seconds an undefined number is accidently stumbled upon.
I do not know when it happens and cannot predict it myself. So I need the debugger to pause and let me inspect the code when some maths is done involving an undefined number.
I want to rule out loads of editing within the code. I do not want to put in a load of debugger; lines in conditional statements. I am looking for a way for the browser to spot I am using an undefined and pause the debugging console.
How can I get Google Chrome (or any other browser with a decent debugging mode) pause when it reaches a calculation that involves an undefined number?
You can check for undefined and use the debugger; keyword.
Within your code
...
if (xyz === undefined) {
debugger;
}
...
For more details, see here: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#debugger

Chromecast - sender app - Cast icon not visible HTML5/JS

The problem is that cast icon is not visible even in sample examples by Google in sender application. Month ago i had to refresh the page couple of times to get an icon back or restart the device. Now nothing is working and the icon is missing but in chrome development tools it shows that it is correctly implemented. Do you know what is the problem?
I am creating cast button by:
google-cast-launcher
there are no errors in console
PS. I do also have had implemented the library
https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1
I found a solution. You need to use https:// instead of http://
otherwise the cast icon wont be visible
I hope it helps some of you
#edit
if you have problem with not showing icon and in console it shows :
CastVideos.js:125 Uncaught ReferenceError: cast is not defined
at CastPlayer.initializeCastPlayer (CastVideos.js:125)
at window.__onGCastApiAvailable (CastVideos.js:1004)
at chrome.cast.ha (VM1365 cast_sender.js:99)
in your html put script at the beggining of head and script to framework gstatic at the end of body.
You have to delay the initialization of Cast Player
let castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function (isAvailable) {
if (isAvailable) {
setTimeout(() => {
castPlayer.initializeCastPlayer();
}, 1000)
}
};

HTML5 drag-drop between different browsers and apps

Browser quirks aside, HTML5 drag and drop works between different windows of the same browser. When I run up the web app in different browsers, I still get the dragover events but the data is missing.
Here are the the dragStart and dragOver handlers. Not very interesting, they just implement what MDN tells you to do. The code is Typescript.
public dragStart(e: DragEvent): boolean {
e.dataTransfer.setData("text/json", JSON.stringify(this.Model));
return true;
}
public dragOver(e: DragEvent): boolean {
if (e.dataTransfer.items.length) {
let raw = e.dataTransfer.items[0];
if (raw && raw.type === "text/json") {
//highlight drop target
}
return false;
}
return true;
}
This code running in two Chrome windows, it works - I can drag between the windows. This code running in two Firefox windows, it works.
Chrome to Firefox, or Firefox to Chrome, I get events but no data.
Why and what can I do about this? And if it cannot be made to work, what's the point of firing drag events for drag from another app if you (Google, Mozilla etc) aren't going to surface the data?
This probably isn't the end of the world for copying from one browser app to another; a given user will more than likely use the same browser for both. But I had visions of interop with desktop applications, and this does not bode well.
When I change the "mime type" used with setData and getData from text/json (which is what the data is) to text/plain, suddenly it works between Firefox and Chrome, and I can also drag a node to a text editor, where unsurprisingly the JSON is inserted as text.
And it works with Edge now. Crikey, according to mdn you can make up your own values. They left out "but not if you want interop with another app"
I had thought to use the type to decide whether to allow drop, and text/plain does little to help me wit that. I can try a parse and if that succeeds I can check some attributes, but this is rather heavyweight, and according to Drag'n'drop dataTransfer.getData empty it won't work anyhow.

AS3 Trace an info message

I'm a AS3 developer but I'm not sure how can I trace this kind of messages in firebug as an info messsages.
I know that for an error I just need to inherit for an error but I'm not sure how can I trace this kind of messages.
This code:
trace("Hola")
will show "Hola" in Firebug, but I want the fancy Info icon at the beginning also the background of the line is blue.
Thanks for your help.
you can try https://addons.mozilla.org/en-US/firefox/addon/flashbug/
years ago I've used http://www.sephiroth.it/firefox/flashtracer/ not sure if anyone uses it still.
The trick is to use Debug version of flash player
In the case where you don't want to install the Flash Debug player (performance?), rather than using trace, route it to a Debug method that traces and logs to the console:
import flash.external.ExternalInterface;
var debug:Boolean = true;
function log(msg:String):void {
if ( debug ) {
trace(msg);
ExternalInterface.call('console.log',msg);
}
}
log('Hello World');
You should be able to throw that in a frame. If you're using class definitions, you'll have to interpret that code block as snippets.
Also note that in a browser that doesn't have console.log (like IE7) this will throw an error, so maybe you should test for console.log first and store the result in a global.
Notice the debug variable. When you want to turn debug logging off, just set debug to false. This is an overly simplified idea, but provides the basic concept.
Another way enhance this concept is to include a debug "window" if you will... really just a scrollable text box on top of everything else. This is helpful when dealing with devices that do not support logging, debug versions of flash or are just difficult to debug, e.g. mobile and AIR.