基于增強現實的互動廣告系統(tǒng)實現

張承楷 林琳 溫凌峰 魏宏宇 吳冬燕

摘要：該項目解決了當今廣告行業(yè)的撒網式播放視頻廣告的問題。針對廣告投入方無法直觀看到廣告訪問量的問題，通過springboot快速開發(fā)了數據可視化圖表來追蹤廣告訪問人數;而對于視頻廣告缺少互動性的弱點，該項目通過添加增強現實（AR）模板，提升廣告的趣味性，模板可復用同時達到快速開發(fā)的目的，促進廣告投放的精準性，可追查性。

關鍵詞：廣告;springboot;增強現實;ar.js

中圖分類號：TP311.5? ? ? 文獻標識碼：A

文章編號：1009-3044（2020）36-0080-04

當今，伴隨著互聯(lián)網行業(yè)驚人的發(fā)展，傳統(tǒng)廣告和媒體預算的時代已成為過去式，數據與創(chuàng)意和媒介的相互融合成為顯而易見的發(fā)展趨勢。撒網式的廣告投放不僅投入巨大，并且缺少直觀的反饋，無法根據反饋即時改進。

因此，本項目通過增強現實技術，在增加廣告的互動性，增強用戶黏性的同時，收集了用戶訪問人數等等信息來分析，并且對于增強現實模塊開發(fā)成本高的問題，本項目提出模塊化的開發(fā)思路來降低技術難度和開發(fā)成本，做到高效率快速開發(fā)的目的。

1 系統(tǒng)需求分析

1.1 需求分析

本項目針對的是廣告投放商，目的是解決廣告商不能持續(xù)跟蹤廣告投放效果，以及通過增強現實等技術來與客戶形成更多的互動。在此基礎上，本項目進行了以下的優(yōu)化：

1）增加了可視化的數據統(tǒng)計

客戶可以隨時進入網頁查詢可視化數據統(tǒng)計分析，通過分析推廣數據，可以根據數據分析出新老用戶、每日使用人數、用戶所在地區(qū)等信息，來將廣告推送給適宜的群體，這些數據對調整市場投放策略起到重要作用。

2） 降低廣告換代制作成本

對于廣告投放商來說，從頭制作一個廣告的代價確實太高，因此對于更新?lián)Q代的產品來說，在廣告視頻上嵌入一個可供掃描的二維碼或者通過平面或者紙質廣告上的圖案增加AR功能都是可以接受的。

3）易用一鍵即達

相對于使用ARCore或者制作App之類煩瑣的行為，通過手機瀏覽器訪問無疑減少用戶的決策負擔，易用且直觀。

2 系統(tǒng)設計

2.1 用例設計

該系統(tǒng)設計了三種角色：客戶、管理員和廣告受眾?？蛻艨梢赃M行以下操作：登錄、注冊、填寫訂單和提交、查看訂單狀態(tài)、查看廣告反饋數據。管理員以管理員身份登錄后臺系統(tǒng)后，可以查看訂單和客戶信息，修改、刪除和添加一些信息。廣告受眾的操作是用微信掃描商品或其他地方上的二維碼，跳轉到制作好的AR頁面，進行AR互動，最后引流至客戶發(fā)布的活動頁面。

管理員和廣告受眾的用例比較簡單略去不表，客戶用例圖如圖1。

廣告反饋頁面，包含每月觀看量/地區(qū)觀看量和多次收看觀眾占比，通過可視化數據統(tǒng)計幫助客戶了解廣告效果并及時調整廣告策略。

2.2 AR設計方案

AR技術支持如圖2所示：

AR系統(tǒng)中一般都包含以下4個基本步驟：1）獲取實時場景信息;2）對實時場景及相機位置信息進行分析;3）生成虛擬背景;4）合并視頻或直接顯示[1]。

2.3 后端設計方案

