阿里云+Apache+EasyAR WebAR開發環境的搭建

最近研究了一下EasyAR的WebAR的demo。按照官方給的demo在本地可以運行。但是大家肯定想把他部署在自己的服務器上,這樣就可以在手機上進行體驗。我按照官方給的步驟也是踩了很多坑,前前后后花了一周的時間才搞定,或許是因為我不懂后臺的原因吧。接下來我就列舉一下我的集成步驟吧,希望對大家有幫助。

注:本文默認你已經有云服務器和備案過的域名。

第一步:配置Apache環境.

此步驟參照以下博客,我就是按照這個進行配置的。服務器我用的是阿里云的服務器,按照以下步驟在你的云服務器上安裝Apache。

https://jingyan.baidu.com/article/ce09321b754b062bff858f34.html

通過以上步驟,你的域名應該是可以訪問的。

第二步:給你的域名配置https協議。

相信很多人在此遇到了麻煩,好的一點是阿里云給我們提供了免費的證書。配置步驟如下:

1、到你的阿里云域名管理界面點擊ssl證書,然后獲取域名證書。

2、為域名添加443端口。



3、證書申請成功后下載證書,下載服務器對應的版本,我們用的是Apache,所以下載Apache證書,下載后得到的文件如下;

4、?在Apache的安裝目錄下創建cert目錄,并且將下載的全部文件拷貝到cert目錄中。

5、打開 apache 安裝目錄下 conf 目錄中的 httpd.conf 文件,找到以下內容并去掉“#”:

#LoadModule ssl_module modules/mod_ssl.so (如果找不到請確認是否編譯過 openssl 插件)

#Includeconf/extra/httpd-ssl.conf

6、打開 apache 安裝目錄下 conf/extra/httpd-ssl.conf 文件 , 在配置文件中查找以下配置語句:

1> 添加 SSL 協議支持協議,去掉不安全的協議

SSLProtocol all -SSLv2 -SSLv3

2>修改加密套件如下

SSLCipherSuite HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM

SSLHonorCipherOrder on

3> 證書公鑰配置

SSLCertificateFile cert/public.pem

4>證書私鑰配置

SSLCertificateKeyFile cert/1529821914335.key

5>證書鏈配置,如果該屬性開頭有 '#'字符,請刪除掉

SSLCertificateChainFile cert/chain.pem

記得在httpd-ssl.conf? <VirtualHost?_default_:443>改為<VirtualHost *:443>

7、修改http.conf文件

1>將文件中所有帶”c:/Apache24”的默認路徑修改為自己Apache的路徑,我們服務器Apache的路徑為"c:/amp/Apache24"。所以將ServerRoot "c:/Apache24"改為ServerRoot "c:/amp/Apache24"。

2>去掉以下行前面的#

LoadModuleproxy_module modules/mod_proxy.so

LoadModuleproxy_http_module modules/mod_proxy_http.so

LoadModulerewrite_module modules/mod_rewrite.so

LoadModulesocache_shmcb_module modules/mod_socache_shmcb.so

LoadModulessl_module modules/mod_ssl.so

Includeconf/extra/httpd-mpm.conf

3>若Https是在httpd-ssl.conf?中配置的話可以將下面這這行注釋

Includeconf/extra/httpd-vhosts.conf

Includeconf/extra/httpd-ssl.conf

4>去掉下面這行前面的#,并將其改為自己的域名:ServerName www.molideng.com:80

#ServerName www.example.com:80

5>更改Directory的訪問權限,

??? AllowOverride none

??? Require all denied

改為:

??? #AllowOverride none

??? #Require all denied

????????? Options FollowSymLinks

????????? AllowOverride None

????????? Order deny,allow

????????? Allow from all

在瀏覽器中輸入Https://你的域名,如果能訪問成功,則說明Https配置成功。

第三步:本地運行Demo。

1、下載demo。

https://github.com/gentwolf-shen/EasyAR-WebAR-Demo

官方給了兩個demo,一個是很簡答的運勢別,是被成功后彈出一個成功的提示,還有一個是加載三維模型的案例,識別成功后加載一個恐龍。我們展示第二個案例。

2、按照官方文檔在本地運行demo,運行demo的前提是你要在Easy AR官網的云識別管理創建圖集,并上傳你的識別圖。上傳成功之后你會得到該識別圖的密鑰信息。

然后修改你demo根目錄中config/application.txt,將上個步驟中得到的云識別key、secret及url填入。

3.運行EasyAR-WebAR程序。我是Window系統,所以運行WIndow版。


4、確保你的電腦安裝了攝像頭并且可以正常使用,然后再瀏覽器中輸入http://127.0.0.1:3000/html/SimpleThreeJsExample,打開攝像頭對著識別圖進行識別。如果沒問題的話識別成功后恐龍就會被加載出來。

第四步:將Demo集成到Apache服務器


1、在服務器“www”文件夾中新建文件夾命名webardemo,并將本地的demo拷貝到服務器webardemo目錄下。

2、在服務器中按下圖所示目錄修改httpd.conf文件,將mod_proxy.so與mod_proxy_http.so前的#符去掉


在服務器中按下圖所示目錄修改httpd.conf文件,將mod_proxy.so與mod_proxy_http.so前的#符去掉

3、因為我們之前在 httpd-ssl.conf 文件中配置了https,所以這里以下配置寫進httpd-ssl.conf 的VirtualHost中

ProxyPass /webar/recognize? http://127.0.0.1:3000/webar/recognize

? ProxyPassReverse/webar/recognize?http://127.0.0.1:3000/webar/recognize??

4、重啟Apache服務器

5、在服務器上運行Easy AR-WebAR_windows.exe程序。

6、在瀏覽器中輸入https://你的域名/webarDemo/html/SimpleThreeJsExample/,打開攝像頭,掃描識別圖,就可以體驗WebAR了,最后說一點WebAR目前可以在Android版微中直接打開,IOS的話只能在Safari瀏覽器中打開,不能在微信中打開。

第一次寫文章,不足之處還請見諒。大家有問題歡迎大家留言提問。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容