整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前端開發中，工程師常常這樣調侃“一入前端深似?！薄４_實，前端的應用面十分廣，知識點比較零碎，學習范圍也比較大，當然，實現的功能也更加全面。所以對于當下十分火熱的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 禁止閑聊，非喜勿進?。?/span>
對于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小時內與您取得聯系。
