ASP.NET MVC2, framework 3.5
Machine 1: dev box - Win7 Ultimate x64(IIS 7.5), VS2010 Ultimate, Firefox 3.6
Machine 2: dev server - Win server 2003 (IIS 6).
Code on the server is compiled from SVN and deployed to the IIS folders on the server by TeamCity.
The problem is this: I have a page which shows a video using FlowPlayer. I have assigned an error handler like so:
<script language="javascript">
function playerError(errorCode, errorMessage) {
window.location = "/videos/unavailable";
}
flowplayer("player"
, "/scripts/flowplayer/flowplayer-3.2.2.swf"
, {
onError: playerError
,
clip: { autoPlay: false, autoBuffering: true }
}
);
</script>
When the player cannot find the video it's supposed to play, I expect it to call its onError handler, which would then redirect the user to the "Unavailable" page. This works as expected on my dev box. Identical code on the server does not work. I am viewing both in the same browser from the same machine.
This is bizarre. Ideas?
Turns out that there are several ways to encode movie files. In the MP4s we are using, it appears that a block of meta data containing some attributes that are required to start playing the file can be located at the end of the file, or at the beginning.
For streaming, this must be at the beginning of the file. Otherwise, the player must download the entire file before it can start playing. With a 100MB file this is, obviously, less than ideal.
There are several freeware utilities available that will move this head to the required position for streaming.
Hopefully this will help someone else.
Related
I've tested Annyang in a blank file first. This worked fine, but when I connected the same code to a function in another file it didn't seem te be working. It seemed that the annyang was not connected anymore. The browser didn't ask for permission to use the microphone neither was the red circle visible. However, I've connected it the same way I did while testing.
function: playerRotate(1); I want to start when the user says: turn.
Below you can find my code:
The javascript `
$( document ).ready( doStuff );
function doStuff()
{
if (annyang) {
var commands = {
'turn': function() {
playerRotate(1);
console.log("You said turn");
}
};
annyang.addCommands(commands);
annyang.debug(true);
annyang.start({ continuous: false });
}
annyang.setLanguage('en-GB');
This is the scripttag that I've put in the head of the hmtl: <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>
And I've put the script tag for the main javascript file at the bottom of the body of the html.
Can anyone help to find what I'm doing wrong?
Thanks so much in advance!
I downloaded your source code and it ran without a hitch (see image below).
Is there something else different between how you ran annyang in your test when it worked and how you ran it later?
My guess would be that what changed was how you ran it locally. Perhaps one of those times you opened it as file:// and another as http://localhost or even http://my-local-environment or something similar. Speech Recognition requires HTTPS (or on some versions it can run over HTTP if your host name is localhost). Your safest bet would be to try running it over SSL (even locally, without a valid certificate).
Another option is that you may have blocked speech recognition once and the browser remembers that choice (your mileage may vary depending on browser and version).
As for the code itself, it works great:
I'm using XAMPP and opening my html file using localhost/filename.html. So both my html document and .js file are in the same directory, in C:/xampp/htdocs. When I open the html file using localhost/filename.html in the browser window, it does not include the changes to the code. It's using the same version of the .js file before I saved the changes. But when I open the html document locally (offline, not running on localhost), the changes to the .js are there.
For example, if I put document.write('foo') in the .js and then hit save, then opening with localhost/filename.html does not print "foo". But if I just open the filename.html through file explorer (on the same browser--chrome), it prints "foo"!
What could be causing this?
OS: Windows
Browser: Chrome
Actually seams that clearing the browser cache solved the problem. i would like to link to a related page:https://superuser.com/questions/36106/force-refreshing-only-javascript-files-in-firefox-and-chrome
I had a similar issue. Here are some things you can try to fix it:
1-Clearing browser cache.(this one fixed mine)
2-Stopping and starting again Apache.
3-(if you use XAMPP control panel)Closing the the control panel and left-click on the icon n the taskbar(near to wifi-sound control or in the compressed up arrow) and clicking on quit
4-Stopping XAMPP; renaming htdocs to something else; editing the "C:/xammp/properties.ini" "apache_htdocs_directory" property to the new path you gave the htdocs.(This can break something so i suggest to repeat this step again after restarting XAMPP and changing back everything to default "htdocs").
4-Shutting down the OS via cmd.exe with shutdown -s(I personally prefear to use cmd to shutdown because on some PC there's "fast boot" option enable, which means that it hibernates it to boot faster) and then restart the OS.
If I find anything else I'll add it to the list.
(I was still writing my answer while Connum was writing)
I have a React web application that allows Image uploads.
After performing a fetch POST request for multiple images (in this case 6) to my API, the browser refreshes itself and reloads the current page. It is worth noting that this application allows images to be cropped and so for every image the user uploads there is a second image (cropped) to upload. So the above 6 images result in 12 POST requests.
The refresh behavior is INCONSISTENT and difficult to reproduce. I have inserted breakpoints within the function this behavior occurs. Using the chrome debugger tools I have stepped through the flow and found that the refresh occurs after this call.
this.ws.onmessage = function(e) {
debug('message event', e.data);
self.emit('message', e.data);
};
It is located inside the file websocket.js within the Library node_modules/react-dev-tools/node_modules/socketjs-client/lib/transport/websocket.js
I have narrowed it down to this file and ruled out any issues from my project codebase.
My theory is that the behavior of my application is triggering an external listener/case which is causing a full browser refresh.
I see that the file in question is inside react-dev-tools and thought that removing this module could solve the problem, however, this occurs in my production environment also and so I feel removing this could break the build.
Any thoughts as to better my investigation or potential solutions please are helpful.
I'm not sure how you're running your environments, but maybe this will help...
I ran into this exact issue and it took me 3 days (too long) to narrow it to nodemon (in development) and pm2 (in production). I'm not sure how you're serving your application/images, but for me, any time a new file was added, the service was intermittently restarted (sometimes it uploaded, sometimes it was cut off).
For development, I added a nodemon.json config file at the application root (nodemon app.js --config nodemon.json):
{
"ignore": ["uploads"]
}
For production, I created a prod.json at the application root and ran pm2 start prod.json:
{
"apps" : [{
"name" : "app-name",
"ignore_watch" : ["uploads"],
"script" : "./app.js",
"env": {
"NODE_ENV": "production"
}
}]
}
If you're using neither of the above packages, then I'd suggest looking into the possibility of reconfiguring how you're storing and serving images to the application (as a last resort).
I'm looking for an html5 audio and video player that has a waveform. I found wavesurfer.js, but that looks like just audio. But hey, I thought I'd play around with it. Here is some very simple code (this is just me with an html file on my desktop - and wav was converted to PCM. Though, I've tried this with a wav and mp3):
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<script>
var wavesurfer = Object.create(WaveSurfer);
document.addEventListener('DOMContentLoaded', function () {
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686'
});
wavesurfer.load('session.wav');
});
wavesurfer.on('ready', function () {
wavesurfer.play();
});
</script>
</head>
<body>
<div id="waveform"></div>
</body>
</html>
This couldn't get any simpler! OK, let's open this in Firefox:
Great! It starts playing. I have a waveform. Awesome!
Now Chrome (or Edge - both do the same):
Absolutely nothing (scratches head). No sound. Nothing.
OK, I found this link here: https://wavesurfer-js.org/example/audio-element/
It says: wavesurfer.js will automatically fallback to HTML5 Media if Web Audio is not supported. However, you can choose to use audio element manually. Simply set the backend option to "MediaElement"
Without googling (listen I'm jumping in the pool feet first here!), I guess I don't know the exact difference between HTML 5 Media and Web Audio. Or my assumption off my head is Web Audio means the HTML 5 Audio tag, which is different from HTML 5 Media How? Not sure yet. I know nothing.
Regardless, I'll change that code I posted above and add one line of code to the init function:
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686',
backend: 'MediaElement'
});
Running in Chrome now, I get:
It plays. But no waveform.
I mean, I go to the wavesurfer.js website with Chrome and all the demos work. I don't get it. On top of that, I'm concerned about forcing things with the 'MediaElement' backend property.
What am I missing?
EDIT: Oh for goodness sake. I took the same html5.html file (without the back end 'MediaElement' property) and session.wav file and placed them on a web server (IIS). Now, I'm fetching the page through a web server instead of working local to my desktop. Works in Edge and Chrome (and Opera - tried that too!) - No problem. Must be something about working locally that Chrome and Edge don't like. I'll leave this question open - green check marks await for that person that adds valuable info!
Chrome (in an effort to maintain better security involving file system access) prevents the dynamic loading of anything from the file protocol. This (as well as a deep discussion about why this is both a good idea and a bad idea) is referenced here:
https://bugs.chromium.org/p/chromium/issues/detail?id=47416
My personal favorite quote is this one (I have so been this guy in the past):
Your local file policy is 'over the top' as regards security and I urge you to reconsider, please don't fall into the trap of making your browser so secure that it ceases to be useful or usable. Allow the user to decide as Microsoft do with a simple option choice or, God help me, another yellow bar.
You can disable this by launching Chrome with the command line argument --allow-file-access-from-files or by (as you found out) just spinning up a web server, if you want an even easier server I would recommend Python's SimpleHTTPServer which you can start from any directory (in Windows, Mac OSX and Linux) by typing python -m SimpleHTTPServer 8000 (it comes standard with any version of Python)
I am referring a media source api demo given on this link
It is working fine for the given test webm file but when i tried to change the name of the file to a custom webm file the code stopped working.
It is generating following error : Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 at following code : sourceBuffer.append(new Uint8Array(e.target.result));
To check whether the custom webm file is working i have created a test page in which i have defined a video tag having source of that custom webm file.
When i ran the code it is working fine.
I am unable to understand the reason for this strange behavior.
The most likely problem is your WebM file has Clusters that don't start with a keyframe.
In Chrome dev-channel builds (ie Chrome 25 or later), you can verify this with the following steps.
Open chrome:media-internals in another tab.
Return to the tab with your test page and reload it.
When the error occurs again, switch back to chrome:media-internals tab and look for the bottom entry under the "Active media players:" header. It should have the same blob: URL that you passed to the video element src attribute.
Click on the blob: URL to expand the player data.
Click on the "Log:" entry to expose the player logging data.
Search for entries that have "MEDIA_SOURCE_ERROR" in the "Event:" column. These entries should provide information about what is wrong with the content passed to the browser.
If you see a message that says something like "Media segment did not begin with keyframe." then it means your file has Clusters that don't start with a keyframe. This is common with content that is generated by FFmpeg. You can fix your file in one of the following ways:
Run the sample_muxer program mentioned in section 2.2.5 of the WebM adaptive streaming guide
Run the mse_webm_remuxer program I wrote as part of my mse-tools project.
UPDATE: no internal error shown in my case (accepted answer suggests to check) but still the same problem
I ran into the same trouble when trying to play recorded .webm file by MediaRecorder API back using Media Source Extensions (MSE). Chrome (51) recordings are malformed, Firefox (46) seems OK.
To get it working you have to fix cues in .webm file:
clone https://github.com/webmproject/libwebm
make sure you have cmake version >= 3.2 (https://askubuntu.com/questions/610291/how-to-install-cmake-3-2-on-ubuntu-14-04)
cmake .
make
./sample_muxer -i original.webm -o fixed.webm
load fixed.webm into DASH / your own player!
Hope it helped someone. It was quite difficult to google any information without the DASH keyword (i am not using DASH, only the same underlying technology - MSE) :)