本項目采用Spring Boot作為開發(fā)框架進行快速構建和開發(fā)。Spring Boot是由核心團隊基于Spring framework開發(fā)的微服務開發(fā)框架的微服務開發(fā)框架體系，致力于簡化項目開發(fā)流程，優(yōu)化項目代碼結構，實現零配置。與傳統(tǒng)的Spring框架相比，Spring Boot在代碼編寫形式、業(yè)務邏輯實現、項目部署實現、松耦合項目開發(fā)等方面都有了很大的飛躍[2]。

系統(tǒng)架構設計是系統(tǒng)編程的基礎，是項目設計的核心。本系統(tǒng)采用controller（控制層），service（業(yè)務層）和dao（數據持久層）三層體系結構的系統(tǒng)模式。其功能如圖3所示。

Entity層：entity層即數據庫實體層，也被稱為model層，pojo層。一般數據庫一張表對應一個Entity實體類，類屬性同表字段一一對應。

Dao層：dao層即數據持久層，也被稱為mapper層，它的作用為訪問數據庫，向數據庫發(fā)送sql語句，完成數據的增刪改查任務。

Service層：service層即業(yè)務邏輯層，作用為完成功能設計。service層調用dao層接口，接收dao層返回的數據，完成項目的基本功能設計。

Controller層：controller層即控制層，功能為請求和響應控制，負責前后端交互，接受前端請求，調用service層，接收service層返回的數據，最后返回具體的頁面和數據到客戶端。

3 技術實現

3.1 Spring Security技術實現

在Web應用程序開發(fā)中，安全性一直是一個非常重要的方面。Spring Security是一個安全框架，可以為基于Spring的企業(yè)應用程序系統(tǒng)提供聲明式安全訪問控制解決方案。它提供了一組可以在Spring應用程序上下文中配置的Bean和相關配置文檔。借助IOC（控制反轉），DI（依賴注入）和AOP（面向切面編程）對用戶身份驗證進行統(tǒng)一管理，從而實現對資源訪問的全面控制和維護[3]。

因此本項目的安全管理技術棧為Spring Boot + Spring Security。

網絡應用的安全性包括兩個部分：用戶認證（Authentication）和用戶授權（Authorization）。用戶身份驗證是指驗證用戶是否是系統(tǒng)中的合法主體，即用戶是否能夠訪問系統(tǒng)。用戶身份驗證通常要求用戶提供用戶名和密碼。系統(tǒng)通過驗證用戶名和密碼來完成身份驗證過程。用戶授權是指驗證用戶是否具有執(zhí)行操作的權限。在一個系統(tǒng)中，不同的用戶擁有不同的權限。

在用戶授權方面，Spring Security提供了基于角色的訪問控制和訪問控制列表。在這個項目中設計了兩個角色：ROLE_USER和ROLE_ADMIN，它們被分配了不同的訪問權限。下面描述了如何在這個項目中使用Spring Security。

1）在pom.xml中添加Spring Security的依賴。

2）實現UserDetails接口：

最終提交給Spring Security的是UserDetails 。該接口是提供用戶信息的核心接口。該接口實現僅僅存儲用戶的信息。后續(xù)會將該接口提供的用戶信息封裝到認證對象Authentication中去。UserDetails 默認提供了：用戶的權限集，用戶的加密后的密碼，應用內唯一的用戶名。另外還有賬戶是否過期、鎖定等信息，可以視需求重寫這些功能，也可以自行實現擴展以存儲更多的用戶信息。比如用戶的郵箱、手機號等

3）實現UserDetailsService接口：

本接口提供了一個方法：loadUserByUsername（） ，即通過用戶名來加載用戶，于從系統(tǒng)數據中查詢并加載UserDetails的實現類的實例到Spring Security中。

4）配置身份認證機制和資源訪問規(guī)則：

編寫配置類WebSecurityConfig，繼承自WebSecurityConfigurerAdapter。在configure方法中定義認證用戶信息獲取來源和安全策略。

3.2 整合Mybatis管理持久層

