写在最前面

华清远见教育集团
15年专注高端IT培训
做良心教育，做专业教育，做受人尊敬的职业教育

创客学院官网：http://www.makeru.com.cn/
华清远见创客学院嵌入式课程链接：http://www.makeru.com.cn/emb
华清远见创客学院物联网课程链接：http://www.makeru.com.cn/iot

正文

据说人眼在观察景物时，光信号传人大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。也就是说，只要1s内变动24帧甚至更多的图片，就可以达到动画的效果，加上音频伴奏就是视屏了！！！

概述&系统框图

UVC摄像头+驱动+JPEG图库+mjpeg-streamer+HTML 完成了对用户远程提供视屏展示的服务。首先底层通过摄像头采集图片，通过驱动将数据流存储到JPEG图库，最终通过html交给用户的浏览器来解析，而mjpeg-streamer用来实现对这一流程的的控制。构成mjpeg-streamer视频流服务器。

MJPG简介

MJPEG全名为 "Motion Joint Photographic Experts Group"，是一种视频编码格式，
Motion JPEG技术常用与闭合电路的电视摄像机的模拟视频信号“翻译”成视频流，并存储在硬盘上。
典型的应用如数字视频记录器等。MJPEG不像MPEG，不使用帧间编码，因此用一个非线性编辑器就很容易编辑。
MJPEG的压缩算法与MPEG一脉相承，功能很强大，能发送高质图片，生成完全动画视频等；从另一个角度说，在某些条件下，MJPEG也许是效率最低的编码/解码器之一。

MJPEG与MJPG的区别：

mjpeg是视频，就是由系列jpg图片组成的视频。
MJPG是MJPEG的缩写,但是MJPEG还可以表示文件格式扩展名.

那什么 USB 摄像头适合我们这一章的教程呢？这里有几个关键字：支持UVC（免驱）；YUV 或者 MJPEG 格式输出

关于UVC摄像头

免驱动摄像头，是一种遵循视频设备类（USB Video Class，简称UVC）标准协议的摄像头产品。将符合标准的摄像头连接到符合标准的操作系统，系统就会自动为其安装驱动并进行设置，使摄像头实现真正意义上的即插即用。
uvc是一种硬件的框架结构，只有当其是通过一种标准的设计使其实现了免驱；而V4L2是一种驱动程序，其是实现系统与uvc设备等的通信。
https://blog.csdn.net/codectq/article/details/44451237#commentBox

查看摄像头的信息

确定 USB 摄像头支持 UVC （在 PC 上）

方法一

root@linux:~# dmesg

[82693.612396] uvcvideo: Found UVC 1.00 device USB2.0 PC CAMERA (1908:2311)
[82693.616323] input: USB2.0 PC CAMERA as /devices/pci0000:00/0000:00:15.0/0000:03:00.0/usb3/3-2/3-2:1.0/input/input6
[82693.618370] usbcore: registered new interface driver uvcvideo
[82693.618373] USB Video Class driver (1.1.1)

VID:PID 是057e:030a 是 (1908:2311)，在UVC 官方的文档中进一步确定是否被支持
http://www.ideasonboard.org/uvc/

OK!!

方法二

(1)确保USB摄像头在Ubuntu中被识别，查看设备节点 /dev/video*

root@linux:~# ls /dev/video*
/dev/video0

(2)安装并使用 xawtv 测试

root@linux:~# apt-get install xawtv
root@linux:~# xawtv /dev/video0 
This is xawtv-3.103, running on Linux/i686 (4.4.0-31-generic)
xinerama 0: 1362x616+0+0
vid-open-auto: using grabber/webcam device /dev/video0
v4l2: oops: select timeout

OK!!!

移植过程

添加驱动编译到内核上

内核选配添加驱动支持USB储存设备

root@linux:linux-3.14-fs4412# make menuconfig

Device Drivers --->
   [*] USB support --->
       <*> EHCI HCD (USB 2.0) support
       <*> EHCI support for Samsung S5P/EXYNOS SoC Series
       <*> USB Mass Storage support
       <*> USB3503 HSIC to USB20 Driver
       USB Physical Layer drivers --->
               <*> Samsung USB 2.0 PHY controller Driver
   SCSI device support --->
       <*> SCSI device support
       <*> SCSI disk support

Device Drivers --->
<*> Multimedia support --->
       --- Multimedia support
       *** Multimedia core support ***
       [*] Cameras/video grabbers support
       [ ] Analog TV support (NEW)
       [ ] Digital TV support (NEW)
       [ ] AM/FM radio receivers/transmitters support (NEW)
       [ ] Remote Controller support (NEW)
       [*] Media Controller API
       [*] V4L2 sub-device userspace API
       [ ] Enable advanced debug functionality on V4L2 drivers (NEW)
       [ ] Enable old-style fixed minor ranges on drivers/video devices (NEW)
       *** Media drivers ***
       [*] Media USB Adapters --->
       [*] V4L platform devices --->

