Created
April 3, 2013 14:02
-
-
Save legege/5301477 to your computer and use it in GitHub Desktop.
This is an AngularJS directive for MJPEG streams. This directive uses an iframe to stop the browser from loading the MJPEG stream. This is useful for Chrome: https://code.google.com/p/chromium/issues/detail?id=73395
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <mjpeg url="videoUrl"></mjpeg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('myApp.directives', []) | |
| .directive('mjpeg', function() { | |
| return { | |
| restrict: 'E', | |
| replace: true, | |
| template:'<span></span>', | |
| scope: { | |
| 'url': '=' | |
| }, | |
| link: function (scope, element, attrs) { | |
| scope.$watch('url', function (newVal, oldVal) { | |
| if (newVal) { | |
| var iframe = document.createElement('iframe'); | |
| iframe.setAttribute('width', '100%'); | |
| iframe.setAttribute('frameborder', '0'); | |
| iframe.setAttribute('scrolling', 'no'); | |
| element.replaceWith(iframe); | |
| var iframeHtml = '<html><head><base target="_parent" /><style type="text/css">html, body { margin: 0; padding: 0; height: 100%; width: 100%; }</style><script> function resizeParent() { var ifs = window.top.document.getElementsByTagName("iframe"); for (var i = 0, len = ifs.length; i < len; i++) { var f = ifs[i]; var fDoc = f.contentDocument || f.contentWindow.document; if (fDoc === document) { f.height = 0; f.height = document.body.scrollHeight; } } }</script></head><body onresize="resizeParent()"><img src="' + newVal + '" style="width: 100%; height: auto" onload="resizeParent()" /></body></html>'; | |
| var doc = iframe.document; | |
| if (iframe.contentDocument) { doc = iframe.contentDocument; } | |
| else if (iframe.contentWindow) { doc = iframe.contentWindow.document; } | |
| doc.open(); | |
| doc.writeln(iframeHtml); | |
| doc.close(); | |
| } else { | |
| element.html('<span></span>'); | |
| } | |
| }, true); | |
| } | |
| }; | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice code! There is one bug. When I use this this code, I cannot scroll in parent windows.
Change
if (fDoc === document) { f.height = 0; f.height = document.body.scrollHeight; }with
if (fDoc === document) { f.height = document.body.scrollHeight; }Cheers!