I have an Angular 2 project in production for a while and I've been informed that lately some functions are not working properly in Chrome. Safari works fine.
After some investigation I realized that the problem is that audio elements "ended" events are not being fired.
I'm printing the currentTime / Duration and all of them automatically stop short at a random percentage of completion.
e.g.
I'm completely lost on what might be suddenly causing this. Any ideas?
let el = <HTMLMediaElement>document.getElementById(id);
this.audio.src = <string>(<HTMLSourceElement>el.children[0].getAttribute("src"));
this.audio.load();
this.audio.play();
this.audio.onended = function() {
...// THIS NEVER RUNS
}
this.audio.ontimeupdate = function() {
console.log(this.currentTime, this.duration);
...// THIS DOES BUT currentTime never reaches duration
}
UPDATE:
I was testing with Chrome latest version 64.0.3282.140 at the moment and when I downgraded to version 63 the problem went away...
This was caused by a bug in a Chrome update that makes its audio player behave this way when reproducing "damaged" mp3 files.
It is discussed more in depth here and on this stackoverflow thread.
Recommended ways to fix the files are:
mp3val -f (didn't work for me)
Reencode with lame command (did work for me)
According to the chromium bug thread it will be fixed in version 66.
I'm working on a small project which requires HTML5 appcaching. For this small project I need a simple .gif image and the page itself to be cached. Saving the cache works fine, both browsers also show the cached version.
But when i'm releasing a new manifest file, with other .gif images on the server, FireFox and Chrome won't show the newest version of the site. This happens even when i'm clearing the browser cache. when i'm trying to do the same thing: save page in cache -> edit page -> update manifest file version -> refresh page, swap cache, in Internet Explorer, it's works perfectly and always shows the newest version of my webpage
Here is my manifest file:
CACHE MANIFEST
# 2012-02-21 v1.1.50
Index.html
pic.gif
NETWORK:
*
And here is my method for swapping in the new appcache on the updateready event:
appCache.addEventListener('updateready', function(event) {
$.mobile.loading("hide");
console.log("Update ready.");
if (confirm('Een nieuwe versie van deze pagina is beschikbaar, wilt u deze weergeven?')) {
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
Can someone please tell me what i'm doing wrong, or even what the browser is doing wrong? And help me both Chrome and Firefox showing the newest cache version aswell?
Thanks in advance!
Edit: bump! Stil haven't found a solution yet, please can someone help?
Edit 2: bump, again! Still no clue about this.
Another BUMP
I am about to develop an application that is to run on Windows 8.1 tablets. An important feature is to be able to click on a button to access the camera to take some pictures. Ideally I would like to create it as a Web application rather than a native application due to a number of reasons (licences, cross-platform, development time: have no experience in native apps, etc.).
I have looked at the options for capturing images from HTML 5 and have found HTML Media Capture which allows me to write:
<input type="file" accept="image/*" capture="camera" />
To get access to the camera. This works great on iPads and on Android tablets, but I can't get it to work on Windows 8 tablets. I have tried using Chrome on the Windows 8 tablet, but still no effect. All it does is that it opens a file dialog in which I can choose a file to upload. What I want to do is to be able to capture a new image. This standard is not supported by IE (an apparently the other browsers cannot access the device's camera either).
I have also stumbled across Media Capture and Streams which seems to be mostly related to showing streams from e.g. the web cam, but probably could be used to capture images and is supported by Chrome and Firefox among other browsers, but still not by Internet Explorer (even IE11). None of the three browsers' implementations seem to work on my Windows 8.1 test machine though. If someone has gotten getUserMedia to work on Windows 8 tablets in any browser I'm interested in hearing about it.
Anyway, my main question is: Is there any way to access the camera on a Windows 8 tablet using HTML5 from a web application? The only working examples I have seen have relied on a prototype implementation for IE using Active X or solutions that use flash.
EDIT: I would very much prefer to keep it in HTML5/javascript as it has to work offline (using HTML5 Application Cache)
I struggled very much for this solution, at the end I find good a solution. But only can use in windows store apps like chrome windows 8 mode (chrome settings -> relaunch chrome in windows 8 mode) then you can use the normal file input tag in html. when you hit "choose file" u see the image below. Then u can choose camera to add take image from camera.
if you can not see camera in the list, u can install app below.
https://www.microsoft.com/en-US/store/apps/Camera-File-Open-Picker/9WZDNCRFJQVN
So I was running into the exactly same issue. My web app is similar, except I have to do some bar code scanning with the tablet's camera.
I'm using the HTML 5 media api as you commented. In order to make it work in chrome in a Windows 8 Surface Pro, I had to do this:
To enable getUserMedia in Chrome type ‘chrome://flags/’ in URL bar and enable “Enable screen capture support in getUserMedia(). Mac, Windows, Linux, Chrome OS” option.
It was working in my laptop but not in the tablet, after making that change and restarting chrome it worked. Good luck.
Here is the code I ended up using to get around this situation... It appears to work in chrome very well however still no support for Internet Explorer which is known not support getUserMedia. Again I wish this wasn't necessary and windows just supported the take picture feature like iOS and android but it works for now.
Credit:
http://davidwalsh.name/browser-camera
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
getUserMedia interface works in Chrome on my Surface 2, prove:
I've implemented solution described here:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Btw, there is a working example on their site as well:
getUserMedia doesn't work in IE
getUserMedia probably works in FF, but I didn't test
access to the camera from [Browse] button doesn't work in any browser on my Surface 2
EDIT: Just realized, my approach doesn't work on Surface any more. Same story for the html5rocks page, the example given doesn't work on Surface. I guess, new Chrome version stopped to support something. BUT I've found the example which works on Surface for Chrome and Firefox, here you are:
http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html
I've been seeing a strange issue using Google Maps SDK 1.4 (and 1.2... probably others) on iOS 7 beta 4 and 5.
After a brief time of zooming and panning on a device running iOS 7 beta 4 or 5, my GMSMapView will stop responding to gestures. It wont zoom or pan or do anything when you touch it.
When this happens, every other interface element present on screen will remain functional. Programmatically removing and adding the map from the view will re-enable the map. Rotating the device does not affect the map.
It happens only on a device running the iOS 7 beta and not on a simulator running iOS 7. Running the same app on an iOS 5.1 and 6.x device will not reproduce this issue.
Has anyone else had an issue like this? I am not a seasoned iOS developer, so I could be missing something simple.
Thanks a bunch!
GMSMapView(UIViewController) on UINavigationController.
Insert this code in viewDidLoad method.
-(void)viewDidLoad {
[super viewDidLoad];
// iOS7 add this code
if ([self.navigationController respondsToSelector:#selector(interactivePopGestureRecognizer)]) {
self.navigationController.interactivePopGestureRecognizer.enabled = NO;
}
.... your codes
}
Download the latest version of Google Maps SDK. This issue has been solved in Version 1.8.0 - May 2014.
Check the release notes.
I'm going to call it The A.S.S. — The Ah, Snap! Screen.
Anyhow, I've got uploadify working well except for Chrome, which shows me The A.S.S. when I click the "Add Files" button. Anyone else run into this problem? I'm at a bit of a loss as to how to fix (or circumvent) it.
Here's the specs:
:: Mac
OSX 10.5.8
Chrome 8.0.552.237
jQuery 1.4.2
Uploadify 2.1.0
:: PC
Windows 7 Starter
Chrome 8.0.552.237
jQuery 1.4.2
Uploadify 2.1.0
Just to be clear, it isn't crashing when uploading a file, it doesn't even get that far. As soon as I click the "Add Files" button I get the ASS.
Thanks for any help.
Try Using
jQuery(function() {
setTimeout(function () {
jQuery('#file_upload').uploadify({
....your content....
});
}, 0);
});
When directly loading the uploadify it will crash...This is a sideway method
This is a known issue being tracked.