How HomeCam Registers NDN Prefixes?

Junxiao Shi

2017-07-17

HomeCam, a browser-based home surveillance camera, is one of my major side projects during the past few years. My last post gave an overview on the overall architecture and various components of HomeCam. I mentioned that HomeCam delivers pictures via Named Data Networking (NDN), which provides better scalability because the camera only needs to serve each picture once even if there are multiple viewers, and the network takes care of the distribution.

Both HomeCam viewers and cameras connect to the global NDN testbed network via WebSockets. A viewer sends Interests to the network to request a picture from a specific camera identified by part of the Interest name. The network forwards the Interests to the named camera, and the camera responds with Data packets that contain the picture. But how does the network know where the camera is?

The camera must register its prefix onto the NDN testbed network.

For a regular end host running the NDN Forwarding Daemon (NFD), you may let the world reach your NFD via auto prefix propagation. This procedure involves sending a prefix registration command to the network, which causes the router to add a route toward the end host. A requirement is that the prefix registration command must be signed by a key trusted by the network.

HomeCam camera is a browser-based application that directly connects to a testbed router, and there is no NFD running locally to do auto prefix propagation for us. However, HomeCam can still have a route added toward the camera by sending a prefix registration command.

(read more)

How HomeCam Works?

Junxiao Shi

2017-07-02

HomeCam, a browser-based home surveillance camera, is one of my major side projects during the past few years. HomeCam allows you to capture pictures via the webcam on a laptop or smartphone, and view real-time images from a different device. No specialized hardware or software installation is needed: HomeCam works directly in a web browser. This article gives an overview of the web technologies that enable HomeCam.

If you have not used HomeCam, try it today!

Functionality Review and General Workflow

The HomeCam web app can operate in either viewer or camera mode. To enter either mode, the user is required to specify a "camera name", which serves as an identifier. Each camera should have a distinct camera name. Any number of viewers can be active at the same time, and they will retrieve real-time pictures from the camera with the same camera name.

Under the hood, this works in three steps:

(read more)

双层动态图片保护Email地址

Junxiao Shi

2010-06-20 last updated 2022-06-12

Email是最重要的通讯工具之一。滥发垃圾信息者会利用一切可能的通讯工具，把小广告送到你的手中。发送Email的成本极为低廉，使得Email倍受垃圾信息发送者的青睐。发送垃圾邮件的第一步，是收集足够多的有效电子邮件地址；而收集Email地址的方法，主要就是查询目录、使用网页爬虫两种。

通过查询目录收集Email地址，主要是查询各类电子黄页、网站备案资料、域名WHOIS信息等。例如WHOIS yoursunny.com，可以查询到域名注册者的Email地址（有些WHOIS结果页面会用各种方式保护Email地址，但大部分并不会进行保护）。根据规定，域名WHOIS信息必须包含有效的Email地址，因此规避这种收集的唯一方法是使用Private Domain Registration服务，令WHOIS信息中包含的Email地址不断变化。

使用网页爬虫收集Email地址，是指垃圾邮件发送者编写程序抓取互联网上的网页，在网页文本中提取形似Email地址的字符串。比如某网页包含了 someone@example.com 这个Email地址，爬虫程序抓取该网页时就可以用正则表达式找到这个地址。本文主要讨论针对这种收集方法的防范。

防范网页爬虫抓取Email地址的传统方法

使用变体Email地址

(read more)

无闪烁、SEO友好的完美图像替换（pFIR_improved）

Junxiao Shi

2009-01-05

图像替换是网站前端设计中经常使用的技巧之一。本文在pFIR图像替换技术的基础上，提出了一个改进版本。

什么是图像替换（FIR）？

考虑这样一种情况：<h4>Image Replacement</h4>，效果：

Image Replacement

现在希望用一张图片替换掉文字内容，使得网页更加丰富多彩（很多情况下是为了表现出特殊字体效果）。做到这种效果：

(read more)

用JavaScript检测浏览器是否打开图像显示

Junxiao Shi

2009-01-02

JavaScript能不能检测浏览器是否打开图像显示？看似一个非常简单的问题，但是网上却很难查到相关资料。大部分用户不会关闭图像显示，但是仍有少数非宽带用户关掉了图像。为了使网站变得更加人性化、具有更好的可用性，Web前端工程师有时需要通过JavaScript检测“显示图像”功能是否打开。

方法一：图像尺寸法

未指定width、height属性的<img>标签，在图片成功下载的情况下能从width、height属性中取得图片的真实尺寸，而图片功能未开启时则是一个固定的、比较小的尺寸(相当于那个“红叉”)。为此，可以插入一张尺寸较大的图片，然后读取width属性，如果尺寸与原图不符说明图片显示没有开启。

<!-- 插入Google的logo，图片宽度应为168px -->
<img id="__ImageSupport" src="https://www.google.com/images/nav_logo4.png"
  style="position:absolute;visibility:hidden;z-index:-1;" alt=""/>
<script type="text/javascript">//<![CDATA[
function ImageSupport() {
  var m=document.getElementById('__ImageSupport');
  if (m && m.width > 100) return true;
  else return false;
}
//]]></script>

演示：图像尺寸法检测浏览器是否打开图像显示

(read more)