编程:用来采集视频的mjpg-stream

树莓派使用MJPG-Streamer实现网络监控


转载自:http://blog.sina.com.cn/s/blog_abd39cc70102vrdt.html

1.         先更新apt的列表:

sudo apt-get update  

sudo apt-get upgrade

重启系统后,

sudo raspi-config

移动到第五项“Enable Camera”,回车进入,按tab键切换到“Enable”回车确认。回到主菜单,tab键切换到“Finish”回车确认。树莓派会自动重启。

2.         安装依赖库

安装libjpeg的dev版本(注:下面所有安装过程中出现是否继续时,统一选择继续:Yes)

sudo apt-get install libjpeg62-dev

sudo apt-get install libjpeg8-dev

3.         下载mjpg-streamer

wget https://github.com/jacksonliam/mjpg-streamer

或者直接到网站下载zip安装包mjpg-streamer-master.zip

使用unzip mjpg-streamer-master.zip解压

4.         编译mjpg-streamer

安装cmake

sudo apt-get install cmake

切换到mjpg的路径下:

cd  ~/mjpg-streamer-master/mjpg-streamer-experimental

        sudo make clean all

5.         安装mjpg-streamer

sudo  cp  mjpg_streamer  /usr/local/bin

sudo  cp  output_http.so  input_uvc.so  /usr/local/lib/

sudo  cp  -R  www  /usr/local/www

6.         开启mjpg-streamer

LD_LIBRARY_PATH=/usr/local/lib  mjpg_streamer -i “input_uvc.so” -o “output_http.so -w /usr/local/www”

或者LD_LIBRARY_PATH=/usr/local/lib mjpg_streamer -i “./input_uvc.so -d /dev/video0 -r 320*240 -f 12″ -o ” ./output_http.so  –p  8090  –w  /usr/local/www “

或者添加到path路径export LD_LIBRARY_PATH=/opt/mjpg-streamer/

(-r后是分辨率参数,-f后面是帧率,请根据您的摄像头参数进行调整)8090可以自己定义

在浏览器http://:8080  打开监控界面

在树莓派上搭建WordPress

在搭建WordPress之前,必须安装LAMP等PHP运行环境。可以参考我上一篇博文:用树莓派建LAMP+花生壳访问(非常详尽)[原创]

本文在上一篇的基础之上开始。

一、下载和解压wordpress

方法1:

可以很简单的使用这行代码安装wordpress:

安装完成后,把它与WEB服务器联系起来:

以上两步也可以自己手动安装,见方法2,方法3。

方法2:

可以在 http://cn.wordpress.org 上下载wordpress后解压到/var/www/html目录中,注意事先开启读写权限。

方法3:

手动利用命令下载、解压、复制或移动

下载:

解压:

用命令解压后,会在pi用户的home目录会生成一个wordpress目录。注意,它并不是在/var/www/html目录中。因此,我们需要做一个链接,可以使用 sudo ln -s /usr/share/wordpress /var/www/wordpress 将它们链接到一起,或者直接把文件复制到/var/www/html目录中:

CSS3 @font-face详细用法[转载]

转载自:http://www.phpvar.com/archives/2663.html

@font-faceCSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定会有人问,这样的东西IE能支持吗?我告诉大家@font-face这个功能其实早在IE4就支持了,你肯定会感到惊讶。如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。

首先我们一起来看看@font-face的语法规则:

取值说明

  1. YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体(下载回来的叫什么字体,这里就填什么字体名),他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”
  2. source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
  3. format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,svg等;
  4. weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

兼容浏览器

赞助商链接

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:

Markdown语言简介

转载自少数派:http://sspai.com/25137

认识与入门 Markdown

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

一、认识 Markdown

在刚才的导语里提到,Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,而不像一般我们用的字处理软件 WordPages 有大量的排版、字体设置。它使我们专心于码字,用「标记」语法,来代替常见的排版格式。例如此文从内容到格式,甚至插图,键盘就可以通通搞定了。目前来看,支持 Markdown 语法的编辑器有很多,包括很多网站(例如简书)也支持了 Markdown 的文字录入。Markdown 从写作到完成,导出格式随心所欲,你可以导出 HTML 格式的文件用来网站发布,也可以十分方便的导出 PDF 格式,这种格式写出的简历更能得到 HR 的好感。甚至可以利用 CloudApp 这种云服务工具直接上传至网页用来分享你的文章,全球最大的轻博客平台 Tumblr,也支持使用 Mou 这类 Markdown 工具进行编辑并直接上传。

知识:浏览器的渲染原理简介[转载]

转载自:酷壳网 http://coolshell.cn/articles/9666.html

看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,

1)这篇文章太长了,阅读成本太大,不能一口气读完。

2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助。

所以,我准备写下这篇文章来解决上述两个问题。希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说,先来看个图:

从上面这个图中,我们可以看到那么几个事:

1)浏览器会解析三个东西:

  • 一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
  • CSS,解析CSS会产生CSS规则树。
  • Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意:

  • Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。
  • CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
  • 然后,计算每个Frame(也就是每个Element)的位置,这又叫layout和reflow过程。

3)最后通过调用操作系统Native GUI的API绘制。