Device Drivers --->
<*> Multimedia support --->
<*>Media USB Adapters --->
--- Media USB Adapters
*** Webcam devices ***
<*> USB Video Class (UVC)
[*] UVC input events device support (NEW)
<*> GSPCA based webcams --->
< > USB Philips Cameras (NEW)
<*> CPiA2 Video For Linux
< > USB ZR364XX Camera support (NEW)
< > USB Syntek DC1125 Camera support (NEW)
< > USB Sensoray 2255 video capture device (NEW)
< > USBTV007 video capture support (NEW)
*** Webcam, TV (analog/digital) USB devices ***
< > Empia EM28xx USB devices support (NEW)

Device Drivers --->
<*> Multimedia support --->
<*>V4L platform devices --->
< > STV0680 USB Camera Driver (NEW)
< > SUNPLUS USB Camera Driver (NEW)
< > T613 (JPEG Compliance) USB Camera Driver (NEW)
< > TOPRO USB Camera Driver (NEW)
< > TV8532 USB Camera Driver (NEW)
< > VC032X USB Camera Driver (NEW)
< > ViCam USB Camera Driver (NEW)
< > Xirlink C-It USB Camera Driver (NEW)
<*> ZC3XX USB Camera Driver

Device Drivers --->
<*> Multimedia support --->
<*>V4L platform devices --->
--- V4L platform devices
<*> Support for timberdale Video In/LogiWIN
<*> SoC camera support
<*> platform camera support
< > R-Car Video Input (VIN) support (NEW)
< > SuperH Mobile MIPI CSI-2 Interface driver (NEW)
< > SuperH Mobile CEU Interface driver (NEW)
[ ] Samsung S5P/EXYNOS4 SoC series Camera Subsystem driver (NEW)

编译内核并cp到tftp根目录下

root@linux:linux-3.14-fs4412# make uImage
Image Name:   Linux-3.14.0
Created:      Thu Dec  6 01:18:21 2018
Image Type:   ARM Linux Kernel Image (uncompressed)
Data Size:    3178872 Bytes = 3104.37 kB = 3.03 MB
Load Address: 40008000
Entry Point:  40008000
  Image arch/arm/boot/uImage is ready

root@linux:linux-3.14-fs4412# cp ./arch/arm/boot/uImage /tftpboot/uImage

jpeg库的移植

mjpg-stream的移植需要jpeg的库，所以我们先移植jpeg的库

1.下载源码
http://mjpg-streamer.svn.sourceforge.net/viewvc/mjpg-streamer/

2.解压

root@linux:dev_test# ls
jpegsrc.v8b.tar.gz
root@linux:dev_test# tar -xvf jpegsrc.v8b.tar.gz 
root@linux:dev_test# cd jpeg-8b/

3.配置编译

root@linux:jpeg-8b# mkdir -p /root/dev_test/mjpeg-streamer/video/jpegarm
root@linux:jpeg-8b# ./configure --prefix=/root/dev_test/mjpeg-streamer/video/jpegarm  --host=arm-none-linux-gnueabi
root@linux:jpeg-8b# make
root@linux:jpeg-8b# make install

root@linux:jpeg-8b# ls -al /root/dev_test/mjpeg-streamer/video/jpegarm/lib/
total 2312
drwxr-xr-x 2 root root    4096 Dec  6 06:37 .
drwxr-xr-x 6 root root    4096 Dec  6 06:37 ..
-rw-r--r-- 1 root root 1432698 Dec  6 06:37 libjpeg.a
-rwxr-xr-x 1 root root     953 Dec  6 06:37 libjpeg.la
lrwxrwxrwx 1 root root      16 Dec  6 06:37 libjpeg.so -> libjpeg.so.8.0.2
lrwxrwxrwx 1 root root      16 Dec  6 06:37 libjpeg.so.8 -> libjpeg.so.8.0.2
-rwxr-xr-x 1 root root  919895 Dec  6 06:37 libjpeg.so.8.0.2

4.将jpeg库cp到nfs根目录下

root@linux:jpeg-8b# cp /root/dev_test/mjpeg-streamer/video/jpegarm/lib/* /nfs/rootfs/lib/

移植mjpg-streamer

1.下载源码
官网：https://sourceforge.net/projects/mjpg-streamer/

root@linux:dev_test# svn checkout https://svn.code.sf.net/p/mjpg-streamer/code/ mjpg-streamer-code

root@linux:mjpg-streamer-code# tree -L 1 ./mjpg-streamer-code/

├── doc
├── mjpeg-client     #分别有 linux和windows 的客户端 
├── mjpg-streamer    #目录下提供了 的执行程序和各个输入输出设备组件
├── mjpg-streamer-experimental
├── udp_client
└── uvc-streamer     #目录下提供了 uvc-streamer的可执行目录 
6 directories, 0 files

