I have set a ip camera security system in my house using a Cubieboard running Lubuntu 12.04, and some of my cameras are getting poor wifi signal. This way, since I have a constant stream from the camera to the Cubieboard, whe I try to access the camera remotelly the connection gets really bad.
The sollution I came up is having the Cubieboard to receive a stream from the camera and, using VLC, I re-stream it. This way the recording system that runs on the Cubie itself get a strem from VLC and the remote access from wherever I am gets tht VLC stream also, not overloading the wifi connection between the camera and the router.
I get this stream by using the following command:
http://user:password#camIp:camPort/videostream.cgi
This gives me a MJPEG stream that I re-stream like this:
cvlc http://user:password#camIp:camPort/videostream.cgi --sout "#standard{access=http,mux=ts,dst=:8888}"
Now I want to use a html to display all my cameras in kiosk mode using some browser. Below is the simple code I've written.
<html>
<head>
<style>
body
{
cursor:none;
}
</style>
</head>
<body>
<div style="background-color:gray; width:50%; height:50%; float:left">
<img src="http://user:password#camIp:camPort/videostream.cgi" style="width:100%; height:100%"/>
</div>
<div style="background-color:gray; width:50%; height:50%; float:right">
<img src="http://cubieIp:8888" style="width:100%; height:100%"/>
</div>
<div style="background-color:gray; width:50%; height:50%; float:left">
</div>
<div style="background-color:gray; width:50%; height:50%; float:right">
</div>
</body>
</html>
The stream I get directly from the camera is being displayed in my page, but not the one I get from the Cubieboard. I guess that must have to do with the container or codec, but as I'm not very familiar with this, I don't know how to identify the container used by the camera in order to try to use the same one on VLC. It would be nice if I could find a way to do it without having to transcode the stream, in order to save the cubie's limited processing power.
Any help will be very much appreciated!
Related
Try to render elements based on device screen size, say for example I have two DIVs (desktop and mobile) and I wanted to render desktop DIV for desktop user only and mobile so on.
<sly data-sly-test="${ANY_LOGIC_HERE}">
<div class="desktop-render">
<button type="button" aria-label="${item.Label}" class="btn btn-primary btn-desktop">Click Here</button>
</div>
</sly>
<sly data-sly-test="${ANY_LOGIC_HERE}">
<div class="mobile-render">
<button type="button" aria-label="${item.Label}" class="btn btn-primary btn-mobile">Click Here</button>
</div>
</sly>
I know there was some CSS/JS trick, but I need it through server sides. So that on-page view source can have only one div.
Before answering this, I'll remind you that it's generally bad practice to render different markup per device/user-agent. That makes your pages non-cacheable and user-agent is generally not very reliable. There are other techniques, from client-side DOM manipulation to dedicated mobile pages (which you could redirect to in case the device is a mobile).
That said, there's a helper MobileUtil that you could leverage in your Use-Object/Sling Model to determine if the device requesting the page seems to be a mobile.
Make sure to check all AEM server-side mobile APIs!
Flarum is a new-age forum software and it has a brilliant mobile web app that works incredibly well on iOS/Android's chrome. It has lots of functionality such as swiping discussions, tapping on replies etc etc.
My goal is to load that same mobile web app from an Ionic hybrid app. The first thing I tried loading the mobile web app from an iFrame. This caused a lot of problems. Initially the page wouldn't even scroll, only after a couple session of serious google-fu was I able to get the scrolling to work, that too it was very choppy.
Then I started looking at ngCordova's InAppBrowser. The problem is I can't seem to get the same functionality as loading it from Chrome within iOS/Android. Scrolling works fine, but the other functionality is missing ie swiping of discussion and many other things.
Is this a limitation within Ionic/ngCordova, or is there something that I should look at ? I've looked at the documentation and followed the steps from here
Any tips, pointers, or sample apps would be greatly appreciated. Thanks !
tl;dr: I want to load a mobile website from Ionic ngCordova's InAppBrowser, but can get the same functionality as loading it from chrome/safari on a mobile device.
JS
window.open(‘http://example.com’, ‘_system’); //Loads in the system browser
window.open(‘http://example.com’, ‘_blank’); //Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); //Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); //Loads in the Cordova web view
HTML
<ion-view title="Test Page">
<ion-content>
<div class="list">
<a class="item" href="#" onclick="window.open('http://www.nraboy.com/contact', '_system', 'location=yes'); return false;">
Open a Browser
</a>
<a class="item" href="#" onclick="window.open('http://www.twitter.com/nraboy', '_system', 'location=yes'); return false;">
Open a Twitter Client or Browser
</a>
<a class="item" href="#" onclick="window.open('https://plus.google.com/+NicRaboy', '_system', 'location=yes'); return false;">
Open a Google+ Client or Browser
</a>
</div>
</ion-content>
</ion-view>
Source https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/
Schema.org's example for a music track shows a "play button" tagged as itemprop="audio" within the itemprop="track" element.
If I'm embedding an entire iframe from a service like soundcloud (but could be any service), is it appropriate to tag the iframe as the "audio"?
<article class="track" itemprop="track" itemscope
itemtype="http://schema.org/MusicRecording">
<span itemprop="name">My Song</span>
<meta itemprop="url" content="http://mysite.com/music">
<iframe itemprop="audio" src="https://w.soundcloud.com/p..."></iframe>
</article>
I think it is.
As for me your use case matches audio property description:
An embedded audio object.
One can say, that you embed audio via iframe.
Besides audio property is of type AudioObject which is broader than just link to a page.
Description of the type says
An audio file.
But in fact this is more about audio object embedded to the page someway. Consider code example at that page where markup is done around flash player.
<div itemscope itemtype="http://schema.org/AudioObject">
<span itemprop="name"><b>12oclock_girona.mp3</b></span>
<script type="text/javascript">
var fo = new FlashObject("http://google.com/flash/preview-player.swf",
"flashPlayer_719", "358", "16", "6", "#FFFFFF");fo.addVariable("url","http://media.freesound.org/data/0/previews/719__elmomo__12oclock_girona_preview.mp3");fo.addVariable("autostart", "0");fo.write("flashcontent_719");
</script>
<meta itemprop="encodingFormat" content="mp3" />
<meta itemprop="contentURL" content="http://media.freesound.org/data/0/previews/719__elmomo__12oclock_girona_preview.mp3" />
<span class="description">
<meta itemprop="duration" content="T0M15S" />
<span itemprop="description">Recorded on a terrace of Girona a sunday morning</span>
</span>
</div>
Besides this type was derived (at least partly) from rNews. As it is said
This class contains derivatives of IPTC rNews properties. rNews is a
data model of publishing metadata with serializations currently
available for RDFa as well as HTML5 Microdata. More information about
the IPTC and rNews can be found at rnews.org.
And in rNews the goal of AudioObject is to mark
audio ... object associated with an Article.
and it doesn't matter, how (iframe, link, etc) it is done.
I'm trying to get this script to work on the test post. The goal is to have the links below the video jump to certain spots in the video. It works fine in the jsfiddle demo, but not on my post.
In my header.php, I load that script and the script it refers to:
<head>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript" src="http://wcportal.acbaldwin.info/js/vimeochapters.js"></script>
</head>
In the post that I want to use, I inserted this markup in text-only view:
<iframe width="540" height="304" frameborder="0" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" id="player_1">
</iframe>
<h2>Chapters</h2>
<ul class="chapterLinks">
<li><a class="seek" href="#" name="15">Seek to 15</a></li>
<li><a class="seek" href="#" name="30">Seek to 30</a></li>
<li><a class="seek" href="#" name="60">Seek to 60</a></li>
</ul>
Here's the test page
I'm sure I'm calling something incorrectly, but I don't know where. I'm not sure I saved the .js file correctly or if there need to be additional tags within the .js file.
I know there are more optimized and wordpress friendly ways to integrate JS, but I just need quick, dirty, and functioning for a demo. Thanks for any help!
Got the solution here from a redditor:
http://www.reddit.com/r/webdev/comments/1dn0j6/im_having_a_hard_time_getting_javascript_to_work/c9rwy85
Turns out the script needed to be in the footer. (Either that or I had a lucky coincidence while fixing an ajax issue!)
It looks like you are missing an ending } on the vimeofunction(); in the vimeochapters.js file.
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>