MJPEG in Chrome mobile - html

I have a stream from IP-Camera. It works great in safari and adequately in opera mini, but on chrome i recive nothing or if directly open stream i get this:
To display i use this code
<input width="320" type="image" height="240" border="0" id="Сamera" src="url">

You may be experiencing Chrome Issue 135337, in which MJPEG images fetched directly fail to animate.
Reportedly, it's fixed in version 22. So, you can either upgrade to that version or change your code to embed the image in an HTML page. E.g., the following works in Chrome 21 (even if nothing's going on, the timestamp should still increment):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Test MJPEG Animation
</title>
</head>
<body>
<h2>
Test MJPEG Animation
</h2>
<img src="http://193.40.245.181/mjpg/video.mjpg">
</body>
</html>
However, simply pointing the browser at http://193.40.245.181/mjpg/video.mjpg shows only the first frame.

You could also try this node.js proxy. It parses m-jpeg streams and delivers images to all browsers.
Cross-browser solution for displaying MJPEG stream

Related

HTML 5 videos tags are showing up as invalid source in internet explorer

When i use the video tag to display a mp4 video, am getting invalid source in the internet explorer 11.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
<video width="400" height="300" controls >
<source src="Libraries\Documents\videos.mp4" type="video/mp4">
</video>
</body>
</html>
Tried the following but no luck
1)Included meta tag with content as IE=11 and IE=Edge.
2)Included codecs in the type attribute
<source src="Libraries\Documents\bluetoothIphoneSecond.mp4" type='video/mp4;codecs="H.264/MPEG-4"'>
Perhaps the issue is related that your Internet Information Services (IIS) don't contain the .mp4 MIME type.
Please refer to the following steps to check/add the MP4 MIME type.
open Internet Information Services (IIS) Manager,
Highlight Default Web Site on the left panel;
Double-click MIME Types on the right panel;
Scroll down the list and notice that there is no .mp4;
On the right panel again, click Add: at the first field, write .mp4 and on the field below write video/mp4.
Click OK and you are done. The screenshot like this.
Restart IIS.
Then, retest your code.
I also create a sample on my side (using your code and IE 11.116.18362.0), it works well.

IE11 not recognizing HTML5 elements when loading a page from my desktop, any ideas why?

I just started a new job and during my lunch brake I wanted to work on practicing some skills to prep for the MS 70-480 specialist exam. I prefer using Google Chrome, but the company has rules about installing software for personal use so I am stuck working on IE (version:11.0.9600.18015).
So in notepad++ I created the simple test for HTML5's video element.
<!DOCTYPE html>
<html>
<head>
<title>70-480 Test Page</title>
</head>
<body>
<header>
<h1>Practice makes perfect</h1>
</header>
<section id="sandbox">
<video width="400" controls="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" >
Your browser does not support the video element.
</video>
</section>
</body>
</html>
But the page came back without the video showing. I checked the Developer tools and found in the DOM Explorer elements native to the HTML5 (header, video, section, etc.) are not being recognized and instead are showing such as:
...
<body>
<header></header>
<h1>Practice makes perfect</h1>
</header><//header>
<section id="sandbox"></section>
<video controls="" width="400"></video>
<source src="http://www/w3schools.com/html/mov_bbb.mp4"></source>
</video><//video>
</section><//section>
</body>
....
I know IE11 supports the elements since when I copy my code to JSfiddle on that same browser it shows up fine. Is there an explanation for why Internet explorer is giving me this head ache?
Both Pedro Mendes and Lance Leonard's comments worked.
Pedro's solution:
Does your browser have the "Edge (default)" document mode set? Try
this tag inside the header
Lance's solution:
Your page is likely being loaded in compatibility view. Please see
this previous answer for more info.
I decided to go with Lance's solution so that if I make more pages in the future I won't have to include the meta tag every time.

Does HTML5 "download" attribute require any server side configuration?