2.修改源码

root@linux:dev_test# cd ./mjpg-streamer-code/mjpg-streamer
root@linux:mjpg-streamer# pwd
/root/dev_test/mjpg-streamer-code/mjpg-streamer

root@linux:mjpg-streamer# vim ./plugins/input_uvc/Makefile
 14 #CFLAGS += -O1 -DLINUX -D_GNU_SOURCE -Wall -shared -fPIC
 15 CFLAGS += -O1 -DLINUX -D_GNU_SOURCE -Wall -shared -fPIC -I /root/dev_test/mjpeg-streamer/video/jpegarm/include


 33         #$(CC) $(CFLAGS) -o $@ input_uvc.c v4l2uvc.lo jpeg_utils.lo dynctrl.lo $(LFLAGS)
 34         $(CC) $(CFLAGS) -L /root/dev_test/mjpeg-streamer/video/jpegarm/lib/  -o $@ input_uvc.c v4l2uvc.lo jpeg_utils.lo dynctrl.lo $(LFLAGS)

3.编译生成*.so文件和可执行文件mjpg_streamr

root@linux:mjpg-streamer# make CC=arm-none-linux-gnueabi-gcc
root@linux:mjpg-streamer# ls *.so
input_file.so  input_testpicture.so  input_uvc.so  output_file.so  output_http.so  output_udp.so
root@linux:mjpg-streamer# ls mjpg_streamer
mjpg_streamer

4.将前面编译生成文件，还有start.sh ./www/ 搬移到nfs根目录中

root@linux:mjpg-streamer# mkdir /nfs/rootfs/mjpg-streamer
root@linux:mjpg-streamer# cp -raf *.so /nfs/rootfs/mjpg-streamer/
root@linux:mjpg-streamer# cp -raf mjpg_streamer /nfs/rootfs/mjpg-streamer/
root@linux:mjpg-streamer# cp -raf start.sh www/ /nfs/rootfs/mjpg-streamer/

5.测试(开发板)

[root@farsight ]# cd boa
[root@farsight boa]# ls
boa            boa.conf.back  cgi-bin        mime.types
boa.conf       boa_indexer    log            www
[root@farsight boa]# ./boa
[root@farsight boa]# cd ../mjpg-streamer/
[root@farsight mjpg-streamer]# ./start.sh

HTML

将对服务器url请求,IP配置为服务器的IP地址，这里是192.168.9.9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>摄像头</title>
</head>

<body>
<body background="./images/huaqing002.jpg">
<table width="652" height="60" background="./images/huaqing1.png"  border="0" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table><tr>
<table width="652" height="35" background=""  border="0" align="center">
  <tr>
    <td width="328"><div align="center">摄像头</div></td>
    <td width="314"><div align="center"><a href="main1.html">回主页</a></div></td>
  </tr>
</table><tr>
  <table width="500"  align="center" height="540" border="0">
  <tr>
    <td height="500"><img src="http://192.168.9.9:8080/?action=stream"/></td>
    </tr>
  <tr>
    <td height="34"><form id="form3" name="form3" method="post" action="cgi-bin/capture1.cgi"><input name="store" type="hidden" value="1" />
      <table width="500" border="1" bgcolor="#CCFFFF" bordercolor="#5500FF">
        <tr>
          <td width="57">张数:</td>
          <td width="195"><p>
            <label>
              <input type="radio" name="mode" value="1" id="mode_0" />
              1</label>
            
            <label>
              <input type="radio" name="mode" value="3" id="mode_1" />
              3</label>
            
            <label>
              <input type="radio" name="mode" value="5" id="mode_2" />
              5</label>
            
            <label>
              <input type="radio" name="mode" value="7" id="mode_3" />
              7</label>
            
            <label>
              <input type="radio" name="mode" value="9" id="mode_4" />
              9</label>
            <br />
            </p></td>
          <td width="226">
            <div align="center">
              <input type="submit" name="button3" id="button3" value="抓拍" />&nbsp;&nbsp;&nbsp;<a href="cgi-bin/picture1.cgi">历史照片</a></div></td>
          </tr>
        </table>
    </form></td>
  </tr>
  </table>

</body>
</html>

最终实现

在我预料中的效果是这样的

然而实际效果却是这样的（捂脸）

可能是角度问题吧~~~

错误总结

问题：第一次运行发现页面没有图像显示，确定html文件中的ip地址是目标机
原因：市面上大部分摄像头都是支持YUV的，而不是JPEG的。
解决方法：由于mjpg-stream支持JPEG和YUV两种格式，所以只需修改start.sh，在输入中加入 ” - y “
假如原来是./mjpg_streamer -i “./input_uvc.so ” -o “./output_http.so -w ./www”，则改为
./mjpg_streamer -i “./input_uvc.so -y” -o “./output_http.so -w ./www”即可。

mjpeg-streamer视频图像的显示