# 智能摄像头

本章以流媒体摄像头监控应用为示例，介绍 EdgerOS 多媒体应用开发。

# 注意事项

本示例需要获取网络通信（network - 用于搜索设备）和视频流（rtsp - 获取视频流）权限，获取权限方式请参考 SDK/ Permission。

# 前提条件

• 准备一台支持 ONVIF 协议和 RTSP 协议的网络摄像头。
• 准备 Spirit 1。

# 操作步骤

# 步骤 1：获取项目

爱智为开发者提供了智能摄像头项目模板，请通过链接 Githubopen in new window 或 Giteeopen in new window 获取项目，项目目录结构如下：

app-demo-camera-base
|-- camera1: 爱智应用项目
|-- web：前端项目
|-- README.md

# 步骤 2：创建应用

• 前端构建

1. 前端项目使用 Vue 构建，在 Visual Studio Code 中打开 web 文件夹，然后在终端依次执行以下命令：

   npm install  //安装项目所有依赖
   npm run build  //构建项目
   

2. 构建完后会生成一个 dist 文件夹，里面就是构建后的代码。

   说明：

   @edgeros/web-sdk：爱智提供与 EdgerOS 交互的前端 API 接口，在此项目中用到了获取用户 token 的接口。

   @edgeros/web-mediaclient：WebMedia 客户端 API 模块，用于连接流媒体服务器并与服务器进行数据交互。

   NodePlayer.js：播放器，可参考 开发文档open in new window。

• 应用构建

1. 在 Visual Studio Code 中打开 文件夹，然后在终端执行以下命令：

   npm install  //安装项目所有依赖
   
2. 将前端工程构建生成 dist 文件夹的文件复制到 iotpi/public 文件夹下。
   说明：

   @edgeros/jsre-onvif：onvif 协议模块，用于发现设备和获取摄像头设备 rtsp 地址。

   @edgeros/jsre-medias：WebMedia 服务封装模块，支持管理一组流媒体服务。

# 步骤 3：部署应用

参考 部署应用 章节，将项目部署至爱智。

# 步骤 4：环境配置

将网络摄像头按照说明书接入 Spirit 1，确保 onvif 功能已开启，且账号密码正确。

# 结果验证

进入智能摄像头应用，查看界面正常展示，验证成功。

# 补充说明

# 技术点

• WebMedia 流媒体服务
• VideoOverlay 视频预览
• MediaDecoder 多媒体解码