前端开发中,工程师常常这样调侃“一入前端深似海”。确实,前端的应用面十分广,知识点比较零碎,学习范围也比较大,当然,实现的功能也更加全面。所以对于当下十分火热的AR,运用前端技术也可以轻松的实现。web 平台在AR,SLAM或跟踪的技术应用上将会越来越普及。
今天我们来讲解如何运用JSARToolKit库与WebRTC 的getUserMedia API,开发web 端的AR 应用。
ps:
1.部分整理翻译于:https://www.html5rocks.com/zh/tutorials/webgl/jsartoolkit_webrtc/
2.大家也可以参考下之前的Web AR 开发指南:教程链接
预览效果:
所需识别图:
实现思路:
1.设置JSARToolKit
2.使用getUserMedia访问网络摄像头
3.检测标记
4.矩阵映射
关于JSARToolKit
JSARToolkit是一个从FLARToolkit(Flash)转换的JavaScript库,结合Html5 与 canvas 来实现网页端的AR 效果。
项目地址:https://github.com/kig/JSARToolKit
对于JSARToolKit,比较重要的是navigator.getUserMedia() 方法,它用于访问摄像头,传递一个可以使用html5 <video>标签显示的视频流.但是JSARToolKit需要单个帧来检测标记。所以首先在画布上逐帧绘制视频帧,并使得ToolKitcanvas.changed = true。JSARToolKit通过使用光栅化来查找每个帧并搜索标记然后计算标记位置。得到的矩阵位置然后绘制模型即可(JSARToolKit是对canvas元素进行操作,当你将画布传递给JSARToolKit进行分析时,JSARToolKit将返回在图像中找到的AR标记列表和相应的转换矩阵。要在标记之上绘制一个3D对象,需要将位置信息传递给任何的一个3D引擎即可进行绘制操作)。
我们对JSARToolKit进行设置,第一步是创建canvas对象,摄像机参数对象和检测对象。
varraster=newNyARRgbRaster_Canvas2D(canvas);
//设置摄像机参数
var param=newFLARParam(320,240);
//FLARMultiIdMarkerDetector是用于标记检测的实际引擎
var detector=newFLARMultiIdMarkerDetector(param,120);
//在持续模式下,可以跟踪多个帧的标记。
detector.setContinueMode(true);
param.copyCameraMatrix(display.camera.perspectiveMatrix,10,10000);
使用getUserMedia访问网络摄像头
接下来,创建一个通过WebRTC API获取网络摄像头视频的视频元素。对于预录制的视频,只需将视频的源属性设置为视频URL。
|
检测标记
一旦我们检测器运行ok,我们就可以开始给它进行图像检测AR矩阵。首先将图像绘制到画布上,然后运行检测器。检测器将返回在图像中找到的标记数。
//将准备好的视频绘制到canvas上,缩放到320x240。
canvas.getContext('2d').drawImage(video,0,0,320,240);
//底层canvas已更改。
canvas.changed=true;
varmarkerCount=detector.detectMarkerLite(raster,threshold);
最后一步是迭代检测到的标记并获得它们的转换矩阵。
矩阵映射
将JSARToolKit矩阵复制到glMatrix矩阵.(PS:要将库与另一个库(如Three.js)一起使用,还需要编写一个将ARToolKit矩阵转换为库的矩阵格式的函数。还需要引入FLARParam.copyCameraMatrix方法。copyCameraMatrix方法将FLARParam透视矩阵写入glMatrix样式矩阵。)
如若使用X3DMO也可以这样来操作,大同小异。首先创建X3DOM上下文将一个3DOM标签添加到index.html中,创建一个场景,并添加一个带有id的空的。然后在要显示的模型中添加一个节点。
然后在JSARToolKit初始化中进行一些小的更改以便获得权限。修改X3DOM viewfrustum中指定的剪切平面和当前的透视矩阵。X3DOM运行时API提供代理对象读取和修改运行时参数。运行时连接到每个X3D元素,比如如下的矩阵示例:
然后 处理矩阵:
最后,我们就可以绘制模型了,将其放在矩阵中,并将其设置为MatrixTransform节点的属性值。
然后你就会实现类似这样的效果:
以上两种方法大同小异,大家可以比较着使用,接下来给大家分享一些web AR 的开发资源:
1.JS-ARUCO(ARUCO是基于OpenCV的增强现实应用程序的轻便库,现在已被移植到纯JavaScript):http://code.google.com/p/js-aruco/
2.HTML5-AR:https://github.com/dontcallmedom/html5-augmented-reality
该演示结合了地理位置,摄像机访问,提供一个扩展现实的Web应用程序,覆盖了实时视频流上的几个兴趣点。
3.WebRTC Head Tracking:https://dev.opera.com/articles/head-tracking-with-webrtc/
使用WebRTC,Media Capture和Streams在JavaScript中创建头部跟踪。
4.HTML5 Face Detection:http://wesbos.com/html5-video-face-detection-canvas-javascript/
使用HTML5,Canvas和Javascript在你的脸上放置“Groucho Marx”风格的眼镜,鼻子和胡子。
AR酱原创,转载务必注明
微信号AR酱(ARchan_TT)
AR酱官网:www.arjiang.com
前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案。
发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主(HLS存在延迟性问题,也可以借助 video.js 采用RTMP),PC端则以 RTMP 为主实时性较好,接下来将围绕这两种视频流协议来展开H5直播主题分享。
1. HTTP Live Streaming
HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如:MPlayerX、VLC 也都支持 HLS 协议。
HLS 协议基于 HTTP,而一个提供 HLS 的服务器需要做两件事:
编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。一个典型的 m3u8 文件格式如下:
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8
可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱点:延迟现象非常明显。如果每个 ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度,减少 m3u8 中的索引数,延时确实会减少,但会带来更频繁的缓冲,对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。
对于支持 HLS 的浏览器来说,直接这样写就能播放了:
<video src=”./bipbopall.m3u8″ height=”300″ width=”400″ preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>
注意:HLS 在 PC 端仅支持safari浏览器,类似chrome浏览器使用HTML5 video
标签无法播放 m3u8 格式,可直接采用网上一些比较成熟的方案,如:sewise-player、MediaElement、videojs-contrib-hls、jwplayer。
程序猿的生活:web前端全栈资料粉丝福利(面试题、视频、资料笔记,进阶路线)zhuanlan.zhihu.com/p/136454207
2. Real Time Messaging Protocol
Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小,但无法支持移动端 WEB 播放是它的硬伤。
虽然无法在iOS的H5页面播放,但是对于iOS原生应用是可以自己写解码去解析的, RTMP 延迟低、实时性较好。浏览器端,HTML5 video
标签无法播放 RTMP 协议的视频,可以通过 video.js 来实现。
<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>
3. 视频流协议HLS与RTMP对比
目前直播展示形式,通常以YY直播、映客直播这种页面居多,可以看到其结构可以分成三层:
① 背景视频层
② 关注、评论模块
③ 点赞动画
而现行H5类似直播页面,实现技术难点不大,其可以通过实现方式分为:
① 底部视频背景使用video视频标签实现播放
② 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现
③ 点赞利用 CSS3 动画
了解完直播形式之后,接下来整体了解直播流程。
相关学习资料推荐,点击下方链接免费报名,先码住不迷路~】
音视频免费学习地址:FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发
【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图,资料包括(C/C++,Linux,FFmpeg webRTC rtmp hls rtsp ffplay srs 等等)有需要的可以点击788280672加群免费领取~
直播整体流程大致可分为:
视频采集端:可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风,目前以移动端手机视频为主。
直播流视频服务端:一台Nginx服务器,采集视频录制端传输的视频流(H264/ACC编码),由服务器端进行解析编码,推送RTMP/HLS格式视频流至视频播放端。
视频播放端:可以是电脑上的播放器(QuickTime Player、VLC),手机端的native播放器,还有就是 H5 的video标签等,目前还是以手机端的native播放器为主。
(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)
对于H5视频录制,可以使用强大的 webRTC (Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在 PC 的 Chrome 上支持较好,移动端支持不太理想。
使用 webRTC 录制视频基本流程
① 调用 window.navigator.webkitGetUserMedia()
获取用户的PC摄像头视频数据。
② 将获取到视频流数据转换成 window.webkitRTCPeerConnection
(一种视频流数据格式)。
③ 利用 WebScoket
将视频流数据传输到服务端。
注意:
虽然Google一直在推WebRTC,目前已有不少成型的产品出现,但是大部分移动端的浏览器还不支持 webRTC(最新iOS 10.0也不支持),所以真正的视频录制还是要靠客户端(iOS,Android)来实现,效果会好一些。
WebRTC支持度
WebRTC支持度
iOS原生应用调用摄像头录制视频流程
① 音视频的采集,利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。
② 对视频进行H264编码,对音频进行AAC编码,在iOS中分别有已经封装好的编码库(x264编码、faac编码、ffmpeg编码)来实现对音视频的编码。
③ 对编码后的音、视频数据进行组装封包。
④ 建立RTMP连接并上推到服务端。
安装nginx、nginx-rtmp-module
① 先clone nginx项目到本地:
brew tap homebrew/nginx
② 执行安装nginx-rtmp-module
brew install nginx-full –with-rtmp-module
2. nginx.conf配置文件,配置RTMP、HLS
查找到nginx.conf配置文件(路径/usr/local/etc/nginx/nginx.conf),配置RTMP、HLS。
① 在http节点之前添加 rtmp 的配置内容:
② 在http中添加 hls 的配置
3. 重启nginx服务
重启nginx服务,浏览器中输入 http://localhost:8080,是否出现欢迎界面确定nginx重启成功。
nginx -s reload
当服务器端接收到采集视频录制端传输过来的视频流时,需要对其进行解析编码,推送RTMP/HLS格式视频流至视频播放端。通常使用的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。鉴于 FFmpeg 工具集合了多种音频、视频格式编码,我们可以优先选用FFmpeg进行转换格式、编码推流。
1.安装 FFmpeg 工具
brew install ffmpeg
2.推流MP4文件
视频文件地址:/Users/gao/Desktop/video/test.mp4
推流拉流地址:rtmp://localhost:1935/rtmplive/home,rtmp://localhost:1935/rtmplive/home
//RTMP 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test
注意:
当我们进行推流之后,可以安装VLC、ffplay(支持rtmp协议的视频播放器)本地拉流进行演示
3.FFmpeg推流命令
① 视频文件进行直播
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test
② 推流摄像头+桌面+麦克风录制进行直播
ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test
更多命令,请参考:
FFmpeg处理RTMP流媒体的命令大全
FFmpeg常用推流命令
移动端iOS和 Android 都天然支持HLS协议,做好视频采集端、视频流推流服务之后,便可以直接在H5页面配置 video 标签播放直播视频。
<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>
本文从视频采集上传,服务器处理视频推流,以及H5页面播放直播视频一整套流程,具体阐述了直播实现原理,实现过程中会遇到很多性能优化问题。
① H5 HLS 限制必须是H264+AAC编码。
② H5 HLS 播放卡顿问题,server 端可以做好分片策略,将 ts 文件放在 CDN 上,前端可尽量做到 DNS 缓存等。
③ H5 直播为了达到更好的实时互动,也可以采用RTMP协议,通过video.js 实现播放。
原文 https://zhuanlan.zhihu.com/p/146323842
书AR小程序开发方案可以按照以下步骤进行:
AR小程序开发费用因开发方式、开发难度、开发团队等因素而异。
一般来说,定制开发的费用较高,因为需要投入大量的人力和时间进行需求分析、设计、开发、测试和上线等环节。根据不同的需求和功能,费用可能在几万到十几万不等。
如果选择模板开发方式,费用相对较低,因为可以直接套用行业模板进行修改和优化。但这种方式可能无法满足所有特定需求,需要开发团队具备足够的技能和经验。
另外,AR小程序的开发费用还涉及到技术选择、服务器租赁、团队工资等因素。例如,选择使用Unity或ARKit等开发工具进行开发,需要支付相应的软件许可费用;同时,如果需要租赁服务器来支持AR小程序的运行,还需要支付相应的服务器租赁费用。
综上所述,AR小程序开发费用的具体数额需要根据实际情况进行评估和决定。在选择开发团队或服务商时,建议综合考虑其经验、技能、服务质量和预算等因素。
以上是图书AR小程序开发的基本方案,具体实施过程中可能需要根据项目需求和实际情况进行调整和优化。
*请认真填写需求信息,我们会在24小时内与您取得联系。