智能无线高清摄像机系统设计说明书

XXXXIVPAGE智能无线高清摄像机系统设计摘要随着各种现代化智能设备的普及，人们对于拍照、摄像的需求越来越高。但是如今的摄像机虽然拍摄功能强大，但是因为设计不够精巧，使用场景限制较大。数据传输也很复杂，需要先写到储存卡并导入到电脑才能进行观看。本文利用Linux系统的RaspberryPi开发平台，整合多个开源模块，设计出了一款精巧但却实用的无线高清摄像机系统。其搭载了一款500像素摄像头并能进行1080p视频拍摄和处理，并且同时仅使用普通移动电源进行供电即可。系统内部使用hostapd建立wifi热点，crtmpserver作为视频流服务器，ffmpeg作为视频转发器。另外，附带的使用Django和MySQL开发的视频直播系统，能够方便地使用户在各种平台上利用浏览器观看摄像头拍摄的内容。关键词：Linux，RaspberryPi，无线高清摄像头，Django

SmartWirelessHigh-DefinitionCameraSystemDesignAbstract Withthepopularityofallkindsofmodernsmartdevices,people’sdemandfortakinggreatqualityofpicturesandvideosisgettinghigherandhigher.Buttoday’svideocamera’sshootingability,althoughpowerful,butbecausethedesignisnotsophisticatedordedicated,itcannotfacemanylimitedusagescenarios.Datatransferisalsoverycomplicated,itneedstowritetothememorycardfirstandthenexporttothecomputerbeforeviewing.Inthispaper,theRaspberryPiLinuxdevelopmentplatformisused,integratinglotsofopensourcemodules,devisedasophisticatedyetpracticalwirelessHDcamerasystem.Itispoweredbya500M-pixelcameraandiscapableof1080pvideocaptureandprocessing,anditcanbecarriedoutusinganordinarymobilepowersupply.Internally,thesystemuseshostapdtoestablishaWIFIhotspot,crtmpserverasavideostreamingserver,ffmpegasthevideorepeater.Inaddition,thesystemcamewithavideobroadcastsystemwhichisdevelopedwithDjangoandMySQL,itcaneasilyenableuserstousealmostanybrowsersonavarietyofplatformstoviewthecontentfromthecamera.Keywords：Linux,RaspberryPi,wirelesshigh-definitioncamera,Django

