Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
177 lines (173 sloc) 12.8 KB
<!DOCTYPE html>
<html>
<head>
<title>Firefox Remote Control - topdan.com</title>
<meta charset="UTF-8">
<meta name="description" content="Controlling your TV with your iPhone via OSX, Firefox, and an HDMI cable">
<meta name="author" content="Dan Cunning">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@itopdan">
<meta name="twitter:title" content="Firefox Remote Control">
<meta name="twitter:description" content="Controlling your TV with your iPhone via OSX, Firefox, and an HDMI cable">
<meta name="twitter:url" content="http://www.topdan.com/projects/remifi-remote-controlled-browser.html">
<meta name="og:locale" content="en_US">
<meta name="og:type" content="article">
<meta name="og:url" content="http://www.topdan.com/projects/remifi-remote-controlled-browser.html">
<meta name="og:title" content="Firefox Remote Control">
<meta name="og:description" content="Controlling your TV with your iPhone via OSX, Firefox, and an HDMI cable">
<link rel="shortcut icon" href="/assets/favicon-e45cdd6cc07e8858a985e6014e38a603.png">
<link rel="stylesheet" media="all" href="/assets/site-d30c732907c1f2982374b8bab9355d72.css"><!--[if lt IE 9]><script src='//html5shim.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
<script type="text/javascript">
if (!document.cookie || document.cookie.indexOf('tracking_off') == -1) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12957077-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
}
</script>
</head>
<body id="remifi-remote-controlled-browser">
<div class="container bg-black full-width">
<div class="row navigation">
<a id="top"></a> <a href="/projects/now-streaming-email.html" class="previous"><span class="fa fa-arrow-left">&nbsp;</span> <span class="desktop">"Now Streaming" Email</span><span class="mobile">Previous</span></a> <a href="/projects/private-photo-albums.html" class="next"><span class="desktop">Private Photo Albums</span><span class="mobile">Next</span> <span class="fa fa-arrow-right">&nbsp;</span></a>
<p><a href="/"><span class="fa fa-home">&nbsp;</span></a> &nbsp;»&nbsp;<span class="title desktop"><a href="/projects/index.html">Projects</a></span><span class="mobile"><a href="/projects/index.html"><span class="fa fa-folder-open">&nbsp;</span></a></span></p>
</div>
<div class="row bg-white">
<div class="col-md-12">
<div class="width-640 ml-auto mr-auto">
<p class="mt-05e mb-15e ta-right c-ccc">Published by Dan on Oct 31, 2014</p>
<h1 class="center of-yh mb-1e"><a href="/projects/remifi-remote-controlled-browser.html">Firefox Remote Control</a></h1>
<div class="alert b-ccc mb-0">
<p>Controlling your TV with your iPhone via OSX, Firefox, and an HDMI cable</p>
</div>
</div>
</div>
</div>
<div class="row bg-white">
<div class="col-md-12">
<div class="width-640 ml-auto mr-auto post">
<!-- post:content:start -->
<ul>
<li>
<a href="#introduction">Introduction</a>
</li>
<li>
<a href="#the-problem">The Problem</a>
</li>
<li>
<a href="#the-solution">The Solution</a>
<ul>
<li>
<a href="#embedded-web-server">Embedded Web Server</a>
</li>
<li>
<a href="#dashboard">Dashboard</a>
</li>
<li>
<a href="#searching-and-navigating">Searching and Navigating</a>
</li>
<li>
<a href="#tabs-and-windows">Tabs and Windows</a>
</li>
<li>
<a href="#mouse-and-keyboard">Mouse and Keyboard Controls</a>
</li>
<li>
<a href="#bookmarklets">Bookmarklets</a>
</li>
</ul>
</li>
<li>
<a href="#wrap-up">Wrap-Up</a>
</li>
</ul>
<h2 id="introduction"><a href="#introduction">Introduction</a></h2>
<p>I bought a big new flatscreen television around 2009 and wanted to watch streaming Internet video on it. These videos went beyond Netflix and Hulu, which produced custom integrations for game consoles and dongles. I wanted access to <strong>all Internet video</strong>, and Adobe Flash was still king, making the web browser an important part of my goal.</p>
<h2 id="the-problem"><a href="#the-problem">The Problem</a></h2>
<p>Using an adapter and HDMI cable, I connected an old Mac Mini to my television, but web browsers and Flash video players were aimed at the mouse and keyboard, which aren't practical for 10-foot interfaces (someone should have told that to <a href="http://en.wikipedia.org/wiki/Google_TV">Google TV</a>). On the other hand, I could easily spend a couple hours on my couch browsing the web on my iPhone, but I just didn't like watching videos on it. <strong>How could I display Flash video on my big TV but interact with it like my iPhone?</strong></p>
<h2 id="the-solution"><a href="#the-solution">The Solution</a></h2>
<p>I would make an interface for controlling my computer's web browser with my iPhone. As you can imagine, easier said than done.</p>
<h3 id="embedded-web-server"><a href="#embedded-web-server">Embedded Web Server</a></h3>
<p>The first step was establishing how my iPhone would communicate with my web browser. Being a web developer, HTTP seemed like the obvious answer, and I found <a href="https://addons.mozilla.org/en-US/firefox/addon/pow-plain-old-webserver/">POW (Plain Old Webserver)</a> which embedded a javascript-based HTTP server inside a Firefox plugin, so it was possible!</p>
<p>I pulled what I needed out of POW and <a href="https://github.com/topdan/remifi-firefox/blob/master/content.coffee/remifi/firefox/server.coffee">wrote a simpler version in Coffee-script</a> that responded to HTML requests and served static images, scripts, and stylesheets. <a href="http://en.wikipedia.org/wiki/Bonjour_%28software%29">Apple's Bonjour</a> made it possible to avoid exposing IP addresses: my web browser would now respond to samuel.local:4000</p>
<h3 id="dashboard"><a href="#dashboard">Dashboard</a></h3>
<p><img src="/assets/projects/remifi-remote-controlled-browser/dashboard-faeb9378670c69bf5bffc1d5bd22e616.jpg" alt="Dashboard"></p>
<ol>
<li>Back one page</li>
<li>Forward one page</li>
<li>Open "Searching and Navigating"</li>
<li>Open "Tabs and Windows"</li>
<li>Open "Mouse and Keyboard Controls"</li>
<li>Open "Dashboard"</li>
<li>Navigate to a common streaming video website</li>
</ol>
<h3 id="searching-and-navigating"><a href="#searching-and-navigating">Searching and Navigating</a></h3>
<p><img src="/assets/projects/remifi-remote-controlled-browser/searching-and-navigating-640d7d673c17ce3333a29d524ea4c6b8.jpg" alt="Searching and Navigating"></p>
<ol>
<li>Search Google</li>
<li>Go to an explicit web address</li>
</ol>
<h3 id="tabs-and-windows"><a href="#tabs-and-windows">Tabs and Windows</a></h3>
<p><img src="/assets/projects/remifi-remote-controlled-browser/tabs-and-windows-cd801174d8dded38335c80acc3393383.jpg" alt="Tabs and Windows"></p>
<ol>
<li>Switch to a different tab. Swipe to close.</li>
<li>Open the browser's current webpage on your iPhone.</li>
<li>Open a new tab.</li>
<li>Switch to a different window. Swipe to close.</li>
</ol>
<h3 id="mouse-and-keyboard"><a href="#mouse-and-keyboard">Mouse and Keyboard Controls</a></h3>
<p><img src="/assets/projects/remifi-remote-controlled-browser/mouse-and-keyboard-38312a687a7d5732aa7b7b47d50fd450.jpg" alt="Mouse and Keyboard"></p>
<ol>
<li>Move the mouse around your television.</li>
<li>Left click the mouse.</li>
<li>Move the mouse a little bit up, down, left, or right.</li>
<li>Open the Keyboard interface that lets you hit return, escape, and input text.</li>
<li>Scroll the current page up a large amount.</li>
<li>Scroll the current page down a large amount.</li>
</ol>
<h3 id="bookmarklets"><a href="#bookmarklets">Bookmarklets</a></h3>
<p>The above functionality manages the web browser, but it's still basically a 10-foot interface. By creating a <a href="http://en.wikipedia.org/wiki/Bookmarklet">bookmarklet</a>, you can push the webpage on your iPhone to your computer's browser and full-screen the video with the mouse controls. <strong>You browse 100% on your phone and watch 100% on your TV.</strong></p>
<h2 id="wrap-up"><a href="#wrap-up">Wrap-Up</a></h2>
<p>I spent some time polishing up the Firefox plugin and named it <a href="http://www.remifi.com">remifi</a> (REMote-control over wIFI), but overall lacked the drive to market or expand. Since then the streaming video options have grown: Apple TV3, Airplay, Google TV, Roku, Chromecast, and Fire TV, but <strong>remifi still sits as my way of watching Internet video and reigns as my most-used, longest-lasting personal creation</strong>:</p>
<ul>
<li>Many sites still require Adobe Flash</li>
<li>Airplay is blocked by several apps</li>
<li>Airplay drains your battery and has occasional issues multitasking</li>
<li>Apple TV content costs ~$1 more than most</li>
<li>10-foot interfaces still smell</li>
</ul>
<p class="alert alert-info mt-2e">You can review the source code on <a href="https://github.com/topdan/remifi-firefox">github</a> and watch the demostrations at <a href="http://www.remifi.com">remifi.com</a>.</p><!-- post:content:end -->
</div>
</div>
</div>
<div class="row navigation bb-ccc">
<a href="/projects/now-streaming-email.html" class="previous"><span class="fa fa-arrow-left">&nbsp;</span> <span class="desktop">"Now Streaming" Email</span><span class="mobile">Previous</span></a> <a href="/projects/private-photo-albums.html" class="next"><span class="desktop">Private Photo Albums</span><span class="mobile">Next</span> <span class="fa fa-arrow-right">&nbsp;</span></a>
<p><a href="/"><span class="fa fa-home">&nbsp;</span></a> &nbsp;»&nbsp;<span class="title desktop"><a href="/projects/index.html">Projects</a></span><span class="mobile"><a href="/projects/index.html"><span class="fa fa-folder-open">&nbsp;</span></a></span></p>
</div>
<div class="row introduction pb-2e bb-ccc mb-1e">
<div class="col-md-6 mt-2e center">
<h1 class="mt-0"><a title="Dan Cunning" class="fs-45 fw-normal shadow-silver" href="/">Dan Cunning</a></h1>
<p class="reference mt-05e"><a title="github" class="white" href="https://github.com/topdan"><span class="fa fa-github">&nbsp;</span> GitHub</a> <a title="Twitter" class="white" href="https://www.linkedin.com/in/dancunning"><span class="fa fa-linkedin-square">&nbsp;</span> LinkedIn</a> <a title="Email" class="white" href="mailto:dan@topdan.com"><span class="fa fa-envelope">&nbsp;</span> Email</a></p>
</div>
<div class="col-sm-offset-1 col-md-4 mt-2e">
<img width="75" height="75" class="img-circle fl-left mr-10" src="/assets/dan-79508ca0775ace507f1dc34d151bba0f.jpg" alt="Dan">
<p class="underline-links">I'm a <a href="/ruby-on-rails/index.html">Ruby on Rails</a> contractor from Atlanta GA, focusing on simplicity and usability through solid design. <a class="nowrap" href="/dan-cunning.html">Read more »</a></p>
</div>
</div>
<div class="row fs-12 mt-1e center">
<div class="col-md-6">
<p class="underline-links mb-1e">View Source: <a href="https://github.com/topdan/www/blob/master/projects/remifi-remote-controlled-browser.html">HTML</a> | <a href="https://github.com/topdan/www/blob/master/projects/remifi-remote-controlled-browser.json">JSON</a> | <a href="https://github.com/topdan/www/blob/master/projects/remifi-remote-controlled-browser.html.md">View</a></p>
</div>
<div class="col-md-6">
<p class="mb-1e">© 2012-2019 Dan Cunning. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>