阿里云+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浏览器中打开,不能在微信中打开。

第一次写文章,不足之处还请见谅。大家有问题欢迎大家留言提问。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容