在DAO層管理方面，為了方便開發(fā)，本項目選擇了Mybatis。Mybatis是一個集成了SQL查詢、存儲過程調用和高級映射的持久層框架。它封裝了幾乎所有手工設置的JDBC代碼，并通過簡單的XML配置和注釋將Java POJOs映射到數據庫中的記錄[4]。

整合與開發(fā)過程快捷且方便，首先通過meaven拉取相關依賴，其中包括mybatis-spring-boot-starter，這個模塊能夠使用SqlSessionFactoryBean注冊SqlSessionFactory 實例，并自動檢測并設置DataSource數據源，并在使用時自動掃描@Mapper注解類，并通過SqlSessionTemplate注冊到Spring Context中，達到了springboot所提倡開箱即用的想法。

springboot會自動加載相關配置，數據源就會自動注入sqlSessionFactory中，再自動注入Mapper中，因此只需要通過注解或者xml的方式來簡單的連接并操作數據庫，通常在mapper類中存放對于相應xml，在Service層及Controller層便可以簡單地調用方法操作數據庫，實現所需的功能。

3.3 支付系統(tǒng)

在本項目中，針對用戶支付系統(tǒng)，我們采用集成支付寶支付系統(tǒng)來實現，方便用戶下單購買。

1）Mapper層實現與數據庫交互

在持久層中本系統(tǒng)主要集成MyBatis，實現與數據庫的交互。在下訂單時在后臺插入一條訂單數據，用以后臺記錄訂單的相關狀態(tài)，在實現相關其他服務時，為其他相關服務提供數據支持。

2）Service層實現下訂單的功能函數

在服務層中主要實現下訂單的功能函數以及串聯(lián)支付寶接口實現支付。主要設計兩個函數，pay，returnUrl和notifyUrl：

①pay函數實現下訂單

下訂單時通過用戶所填的付款金額，訂單名稱實現下訂單的功能的實現。在此功能實現之前應首先判斷訂單正確與否，通過表單號判斷訂單的正確性，過濾非法訂單。當訂單正確時實現下訂單的功能

②支付寶接口實現支付功能

通過商戶訂單號，支付寶交易號，付款金額，實現讓用戶的支付功能。通過獲取支付寶GET過來的返回信息進行驗簽。

3） Controller層實現邏輯功能

在Controller層主要實現功能函數的邏輯串聯(lián)，使得整體用戶功能得到完美的實現。在此層中獲取到前臺的商戶訂單號，支付寶交易號和交易狀態(tài)作為參數傳入后臺功能函數，以此實現響應支付下訂單功能。

3.4 頁面設計

在本項目中，所有頁面都采用Html5實現，通過CSS和JavaScript來實現頁面的環(huán)境渲染和頁面布局。

1）登錄、注冊及修改密碼頁面的設計

登錄界面通過注冊時提交的用戶的用戶名和密碼來登錄系統(tǒng)，如果用戶需要修改密碼，通過認證

用戶的原密碼來修改，數據庫會更新用戶提交的新密碼，再次登錄時使用新的用戶密碼。

2）首頁展示頁面的設計

首頁主要是展示界面，提供一些功能按鈕，如登錄，注冊，租用界面的入口。還有一些公司簡介和產品的介紹，為用戶提供方便的導航界面。

3）租用廣告頁面的設計

本頁面主要為用戶提供下訂單的頁面。此頁面用戶需輸入廣告標題、手機號、廣告類型、租用時間以及上傳需要的文件，為用戶在本系統(tǒng)下訂單提供便利的購物體驗。

4）主面板頁面的設計

主面板主要為用戶提供數據的統(tǒng)計。新老用戶比例的統(tǒng)計為廣告投放用戶提供新用戶的增長率。各城市訪問人數的統(tǒng)計為用戶提供各個地點的用戶使用量，可以讓用戶的產品通過廣告的統(tǒng)計對于各個城市的銷售有所不同的策略。每月訪問人數可以看到這個月的用戶增長趨勢，可以幫助廣告投放用戶指定相應的月銷售計劃。

5）AR廣告頁面的設計