目录第一章前言 51.1课题研究背景 51.2国内外研究现状和发展趋势 51.3论文的创新点及结构安排 6第二章树莓派开发平台 72.1RaspberryPi开发板架构概述 72.2硬件概览 72.3SoC 8图1.2BCM2835架构图 8Fig1.2ArchitectureofBCM2835 82.4VideoCoreIVGPU 82.5软件概述 82.6Raspbian 92.7OpenMAX 9第三章网络配置 113.1SSH 113.2三种网络配置方式 113.3使用PING命令 113.4WIFI热点搭建 123.4.1RTL8192cu芯片 123.4.2安装及配置hostapd 123.4.3安装及配置uDHCP 13第四章摄像头 144.1OV5647结构 144.2CMOSorCCD 144.3安装摄像头 154.4raspivid输出视频流 15第五章视频流服务器 165.1RTMP 165.2crtmpserver 165.3H.264编码 165.4ffmpeg 16第六章视频直播系统 186.1Django 186.2MySQL 196.3H5+CSS3+JS 196.4表设计 196.5后台逻辑 206.6前台设计 21第七章总结 22PAGE18第一章前言1.1课题研究背景 摄像机是一种视频拍摄设备，在过去由于成本高昂，往往只能被一些专业机构比如电视台、公司和医院等使用。近年来，随着硬件和软件技术的提高，尤其是互联网技术的快速发展，大多数移动设备都配备上了高清晰度的摄像头，能进行高清视频拍摄。 然而从适用领域和范围来看，无论是以往的有线摄像机，还是现如今在手机上的摄像头，均存在在某些特定的使用环境下不够灵活、方便的缺点。比如在狭小的空间，地形复杂的野外，或者需要拍摄的对象需要将摄像头摆在操作者很难直接接触的地方时，传统庞大的摄像机和需要用户近距离操作的手机应对这样的场景都显得力不从心了。如何将视频信号从摄像头端传到显示终端处理得到图像，或者通过现有无线网络实现远程传输？本设计的无线高清摄像头便能满足这样的需求，其采用树莓派作为开发平台，搭载性能强劲的VideoCoreIV视频处理模块，高速RTL8192cuWIFI芯片，依托一款利用Django和MySQL制作的网页直播系统。同时本设计采用H.264高效率的视频压缩编码，使数据传输带宽以及储存资源占用都达到了极低的水平，最终打造出一套高性价比的智能无线高清摄像机解决方案。1.2国内外研究现状和发展趋势 视频拍摄技术已存在了相当长的时间，随着电子、通信技术的发展，视频拍摄技术也得到了快速发展，其主要经历了三个阶段：模拟视频拍摄，数字视频拍摄和网络视频拍摄[1]。 现如今市场上也有许多无线摄像头问世，但是它们功能单一，平台封闭性强，比如只能使用官方的软件才能进行观看。另外还有扩展性较差的问题，而本设计因为采用了树莓派开发板，有众多的可扩展接口以及强大易用的python作为原生开发语言[2]，对于以摄像机为中心的物联网产品开发也有相当大的帮助。 在未来，摄像机技术的发展必然是往功能多元性方向持续进步，这意味着无论是从硬件还是软件角度，都要保持开放的姿态。本设计从最开始的规划期间就考虑到了这一点，所采用的技术都是开源而且扩展性特别强的，这对以后的进一步的深度开发，诸如机内计算、特效处理等，都奠定了基础。1.3论文的创新点及结构安排 本论文主要有两点技术上的创新点：一是采用比较新的树莓派开发板作为开发平台；二是使用WEB2.0技术来展示视频。这样做由于采用的最新的硬件、软件技术，给视频处理带来了极大的性能提高，同时也提高了用户使用体验度。 本论文的文章结构如下： 第一章为绪论部分，介绍了本课题的研究意义，无线摄像头的发展趋势以及本论文的创新点。 第二章主要对本设计的开发平台树莓派的硬件和软件架构做了介绍。 第三章讲解了树莓派与开发电脑如何建立网络通信，这在开发过程中主要用于命令传输，在使用过程中，主要用于视频流的传输。 第四章主要介绍了本设计所使用的OV5647摄像头模块安装和使用的方法。 第五章是视频流服务器的各软件模块的介绍和搭建过程解释。 第六章阐述了本设计WEB直播系统开发过程，从后端Django、MySQL到前端H5、CSS3和JS，其开发细节都做了详尽的介绍。 第七章是总结，主要是总结本人在本设计整个开发过程中的心得体会。