Hell friends,
I am running a very basic example of HTML5 download attribute to download a mp3 file.
That example is working on Chrome but not working on FF (24).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>HTML5 download Attribute Example</title>
<meta name="description" value="" />
</head>
<body>
Download file
</body>
</html>
in FF it is playing that mp3 rather then downloading it.
How ever other examples of download is working on that FF from other demo sites like http://davidwalsh.name/demo/html5-download.php is working.
FireFox has a default setting to play mp3 files.
You can enter about:config in FF:s address bar to access this setting.
The setting itself is named "media.windows-media-foundation.enabled"
So in the end it's a user configuration option whether to download or play - even if FireFox makes a default decision for you. I think, in FireFox, you can "long click" to download the file instead of playing it.
Looking at the specification I think the download attribute should override the FireFox option, so if this still happends I think FireFox is not behaving the way it should.

Invisible SoundCloud iframes

On pages containing multiple SoundCloud iframes, a random subset of those iframes appear invisible in both Chrome and Firefox, and instead of containing the normal SoundCloud content they contain the following HTML. The iframes affected often change with each page load, and youtube iframes on the same page are unaffected. Does anyone know the cause and/or a workaround?
UPDATE: On further examination, this is standard SoundCloud content, except div id="widget" is empty, and a manual iframe reload on an individual iframe forces it visible. Is this maybe a situation where the iframe is first loaded, then the div content is fetched with an XHR, and on a page where the browser is laboring over numerous loads on a congested network some XHR's silently time out? If so SoundCloud, could you increase your XHR timeout?
UPDATE 2: I tested this some more on 2 separate machines on the same LAN, and it looks like it might be a problem with the current version of the standard Flash plugin (11.5.502.110 on winXP--installed by auto-update Nov.9, about when this started, and 11.2.202 on Ubuntu 12.04--installed today, Nov. 27). The following information should make it reproducible. I get 100% consistent failures in Firefox on both machines, and I can toggle the failures on and off in Chrome (on both machines) by enabling the standard plugin vs. Chrome's own PepperFlash plugin. There are 100% no failures with PepperFlash, but the current version of the PepperFlash player is unusable because of impossibly choppy audio.
<html lang="en">
<head>
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>SoundCloud Widget</title>
<base target="_blank">
<link rel="stylesheet" href="/player/assets/widget-22748325.css">
<script src="/player/assets/widget-ab572693.js"></script>
<script>
require(["lib/support", "lib/flash-widget"], function(support, flashWidget) {if (support.newWidget) { require(["application"], function(A) {A.start("207ad5d2")}) } else { $(flashWidget.start); }});
</script>
</head>
<body class=" hasGoogleVoiceExt">
<div id="widget" style="height: 100%;"></div>
<div id="sm2-container" class="high_performance swf_error" style="z-index: 10000;"><embed name="sm2movie" id="sm2movie" src="/player/assets/swf-8bc33658/soundmanager2_flash9.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" wmode="transparent" haspriority="true"></div>
</body>
</html>
I just had a look at this again after giving Adobe a couple of months to get their act together, and the problem is now gone in Chrome and Firefox on XP with version 11.5.502.149 of the Flash player. I haven't checked Ubuntu, but presumably they pushed the change out there too.

audio tag not working in IE9

I'm experimenting with the audio tag.
The file below does work in Google Chrome, but not in IE9. I'm always getting "audio tag not supported". I also tried wav, flac, wma --> same result.
I suspect there might some issue with the compaitibility mode, but I don't find where to change it.
Can anyone help?
Kind regards
Georg
<html>
<head>
</head>
<body>
<audio controls="controls" src="c:\concerto.mp3" >
audio tag not supported.
</audio>
</body>
</html>
Add the HTML5 doctype to the page and it should trigger standards mode in IE9. You should also add a title element to make the document valid:
<!DOCTYPE html>
<html>
<head>
<title>Add a title</title>
</head>
<body>
<audio controls="controls" src="c:\concerto.mp3" >
audio tag not supported.
</audio>
</body>
</html>
If you're still having trouble, try adding this meta tag to the head:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
If 'audio' is working in chrome, safari, etc. but not in IE, check your meta tags. I had one that referred to IE8 which stopped the 'audio' from functioning. It was quite frustrating until I found the problem at which point the lights went on.
IE plays files in your PC if you give full path as as a URL "file://c:/concert.mp3" or only file name "concert.mp3" if the file is in the same folder as the html file. Firefox also requires full path for files in other folders while Chrome seems to add 'file://' if it is not in the URL. This is a problem if you want to use the to play local files if they are in other folders. The FileAPI does not allow you to find the path of the file.