在此頁面主要是對于廣告投放用戶所提交的廣告進行展示。我們所設計的AR廣告較傳統(tǒng)的廣告更增加了用戶的互動性與趣味性，在此界面用戶通過掃描二維碼可以獲取到AR廣告，讓廣告使用者如臨其境，深切地感受每個產品的魅力。

3.5 增強現實模塊實現

針對廣告投放時，為方便每個用戶無成本地體驗到增強現實的效果，本項目通過WebGL來實現AR的效果，可以在不使用插件的情況下在任何兼容的瀏覽器中呈現交互式3D圖形，所有用戶只需用微信內嵌瀏覽器即可體驗AR效果。

為快速開發(fā)本項目調用了AR.js及three.js這兩個JavaScript庫來實現AR效果，three.js負責實現3D模型，AR.js負責AR顯示，其中重點主要分為圖像識別與導入模型。

1） 圖像識別

基于圖像識別追蹤的三維空間注冊技術可使用光學攝像機對平面識別標識圖像的特征點提取， 或使用深度攝像機對現實物體的立體輪廓及距離進行識別追蹤。這兩種方式都可以實時計算虛擬與現實世界坐標系對應關系， 并將虛擬物體準確疊加到現實場景中的平面識別標識或者物體上[5]。

對于圖像識別創(chuàng)建標記部分，AR.js使用了Marker來標記特征信息，通過從圖片提取像素值來作為匹配特征，而在識別時，會將像素值當作灰度值轉換為圖像來識別，減少圖像信息，加速處理。

對于識別標記部分，AR.js本質是將artoolkit c++庫通過 Emscripten編譯成對應的js文件，本部分在實際調用中的過程如圖6所示：

在實際調用中，僅需將文件中的markerControls中的patternUrl替換成所需的訓練后的圖片模型即可。2）導入模型

本項目選用obj格式來導入3D模型，導入obj格式的文件需要MTLLoader與OBJLoader兩個加載器來輔助加載模型。

其中，obj包含mtl格式的紋理及材質部分及obj格式的物體的主體部分，MTLLoader的作用就是用來加載mtl文件部分的，負責將mtl材質渲染到obj平面之上;而obj格式的模型包含了物體的頂點信息，紋理坐標及頂點法線等等信息，通過OBJLoader解析并渲染到界面上，圖7就清晰展示了obj包含模型的頂點信息：

6 結束語

本文介紹了基于springboot技術，以及ar.js和three.js等技術實現的廣告牌系統(tǒng)，系統(tǒng)主要分為所需實現功能的分析，對項目后臺快速開發(fā)，AR功能實現技術的選擇，以及對各項所需要功能的實現。當下，廣告的發(fā)展也要追求形式上的變化，從2D進化為3D也是一種未來的可能。本項目正是對于廣告不同形式的一種嘗試，而本項目使用基于WebGL的AR技術實現，也是在向移動端曾經基于ARCore實現的AR系統(tǒng)的一種嘗試。相信AR技術對于未來而言，能夠得到廣泛的應用與發(fā)展，AR技術的各種應用將被逐漸挖掘。

參考文獻：

[1] 吳帆，張亮.增強現實技術發(fā)展及應用綜述[J].電腦知識與技術，2012，8（34）：8319-8325.

[2] 王悅，張雷，錢英軍.基于SpringBoot微服務的Spring Security身份認證機制研究[J].電腦編程技巧與維護，2019（8）：64-65，68.

[3] Stephen Young.How to become a web developer part5：Web a，plication architecture[EB/OL].[2020-06-18]（2015-01-13）.https：//aestheticio.com/web-application-architecture-basics/.

[4] 榮艷冬.關于Mybatis持久層框架的應用研究[J].信息安全與技術，2015，6（12）：86-88.

[5] 朱淼良，姚遠，蔣云良.增強現實綜述[J].中國圖象圖形學報A輯，2004，9（7）：767-774.

【通聯(lián)編輯：謝媛媛】