前端WebAR实现简单版pokemon Go

背景:

最近AR的话题很火,如前段时间pokemon Go游戏,和支付宝的AR红包,加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章,这边就尝试结合下,实现一个简单版的pokeMon Go的游戏。由于有兼容性问题,目前demo只是跑在android的手Q中,具体效果如下:

元旦后提供demo链接

WebAR

WebAR说白了就是通过web端的技术能力去实现AR的效果!

我们知道,AR最基础要实现的功能其实就是实时视频效果,然而帮助我们实现这种实时视频效果的技术基础是WebRTC;

WebRTC是什么?

那么,WebRTC是什么? 对前端来说,我们可以通过HTML5的新特性WebRTC(网页实时通信,Web Real-Time Communication 一个支持网页浏览器进行实时语音对话或视频对话的API),通过WebRTC,可以通过网页呼起用户的摄像头,并且实时获取用户摄像头的图像数据的。

WebRTC API

WebRTC共分三个API。

  • getUserMedia getUserMedia主要用于获取视频和音频信息
  • RTCPeerConnection 用于浏览器之间的数据交换。
  • RTCDataChannel `用于浏览器之间的数据交换。``

这边目前我只使用到了getUserMedia

WebRTC兼容性

这边通过阅读相关文章了解到,目前兼容性情况如下:

由于苹果的安全机制问题,iOS设备任何浏览器都不支持getUserMedia()。 最终数据展示,Android设备下,有99.45%的设备在微信是支持getUserMedia()的,98.05%的设备在手Q是支持getUserMedia()的。而我们之前测试机型里面,本机浏览器、QQ浏览器对getUserMedia()都有不同程度的支持。 2015年底前,也就是chrome47版本前,chrome是支持http页面拉起摄像头的,出于安全问题考虑,chrome47版本后只支持https页面拉起摄像头。

实现步骤

目前我的demo的实现步骤如下:

  • 通过WebRTC的API来实现获取通过浏览器网页拉起摄像头操作
// 获取相应的浏览器内核的getUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;  
// 调用getUserMedia方法
function getMedia() {  
    if (navigator.getUserMedia) {  
        navigator.getUserMedia({  
            'video': {  
                'optional': [{  
                    'sourceId': exArray[1] //0为前置摄像头,1为后置  
                }]  
            },  
            'audio':true  
        }, successFunc, errorFunc);    //success是获取成功的回调函数  
    }  
    else {  
        alert('Native device media streaming (getUserMedia) not supported in this browser.');  
    }  
}  
 // 获取摄像头源信息
 // 通常手机只有两个源,前置和后置
 MediaStreamTrack.getSources(function (sourceInfos) {  
      for (var i = 0; i != sourceInfos.length; ++i) {  
          var sourceInfo = sourceInfos[i];  
          //这里会遍历audio,video,所以要加以区分  
          if (sourceInfo.kind === 'video') {  
              // alert('sourceInfo'+ sourceInfo.id);
              exArray.push(sourceInfo.id);  
          }  
      }  
        // 调用摄像头  
      getMedia();
      // 定时展示小精灵
      showPet();
  });
  • 获取摄像头的数据流

当成功呼起摄像头时,会触发success的回调,在回调中我们可以获取摄像头的数据流

// 获取相应浏览器的URL对象
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;  
function successFunc(stream) {  
     // 这里的stream为摄像头的实时数据
  }
  • 将摄像头的数据流通过video标签作为载体呈现在页面上
// 获取相应浏览器的URL对象
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;  
function successFunc(stream) {  
      if (video.mozSrcObject !== undefined) {  
          //Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持  
          video.mozSrcObject = stream;  
      }  
      else {  
          video.src = window.URL && window.URL.createObjectURL(stream) || stream;  
      }  
      // 音频  
      audio = new Audio();  
      audioType = getAudioType(audio);  
      if (audioType) {  
          audio.src = 'polaroid.' + audioType;  
          audio.play();  
      }  
  }
  • 可以在video上叠加任何我们需要的内容和操作
  • 配合CSS3和JS为叠加的内容增加交互效果,营造出WebAR的感觉

最终效果

小结

虽然目前webAR还是不能取代AppAR,且通过web来实现AR还是有许多问题。但我相信通过时代和技术的并行发展,webAR的流行可能并不久远。

参考链接

http://blog.csdn.net/journey191/article/details/40744015 http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201612/537832.shtml

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

一文看懂 iOS 11所有新功能:文件管理器、多任务处理、全新文件 App等

全新文件 App 通过这个App,可以把各类文件汇集在一起,浏览、搜索和整理文件。用户最近使用过的各种文件都会在一个专属的位置,以方便查看。除了 iPad 上的...

2988
来自专栏何俊林

关于Android Pie(Android 9.0),你想知道的都在这了

2018年8月7日-凌晨1点,谷歌发布了Android 9.0操作系统,它的名字是Android 9,被命名为Android Pie。让我们看看关于Androi...

2143
来自专栏大数据挖掘DT机器学习

新闻个性化推荐系统(python)-(附源码 数据集)

最近参加了一个评测,是关于新闻个性化推荐。说白了就是给你一个人的浏览记录,预测他下一次的浏览记录。花了一周时间写了一个集成系统,可以一键推荐新...

4365
来自专栏YoungGy

ISLR_BootStrapping

起源 概述 置信区间 限制 比较 起源 有的时候,不只是想检定群体的mean,而是想检定群体的median。 这种情况下,CLT就不适用了,需要有新的方法策...

1699
来自专栏HansBug's Lab

1455: 罗马游戏

1455: 罗马游戏 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 721  Solved: 272 [Subm...

29110
来自专栏生信技能树

【直播】我的基因组72:把基因检测芯片数据转为vcf格式

这个需求比较少见,主要是因为有很多朋友都做了基因检测芯片数据,而芯片检测的结果只有4列,分别是dbSNP数据库ID号,染色体,坐标,还有基因型。如下: head...

38811
来自专栏向治洪

ARKit 简介

ARKit 简介 苹果在AR一直布局VR,最近的苹果开发者大会上,果家终于放出大招:iOS移动端ARKit平台以及VR兼容新桌面操作系统macOS High S...

2156
来自专栏大数据挖掘DT机器学习

新闻个性化推荐系统(python)-(附源码 数据集)

最近参加了一个评测,是关于新闻个性化推荐。说白了就是给你一个人的浏览记录,预测他下一次的浏览记录。花了一周时间写了一个集成系统,可以一键推荐新闻,但是准确率比...

3857
来自专栏腾讯大讲堂的专栏

【iOS审核秘籍】提审资源检查大法

作者:互娱iOS预审团队,隶属于互娱研发部品质管理中心,致力于互娱产品的iOS审核前的验收工作。 本篇主要是提审资源相关检查项的分享,在过往提审数据统计中,因提...

2056
来自专栏Python中文社区

Python一键上传旅途照片生成展示网页

專 欄 ❈ treelake Python中文社区专栏作者 博客地址: http://www.jianshu.com/p/1d75addcbb2c ❈ 作为一...

19210

扫码关注云+社区