第二章树莓派开发平台2.1RaspberryPi开发板架构概述 树莓派(RaspberryPi)是一款只有一张信用卡大小,搭载ARM架构处理器的单板计算机。树莓派作为一款极其廉价的单板计算机不仅具有USB接口、快速以太网接口、SD卡扩展接口及HDMI高清视频输出接口这类常规接口,还具有一个26Pin的插座,该插座集合了GPIO,I2C,SPI接口，通过该插座可以连接各类传感器[3-6]。 树莓派可以搭载Linux操作系统,使用C语言或者python语言编写简单的程序代码,可轻松连接各类支持GPIO或者I2C接口的传感器。加之树莓派本身硬件强大的计算能力，在其内可以部署许多复杂的服务。本课题便是利用Django搭建了一个进行视频内容分发的web服务器。 同时，由于树莓派的流行，其开发者社区也是相当活跃，官方往往听取社区人士的意见，对硬件进行版本迭代，本课题实验所用的便是树莓派ModelB版本。2.2硬件概览 本开发板备一枚700MHz出产的ARM11架构的BCM2835处理器，256MB内存，使用SD卡作为储存媒介，且拥有一个Ethernet接口，两个USB接口，以及HDMI和RCA端子输出。另外，本设计还添加了官方出产的OmniVisionOV5647500万像素摄像头。图1.1树莓派板上各模块排版Fig1.1ArrangementofModulesontheRaspberryPi2.3SoC SoC(SystemonChip)是片上系统之意，树莓派的SoC采用的是博通的BCM2835。图1.2BCM2835架构图Fig1.2ArchitectureofBCM28352.4VideoCoreIVGPU VideoCore是博通公司设计的一套低功耗移动多媒体处理架构。它两维的DSP架构使其能在维持低功耗的同时，非常自如和有效地对多媒体数据进行硬解码和硬编码。 树莓派是用的是VideoCoreIV架构的处理器，相对第三代，最大的改进便是对于1080p视频的编、解码支持。此外，其还能在极低功耗下支持更高分辨率摄像头以及快速的2D、3D图形绘制，最出名的便是在诺基亚808PureView4100万像素手机上的应用。2.5软件概述 开发板操作系统采用开源的Linux系统，比如Debian、ArchLinux，官方团队还开发了一套基于Debian的定制操作系统Raspbian，也正是本设计所使用的。依靠SoC上强大的VideoCoreIVGPU以及系统底层的Openmax库，开发板能处理高达1080p清晰度的视频流。图1.3树莓派软件架构Fig1.3RaspberryPiSoftwareArchitecture2.6Raspbian 刚购买回来的树莓派是没有预装操作系统的，这时候需要使用者下载一个OS到SD卡上，插到树莓派上重启完成安装。官方推荐的系统也是本设计所安装的系统叫做Raspbian，它是由麦克·汤姆森和彼得·格林两人最先发起制作的基于Debian系统的专门适配树莓派硬件的OS。其最大的特色是针对树莓派的浮点单元（Floating-pointUnit）进行了全面的优化，而浮点单元在机器人技术以及其他需要大量数学计算的应用当中都是至关重要的，此外，两人还完成了从Debian系统上移植19000组软件包至Raspbian的壮举。这些都为树莓派如今的流行打下了坚实的基础。 Raspbian提供了两种方式操作树莓派，一种是如果Windows桌面一样视窗式操作；另一种便是linux通常的操作方式命令行。对于开发人员来说，后者无疑是最方便的，本设计在实验的过程中，也几乎都是用命令行来进行操作。2.7OpenMAX 树莓派能支持1080p视频的实时处理，一是得益于强大的VideoCoreIVGPU，二便是来自系统底层OpenMAX库的帮助。OpenMAX（OpenMediaAcceleration）开放多媒体加速层，是一个不需要授权、跨平台的软件抽象层，以C语言实现的软件接口，用来处理多媒体。它是由KhronosGroup提出的标准，也由他们来维持，目标在于创造一个统一的接口，加速大量多媒体资料的处理。OpenMAX库能够充分发挥GPU的计算性能，并且开放的标准，使开发者能进行更多有效率的跨平台开发。OpenMAX架构一共分为三层： OpenMAXAL:ApplicationLayer，应用和多媒体中间层的标准接口，使得应用在多媒体接口上具有了可移植性。 OpenMAXIL:IntegrationLayer，作为再嵌入式和移动该设备中使用的audio，video，imagecodecs的底层接口。使得AP和多媒体框架可以以同意的方式访问多媒体的codec和支持组件。Codec可以是硬件和软件的任意组合，对用户透明。 OpenMAXDL:DevelopmentLayer，开发者需要调用的层。

