最近研究了一下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