window.onerror=function(err,url,line){
if(err=='boom'){
console.log(true);
}
else{
console.log(false);
}};
console.error('boom');
This outputs undefined!
How can I tell in the java-script what text the error contains?
I'm trying to detect google chrome cast extension error
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js
related: Google chrome cast sender error if chrome cast extension is not installed or using incognito
My reasoning is
//tried to detect chromecast extension id: boadgeojelhgndaghljhdicfkmllpafd
//it looks like it is protected from detection (tried: http://blog.kotowicz.net/2012/02/intro-to-chrome-addons-hacking.html)
//if they are using:
//chrome flash ===flash (needs double click as &autoplay=1 lets the user do only one click but it side-effects with no video preview)
//chrome chromeCast===fastjs (google are being bad players here!)
//chrome ===slowjs (almost unusable website)
//chrome flash chromeCast===flash ffsake! (maybe try one video then see if there are errors and put a cookie, chromecast=true means that we got no errors so we don't need flash!) todo:how to analyse error text?
//if the user is on chrome and does not have flash then they are youtubes 'exception'! they will have very crap loading times
var chrome=0;
if(/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)){
chrome=1;
function detectPlugin(substrs){
if(navigator.plugins){
for(var i=0,l=navigator.plugins.length;i<l;i++){
var plugin=navigator.plugins[i]
, haystack=plugin.name+plugin.description
, found=0;
for(var j=0;j<substrs.length;j++){
if(haystack.indexOf(substrs[j])!=-1){found++;}
}
if(found==substrs.length){return true;}
}}
return false;
}
var detectFlash=[/*"Shockwave",*/"Flash"]; //not entirely sure how relevant shockwave is here
if(detectPlugin(detectFlash)){chrome=2;}
}
then I create an iframe with:
'https://www.youtube.com/'+(chrome==2?'v':'embed')+'/'+ytvidcode
where ytvidcode is the id of the youtube video
v is for the depreciated flash embed while embed is for the html5 (broken/wont fix) embed
So the above code will detect chrome then will attempt to detect flash but cannot detect chrome-cast.
If the user has both chrome-cast and flash then (as it cannot detect chrome-cast/chrome-cast errors) it will force flash if present.
If flash is not present then the user will have a crappy youtube embed experience (they might have to use another browser)
Is it possible to detect the errors made by chrome-cast or any other footprint of its presence?
because if it is an installed extension then it should be fully utilized as flash is depreciated
window.onerror=function(e,url,line){console.dir(arguments);}//nope
window.onerror=function(e,url,line){console.dir(this);}//nope
https://github.com/Valve/fingerprintjs2
new Fingerprint2().get(function(result, components){
console.log(result); //a hash, representing your device fingerprint
console.log(components); // an array of FP components
});
components[13] ("regular_plugins") shows no Google cast even though I have installed it today
The only thing I can think of at this point is to time the loading of one of their videos (if they are on chome and it takes too long to load the test video then they must not have chrome cast), using this https://developers.google.com/youtube/iframe_api_reference#Getting_Started and a timer and a cookie after (so the test only happens once)... I will test this then perhaps report back
This lets the videos use embed if non chrome or if they are on chrome with cast extension enabled.
If they are on chrome without cast then it checks for flash and if they support flash then it uses v.
If they have chrome without ether cast or flash then (they will just get the chrome cast errors, it's their fault at that point!)
v is for the depreciated flash embed while embed is for the html5 (broken/wont fix) embed.
Could do with improvements maybe...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script type="text/javascript">
function proceed(how){
document.getElementById('vid').innerHTML='<iframe src="https://www.youtube.com/'+how+'/M_lHI1opADk"></iframe>';
console.log(ischrome,iscast);
}
var ytv=['embed','v','embed','v'];
var ischrome=0;
var iscast=true;//maybe
if(/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)){
ischrome=1;
setTimeout(function(){
try{new chrome.cast.SessionRequest('794B7BBF');}
catch(e){console.log(e);
iscast=false;}
finally{
(iscast==true)&&(ischrome=2);
if(ischrome==1){
function hasflash(){if(navigator.plugins){for(var i=0,l=navigator.plugins.length;i<l;i++){if((navigator.plugins[i].name+navigator.plugins[i].description).indexOf("Flash")!=-1){return true;}}}return false;}
if(hasflash()){ischrome=3;}
proceed(ytv[ischrome]);
}
else{
proceed(ytv[ischrome]);
}}},1000);}
else{proceed(ytv[ischrome]);}
</script>
</head>
<body>
<div id="vid"></div>
</body>
</html>
You can test this by installing the cast extension disabling/enabling and refreshing the page.
Related
I would like to print a PDF in the browser, which was generated by my ASP.NET Core application. I have already tested countless articles and recommendations, but unfortunately there is no universal solution for all browsers.
Solutions like printing from an iframe doesn't work on iPadOS/iOS - for a document with multiple pages it prints only the first page (and the page is scaled incorrectly). The embed is not working anymore.
Print.js looks like that it is not maintained anymore and the owner has no activity on his account in the last year. Based on the issues on project, there are lot of bugs for mobile devices, which were not fixed anymore.
PDF.js from mozilla is also not working with the legacy version on iPadOS/iOS. Testing with the demo page has shown, that the printing often gets stuck. As mentioned in this ticket, the primary target is Firefox - they will not care much about issues on safari).
The only solution I can think of would be to print on desktop devices using an iframe and display the PDF on mobile devices, leaving it to the user to print it themselves. However, on iPadOS in particular, the default setting is "Request Desktop website" and Safari shows as macOS. So it is not possible to determine from the user agent whether it is an iPadOS.
Has anyone a solution for this?
<html>
<head>
<title>Print PDF using Dynamic iFrame</title>
</head>
<body>
<input type="button" id="bt"
onclick="print('../sample.pdf')"
value="Print PDF" />
</body>
<script>
let print = (doc) => {
let objFra = document.createElement('iframe'); // Create an IFrame.
objFra.style.visibility = 'hidden'; // Hide the frame.
objFra.src = doc; // Set source.
document.body.appendChild(objFra); // Add the frame to the web page.
objFra.contentWindow.focus(); // Set focus.
objFra.contentWindow.print(); // Print it.
}
// Using regular js features.
// function print(doc) {
// var objFra = document.createElement('iframe');
// objFra.style.visibility = 'hidden';
// objFra.src = doc;
// document.body.appendChild(objFra);
// objFra.contentWindow.focus();
// objFra.contentWindow.print();
// }
</script>
</html>
Tested on Chrome/Firefox/Edge. I'm working on Win10 with VS code and the "Live Server" extension.
The page loads, first audio file(.mp3) plays, then different elements appear with Jquery delays, etc. Upon a certain < ul > fading in, the second audio file plays.
With "Live Server" 's auto-reloading on save feature or by clicking on my navbar's link to the same page (testing purposes), the sounds and Jquery functions work fine, but if I refresh with the browser itself, the sound files don't play again.
I tried solutions found on google, like setting currentTime, onLoad, but they didn't really answer a similar problem, the most success I've had was achieving the same results I had from the start.
I'm just starting to learn JS and Jquery, so I'm sorry if the code is messy.
<script type="text/javascript" src="script/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/main.js"></script>
<script>
var audio1 = $("#mantra")[0];
var audio2 = $("#wind")[0];
audio1.play()
$("document").ready(function () {
$(".choix").hide() // .choix is the class of fig1, fig2, fig3, fig4
$("#fig1").delay(9500).fadeIn(3000);
$("#fig2").delay(9550).fadeIn(3000);
$("#fig3").delay(9600).fadeIn(3000);
$("#fig4").delay(9650).fadeIn(3000);
$("#tagline").hide().delay(2000).fadeIn(1500)
.delay(1500).fadeOut(2000).queue(function(n) {
$(this).html("<br> Start here");
n();
}).delay(700).fadeIn(2000);
$(".textNav").hide().delay(800).fadeIn(1500);
});
$("#wind").stop("true").delay(9400).queue(function() { //9400ms delay to start just before fig1+
audio2.play()
});
});
</script>
In cases when the audio is not playing, check the console and you will find an error stating
DOMException: play() failed because the user didn't interact with the
document first.
This is because browsers don't allow music autoplay on page-load. It is necessary for the user to make some interaction (click, tap, etc.) with the window before playing the audio.
Source
I am building a website where videos start to play when you move the mousepointer over them. When a user leaves the video area it pauses and jumps back to the first frame. This works perfectly in every browser besides IE. When I open the dev console it shows me an "InvalidStateError" right above the part of code that handles the stop function. Why is IE behaving like that? Thanks for any input on this.
Here is the part of code that triggers the error:
var figure = $('.servus_video').hover(playVideo, stopVideo);
function playVideo(e) {
$('video', this).get(0).play();
}
function stopVideo(e) {
$('video', this).get(0).currentTime = 0;
$('video', this).get(0).pause();
}
Screenshot from IE11 debugger
Ok, after hours of troubleshooting I realized that IE responded with "Invalid Source" which I couldn't see because I disabled controls for the video. After tripple checking my encoder settings and verifying that they were correct I stumbled upon a document in which MS states that the maximum supported height of a video file is 1088px. 1088!? My videos were 720x1280px (portrait). After changing the resolution to 612x1088px everything worked.
https://msdn.microsoft.com/en-us/library/windows/desktop/dd797815(v=vs.85).aspx
I'm trying to implement speech synthesis in-browser for a home automation project for visually-impaired people. In my test page I've noticed there's a roughly 1-second lag between calling the speak() method and actually hearing it.
Just wondering whether this is normal behaviour or if I'm doing something wrong. If anyone can offer advice on how to speed it up (even by half a second or so) I'd really appreciate it :)
[EDIT 1]
Okay, so I've tried my test page in MS Edge (had only been using Chrome) and the lag disappears. I also tried the Web Speech Synthesis Demo in Chrome, with "voice" set to "native" and there was no lag either. Both these tests rendered the text with a UK English voice.
In Chrome, my test page renders the text with an Australian-English voice (I'm in AU), and has a lag before playing.
My gut tells me that Chrome browser is loading a voice from some remote location instead of using the local system voice, and only for this specific page (ie the demo at codepen.io works fine in the same browser). But what I don't know is why.
This wouldn't be so much of a problem if it only loaded the voice once rather than every single time it is called (I'm just presuming that's what's happening).
[/EDIT 1]
Here's my code:
<body>
<div class='col col-xs-6'>
<div style='width:100%;'>
<button type='button' class='btn' onmouseover='speak("mouse over");' onmouseout="cancel();">
Test button.
</button>
</div>
</div>
<p id="msg"></p>
<script type="text/javascript">
var globalVolume = 0.8;
var globalRate = 1;
var globalPitch = 0.9;
var enterMsg = "Mouse over";
function speak(text) {
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.volume = globalVolume;
msg.rate = globalRate;
msg.pitch = globalPitch;
//msg.voice = "native";
window.speechSynthesis.speak(msg);
}
function cancel() {
window.speechSynthesis.cancel();
}
//speak("Hello, world!");
</script>
</body>
As you were theorizing in your update, if you choose any of the non-native voices (any of the ones that start with "Google") the sound is generated on a Google server and then sent to the browser, thus causing the delay. It isn't actually loading a voice into your browser, every time you try to use the TTS it sends it to a server to generate the sound. So, unfortunately the network delay will always be there when using anything but the native voices available on your computer. Aside from the delay, there is also the privacy concern of all the speech you generate being sent to Google (and possibly the NSA or anyone else who is spying on their servers). Edge and Firefox use the native voices by default and don't let you choose Google's proprietary ones which is why they always lack the delay.
im working on a phonegap application i want to test if theres a connection internet display an iframe, else display a message "please check your internet connection".
i used a javascript code, it works for me on the navigator, but when i build the application it didn't work for me, my code is like this:
<div id="app"></div>
<script type="text/javascript">
var online = navigator.onLine;
if (online == true) {
$( "div#app" ).html("<iframe src='#' frameborder=0 width=100%></iframe>");
} else {
$( "div#app" ).html('NO INTERNET CONNEXION');
}
</script>
There are other ways to check for internet access with cordova/phonegap using plugins, but if you want to check if an image is available or not, then you can always check its size in the cache.
Either of these solutions should steer you forward:
Determining image file size + dimensions via Javascript?
OR other possible answer
https://stackoverflow.com/a/18018330/4278933
If you check for an image, make sure a parameter timestamp is appended to the url... thus... call http://www.myserver.com/img/blank.gif?x=1122334455
This will ensure that your test does not return with a false positive, which would be the case if the image URL was previously cached within the client device.