第三章网络配置 由于需要始终在开发板进行线上调试，所以开发电脑必须时刻与开发板保持连接，而这只需要做到电脑和开发板在同一局域网即可，之后通过SSH的方式进行登录树莓派进行命令行操作。3.1SSH SSH（SecureShell）由IETF的网络工作小组（NetworkWorkingGroup）所制定。SSH为建立在应用层和传输层基础上的安全协议。SSH是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议。利用SSH协议可以有效防止远程管理过程中的信息泄露问题。SSH最初是UNIX系统上的一个程序，后来又迅速扩展到其他操作平台。SSH在正确使用时可弥补网络中的漏洞。SSH客户端适用于多种平台。几乎所有UNIX平台以及其他平台，都可运行SSH。 SSH使用起来也非常简单，常用的命令格式是“ssh‘username’@‘ip’”，之后便会提示输入密码，输入正确的密码之后，便可成功登录进行操作了。3.2三种网络配置方式 一、将开发电脑和开发板的以太网端口用一根网线连接，组成一个一对一的网络。 二、配置开发板interfaces文件，保证树莓派上的wifi模块和开发电脑连入同一台路由器，使它们处于同一局域网内。 三、安装必要组件后，使开发板发射wifi热点信号，让开发电脑能够连接并建立一个一对一的局域网。 按照上述的方法配置好网络之后，便可在开发电脑上使用ssh开发板的ip地址，登陆到开发板上进行各种操作。3.3使用PING命令 开发电脑自带的PING(PacketInternetGroper)命令是最常用的网络连接诊断工具之一，其几乎默认安装于所有的windows和linux操作系统中。Ping发送一个ICMP(InternetControlMessagesProtocol）即因特网信报控制协议；回声请求消息给目的地并报告是否收到所希望的ICMPecho（ICMP回声应答）。它是用来检查网络是否通畅或者网络连接速度的命令。作为一个需要与网络打交道开发者来说，ping命令是第一个必须掌握的DOS命令，它所利用的原理是这样的：利用网络上机器IP地址的唯一性，给目标IP地址发送一个数据包，再要求对方返回一个同样大小的数据包来确定两台网络机器是否连接相通，时延是多少。我们需要经常使用它来判断开发电脑和树莓派是否相互可见，俗称能够“ping通”，只要成立，进行SSH操作一般就没问题了。3.4WIFI热点搭建 WIFI热点搭建的好处是，在某些使用场景下，比如野外，带网线和路由器是很不方便的。这时候如果能让树莓派自身发出WIFI热点，我们就能很容易地使用各种设备诸如电脑、手机甚至平板连接其WIFI以跟其进行数据交换了。3.4.1RTL8192cu芯片 本设计使用的WIFI网卡使用的是RealtekRTL8192cu芯片，这是官方推荐的树莓派能够兼容的芯片之一。其能支持IEEE802.11b/g/n无线通信标准，最高带宽能够达到300Mbps（但本设计所使用的网卡只能达到128Mbps）。本设计在开发板仅有的两个USB接口上都安装了一个WIFI网卡，其目的是保证收、发信号的稳定。一块用来发送WIFI热点，一块用来接受路由器信号，这样开发选择余地更大，用户使用时可用的场景也能增多。比如在没有路由器的郊外，依靠开发板自己产生的WIFI热点，用户也能连接开发板进行操作；在家如果已经有无线路由器了，也可以让树莓派连接路由器。图3.1树莓派上安装的WIFI模块Fig3.1WIFIModuleInstalledonRaspberryPi3.4.2安装及配置hostapd 开启热点需要hostapd这款软件，其能使WIFI网卡切换为master模式，模拟AP（也就是路由器功能，俗称“软AP”）。Hostapd的功能就是作为AP的认证服务器，负责控制管理stations(通常可以认为带无线网卡的PC)的接入和认证。 通过Hostapd可以将无线网卡切换为AP/Master模式，通过修改配置文件，可以建立一个开放式的(不加密)的，WEP，WPA或WPA2的无线网络。并且通过修改配置文件可以设置无线网卡的各种参数，包括频率，信号，beacon包时间间隔，是否发送beacon包，如果响应探针请求等等。还可以设置mac地址过滤条件等。 而官方系统中的驱动对软件源上的版本兼容性不好，解决方法是下载官方的linux驱动包（内含hostapd），进行编译，从而得到对系统兼容的版本。 另外，此wifi模块会出现长时间不用之后会进入睡眠模式的问题，这样会影响我们电脑端的连接。为避免这种情况，我们需要关闭芯片的节能模式，需要在/etc/modprobe.d/8912cu.conf编辑如下命令： options8912curtw_power_mgnt=0rw_enusbss=03.4.3安装及配置uDHCP Hostapd的功能就是作为AP的认证服务器，当客户端连上热点之后，还需要对其分配IP地址和子网掩码，这样才能组成一个有效的通信局域网络，而这个过程遵守的就是DHCP（DynamicHostConfigurationProtocol）动态主机配置协议。本设计采用的是uDHCP这款开源的DHCP服务器。 并将此脚本授予运行权限，添加到开机启动项中，这样开机pi就会开启一个名为“Raspberry_Pi_AP”WIFI热点，让电脑能够连接它；或者自己去连接一个路由器。

第四章摄像头4.1OV5647结构 本设计采用的摄像头型号为OmniVisonOV5647，它是一款具有500万像素的静态图片和1080p全高清视频拍摄能力的CMOS摄像头，其内部模块联系图如下：图4.1OV5647架构图Fig4.1ArchitectureofOV5647 本设计不关注其底层的实现，只需要使用官方系统内自带的raspivid视频录制模块，导出视频流，就能满足需求。4.2CMOSorCCD CMOS(ComplementaryMetal-OxideSemiconductor）和CCD(ChargeCoupledDevice）一样同为在数码相机中可记录光线变化的半导体。CMOS的制造技术和一般计算机芯片没什么差别，主要是利用硅和锗这两种元素所做成的半导体，使其在CMOS上共存着带N（带–电）和P（带+电）级的半导体，这两个互补效应所产生的电流即可被处理芯片纪录和解读成影像。 CCD的优势在于成像质量好，但是由于制造工艺复杂，只有少数的厂商能够掌握，所以导致制造成本居高不下，特别是大型CCD，价格非常高昂[7]。在相同分辨率下，CMOS价格比CCD便宜，但是CMOS器件产生的图像质量相比CCD来说要低一些。曾几何时，市面上绝大多数的消费级别以及高端数码相机都使用CCD作为感应器；CMOS感应器则作为低端产品应用于一些摄像头上，若有哪家摄像头厂商生产的摄像头使用CCD感应器，厂商一定会不遗余力地以其作为卖点大肆宣传，甚至冠以“数码相机”之名。但如今随着CMOS技术的发展，其风头已经完全盖过了CCD，尤其是在OV5647这样的芯片上，CMOS更加适合，因为CMOS针对CCD最主要的优势就是非常省电，这对于小型移动设备来讲是相当重要的[8]。4.3安装摄像头 首先需要释放自身的静电，不然在与摄像头接触的过程中很容易烧坏其部分电路。之后将摄像头的数据线末端插入以太网和HDMI接口直接的那个16针接口，这样，硬件安装就完成了。图4.2摄像头正确安装方式Fig4.2TheProperWaytoInstalltheCamera 之后进入系统，在命令行输入sudoraspi-config调出系统同设置界面，在camera一栏中“enable”激活摄像头模块，然后再重启系统，便可使用摄像头了。4.4raspivid输出视频流 raspivid-n-vf-t0-w640-h360-fps25-b2000000-o-| 以上的命令是在笔者经过多次试验之后得出的实现视频流导出的最基本参数，分别解释如下： -n：表示不显示预览窗口。raspivid默认将视频信号显示在开发板连接的显示器上的。 -vf：垂直翻转。默认的视频信号对于常人观看是垂直方向反了的，为了便于观看，将其摆正。 -t：录制时间。后面跟0表示录制时间为永久，即用户手动不暂停便不停止。 -w：视频宽度。以像素为单位。 -h：视频高度。以像素为单位。 -fps：帧率。即每秒钟视频所包含的图像帧数。 -b：比特率。这能影响内部编码的压缩比，最终表示的也就是视频的带宽。它与成像质量是成正比的，但是对于带宽成本却是成反比的。 -o：输出。将视频流输出。 这样，视频流的就能被实时地被导出到之后的模块以便处理。

第五章视频流服务器5.1RTMP RTMP（RealTimeMessagingProtocol：实时消息传输协议）。该协议基于TCP，是一个协议簇，包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种设计用来进行实时数据通信的网络协议，主要用来在Flash/AIR平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。支持该协议的软件包括AdobeMediaServer/UltrantMediaServer/red5等。5.2crtmpserver Crtmpserver是一个使用C++编写的高性能的RTMP流媒体服务器，可以实现直播与点播、多终端支持功能。 安装之前，需要确保apache服务器也安装好并且运行正常，但是自动安装的时候apache一般会被自动安装上的。5.3H.264编码 H.264是国际化标准组织和国际电信联盟（ITU）共同提出的继MPEG4之后的新数字视频压缩格式。H.264是ITU-T以H.26x系列为名称命名的视频编解码技术标准之一。H.264是ITU-T的VCEG（视频编码专家组）和ISO/IEC的MPEG（活动图像编码专家组）的联合视频组（JVT：JointVideoTeam）开发的一个数字视频编码标准[9]。该标准最早来自于ITU-T的称之为H.26L的项目的开发。H.26L这个名称虽然不太常见，但是一直被使用着。H.264是ITU-T以H.26x系列为名称命名的标准之一，AVC是ISO/IECMPEG一方的称呼。其具有压缩比大，但同时画面质量较好地优势。本设计采用VideoCoreIVGPU进行H.264硬编码，转换速度快，并且能耗低。5.4ffmpeg Ffmpeg是一套强大的多媒体编解码框架，常被用于各种播放器中作视频解码之用，但是由于其优秀的可移植性以及强大的性能，其也常被用于各种有关视频、音频处理的开发项目之中。我们主要使用其来进行对视频流的封装转发。官方系统虽然集成了此模块，但是并不能进行rtmp格式的转发，所以需要从ffmpeg官方网站下载完整版本进行编译，这个过程耗时较长，一般需要6~8小时。

第六章视频直播系统 光有一个转发并不够，因为这样用户使用起来需要手动输入直播地址，利用支持RTMP视频流的播放器才能观看，从用户体验上来讲，如果让用户每个平台都去装一个app才能观看，就算是对于开发者的工作量也是不小的要求。那有没有一种对于开发和用户来讲都非常方便的解决方案呢？“H5+CSS3+JS”便是一种合理的解决方案。本设计采用Django做web服务器，MySQL做数据库，结合“H5+CSS3+JS”技术开发出了一个完善的小型视频直播系统，实现跨平台播放，用户只需要打开浏览器，输入直播地址便能观看。6.1Django Django是一个开放源代码的Web应用框架，由Python写成。采用了MVC的软件设计模式，即模型M，视图V和控制器C[10]。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的，即是CMS（内容管理系统）软件。并于2005年7月在BSD许可证下发布。这套框架是以比利时的吉普赛爵士吉他手DjangoReinhardt来命名的。 Django是一个基于MVC构造的框架。但是在Django中，控制器接受用户输入的部分由框架自行处理，所以Django里更关注的是模型（Model）、模板(Template)和视图（Views），称为MTV模式。它们各自的职责如下： 模型（Model），即数据存取层:处理与数据相关的所有事务：如何存取、如何验证有效性、包含哪些行为以及数据之间的关系等。 模板(Template)，即表现层:处理与表现相关的决定：如何在页面或其他类型文档中进行显示。 视图（View），即业务逻辑层:存取模型及调取恰当模板的相关逻辑。模型与模板之间的桥梁。 从以上表述可以看出Django视图不处理用户输入，而仅仅决定要展现哪些数据给用户，而Django模板仅仅决定如何展现Django视图指定的数据。或者说Django将MVC中的视图进一步分解为Django视图和Django模板两个部分，分别决定“展现哪些数据”和“如何展现”，使得Django的模板可以根据需要随时替换，而不仅仅限制于内置的模板。 至于MVC控制器部分，由Django框架的URLconf来实现。URLconf机制是使用正则表达式匹配URL，然后调用合适的Python函数。URLconf对于URL的规则没有任何限制，你完全可以设计成任意的URL风格，不管是传统的，RESTful的，或者是另类的。框架把控制层给封装了，无非与数据交互这层都是数据库表的读，写，删除，更新的操作，在写程序的时候，只要调用相应的方法就行了，感觉很方便。程序员把控制层东西交给Django自动完成了。只需要编写非常少的代码完成很多的事情。所以，它比MVC框架考虑的问题要深一步，因为我们程序员大都在写控制层的程序。现在这个工作交给了框架，仅需写很少的调用代码，大大提高了工作效率。6.2MySQL MySQL是最好的RDBMS(RelationalDatabaseManagementSystem，关系数据库管理系统)应用软件之一。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库[11]。6.3H5+CSS3+JS H5即为HTML5技术，是新一代的超文本语言，经过八年的修订终于由万维网联盟于2014年定稿。其设计目的是为了在日益庞大的移动设备群体中支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas标记。CSS3是CSS（CascadingStyleSheet）层叠样式表的最新版本，在网页制作室采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分。或者也属不同的网页的外观和格式。JS（JavaScript）是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器JavaScript被称为引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是再HTML网页上使用，用来给HTML网页增加动态功能。 本设计主要便是使用H5来进行网页页面结构编写，CSS3来进行页面的排版和样式设计，JS来实现视频流的显示和一些动态交互。6.4表设计 本设计对于数据库的需求主要用于存档用户信息以实现权限控制功能。用户登陆时候输入用户id或者用户名，以及密码，通过查询此表判断用户是否存在，只有存在的用户才能进入视频观看界面。图6.1User表结构截图Fig6.1SnapshotoftheUserTable6.5后台逻辑 后台主要负责url路由和逻辑处理。本设计主要包含两个页面，一个登陆页面，一个视频观看页面。当服务器启动之后，若用户域名输入正确，服务器便会接收到请求。之后服务器便会将请求的URI与urls.py中的记录以正则表达式的方式进行对比，若符合正则表达式，则执行views.py中对应的函数。 本设计中，用户未登录状态下默认进入login页面，当用户输入用户名和密码之后，前台使用JSAJAX请求“doLogin”API，之后views.doLogin函数会利用从请求体内获得的用户名及密码从数据库当中验证是否正确。如成功，则在此次会话session中存储此用户信息，并返回标示着成功的数据，前台获得之后，使用JS跳转窗口至视频播放页面。图6.2Url路由文件Fig6.2UrlRouterFile6.6前台设计 为了使前台样式更美观，本设计采用了Bootstrap前端框架。Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。它由Twitter的设计师MarkOtto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 另外，为了能够播放RTMP视频流，本设计还采用了一个开源的网页播放器jwplayer。其使用及其方便，只需要声明视频流的源地址，便可以自动进行播放。图6.3播放界面截图Fig6.3Snapshotofthe