前端WebAR实现简单版pokemon Go
- 2019 年 12 月 5 日
- 筆記
本文作者：IMWeb coverguo 原文出处：IMWeb社区 未经同意，禁止转载
背景：
最近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://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201612/537832.shtml
