前言

EdgerOS 的設計初衷是成為萬物互聯的智能作業系統，能夠為廣大開發者提供基于互聯網技術堆疊的作業系統平臺，最大化的降低物聯網 App 開發難度，提高開發效率，通過愛智云，EdgerOS 為開發者提供了強大的云-邊-端協同能力，今天我就向大家介紹在 iOS 手機端利用 EdgerOS 系統開發智能監控設備的一次實踐經歷，

正文

一、EdgerOS

1. 基礎介紹

EdgerOS 是基于 SylixOS 內核的智能邊緣計算作業系統，可廣泛應用于面向智慧家庭、智慧汽車、智慧園區等領域，有效降低開發門檻、縮短開發周期，為物聯網帶來全新智慧化體驗，通過建立跨廠商、跨協議的開放的生態，與廣大開發者一起實作萬物智能互聯，該產品具備成本低、開放式設計、設備聯動、極簡開發等特定，對了，還需要介紹的是搭載 EdgerOS 智能作業系統 Spirit 1 長成這樣：

2. 系統架構

EdgerOS 作業系統的系統架構分為三個部分，分別是基礎組件、系統服務、應用架構，同時，它們又包含豐富的細分模塊，具體如下圖所示：

二、開發實踐

1. 環境搭建

1.1 iOS 手機端

首先需要下載并安裝愛智 APP，連接名稱為 EOS-XXXXXX 的 wifi 網路，在 APP 中點擊“發現設備”按鈕，添加設備后并完成設備的注冊，最后設定網路名稱和密碼，激活設備，

1.2 PC 電腦端

搭建 EdgerOS 在 PC 端的開發環境還是非常方便，我們直接使用 VSCode 開發工具就可以，只是需要我們安裝一個相應的開發插件，在 VSCode 中擴展程式中搜索 edger 關鍵字，會出現下圖所示的插件工具，點擊“安裝”即可，

安裝完成后，在資源管理器的最下方會出現 EDGEROS 面板，我們選擇“創建專案”，具體操作如下所示：

點擊“創建專案”后，會出現專案模版庫串列，如下圖所示：

我們選擇“基礎的流媒體攝像頭監控 EdgerOS APP ”模板作為整個工程的基礎組件，如果遇到該頁面為空，沒有這么多的模板資訊，可以嘗試點擊左下角的“重繪模板資訊”按鈕，如果還是為空，可以切換倉庫源為 Gitee，因為系統默認是 Github 倉庫源，很可能因為網路問題導致無法訪問，具體修改方式可以參考下圖：

選擇“立即應用”后，會出現下圖的專案資訊頁，我們參考下圖完成專案配置，

資訊填寫完成后，點擊頁面右下角的“立即創建”按鈕，我們就把基礎工程創建好了，具體如下圖所示：

其中 camera1 目錄中是后端邏輯代碼，web 目錄中是前端業務邏輯代碼，專案本身實作了前后端分離，

2. 代碼撰寫

2.1 后端代碼

引入專案所需的系統模塊，代碼如下：

const WebApp = require('webapp');
const WebMedia = require('webmedia');
const bodyParser = require('middleware').bodyParser;
const {Manager} = require('@edgeros/jsre-medias');
const CameraSource = require('./camera_src');

定義基礎變數，代碼如下：

/* Register media source. */
const sourceName = 'camera-flv';
WebMedia.registerSource(sourceName, CameraSource);

/* WebApp. */
var app = WebApp.createApp();

/* Set static path. */
app.use(WebApp.static('/public'));

/* Media manage server. */
var server = undefined;

/* Is server starting. */
var starting = false;

創建媒體服務，代碼如下：

function createMediaSer() {
	console.log('Create media server.');
	if (server) {
		return server;
	}
	
	var opts = {
		mediaTimeout: 1800000,
		searchCycle: 20000,
		autoGetCamera: false
	};
	server = new Manager(app, null, opts, (opts) => {
		return {
			source: sourceName,
			inOpts: opts,
			outOpts: null
		}
	});
	server.on('open', (media) => {
		console.log('Media open.')
		media.on('open', (media, client) => console.log('Media client open.'));
		media.on('close', (media, client) => console.log('Media client close.'));
	});

  return server;
}

定義設備串列查詢介面，代碼如下：

app.get('/api/list', (req, res) => {
	if (!server) {
		var ret = startServer();
		if (!ret) {
			return res.json([]);
		}
	}

	var devs = [];
	server.iterDev((key, dev) => {
		var info = dev.dev;
		var stream = dev.mainStream;
		var media = stream ? stream.media : null;
		devs.push({
			devId: key,
			alias: `${info.hostname}:${info.port}${info.path}`,
			report: info.urn,
			path: media ? '/' + media.sid : '',
			status: media ? true: false
		});
	});
	res.send(JSON.stringify(devs));
});

2.2 前端代碼

引入組件模塊，代碼如下：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Vant from 'vant';
import 'vant/lib/index.css';

import {Notify} from 'vant';
import {edger} from '@edgeros/web-sdk';
import {setToken, setSrand} from './lib/auth';
import {setPerms, checkPerms, requestPerm} from './lib/permission';

定義基礎變數以及收發事件，代碼如下：

Vue.config.productionTip = false;

Vue.use(Vant);
Vue.use(Notify);

edger.onAction('permission', (data) => {
	setPerms(data);
});

edger.onAction('token', (result) => {
  const { token, srand } = result;
  setToken(token);
  setSrand(srand);
});

edger.token()
.then((result) => {
  const {token, srand} = result;
  setToken(token);
  setSrand(srand);
})
.then(() => {
	var ret = checkPerms();
	if (ret.length > 0) {
		requestPerm();
	}
})
.catch((err) => {
  console.error(err);
})
.finally(() => {
  NodePlayer.load(()=>{
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app');
  });
});