WebAR

Transcript

1. WEB AR
2. なぜWebARの話をするかというと
3. Safari 11からカメラにアクセスできます （Androidは前からできます）
4. まだベータ版ですが 新機能として公式に紹介されています https://developer.apple.com/library/content/releasenotes/General/WhatsNewI nSafari/Safari_11_0/Safari_11_0.html
5. New in Safari 11.0 – Camera and microphone access. - Added support for the Media Capture API. - Websites can access camera and microphone streams from a user's device (user permission is required.)
6. Media Capture Stream API って規格です
7. 規格については難しので、 W3Cで読んでください https://www.w3.org/TR/mediacapture-streams/
8. 今日はコレを使って 何ができるか紹介したいと思います
9. ざっくりした使い方説明
10. カメラやマイクの入力を getUserMediaで取得します
11. navigator.mediaDevices.getUserMedia (constraints)
12. これはPromise形式になっています
13. navigator.mediaDevices.getUserMedia (constraints) .then (successCallback).catch (failureCallback)
14. パラメータを渡すことで 解像度やリアカメラ、フロントカメラなどを 選ぶことができます
15. マイクとカメラの指定 { audio: true, video: true }
16. 解像度の指定 { video: { width: 1280, height: 720 } }
17. 解像度の最小値の指定 { video: { width: { min: 1280 }, height: { min: 720 } }}
18. フレームレートの指定 { video: { frameRate: { max: 15 } } }
19. カメラの指定 { video: { facingMode: { exact: "user" } } } リアカメラは "environment" です
20. まとめ navigator.mediaDevices.getUserMedia (constraints) .then (function (stream) { const video = document.querySelector ('video') video.src = window.URL.createObjectURL (stream) video.onloadedmetadata = function(e) { video.play () } }) .catch (function (err) { console.log (err.name + ": " + err.message) })
21. これでカメラの映像をJavaScriptで 取得できました
22. ブラウザでARができるようになった ということです
23. AR
24. その時周囲を取り巻く現実環境に 情報を付加・削除・強調・減衰させ、 文字通り人間から見た現実世界を 拡張するものを指す
25. ！すみません！ サンプルしか用意できませんでした
26. カメラでマーカーを認識して オブジェクトを表示する
27. https://github.com/jeromeetienne/AR.js
28. カメラで顔を認識する
29. https://ics.media/entry/13038
30. クロマキー合成する
31. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_us ing_canvas
32. まだまだ課題が多くあります
33. ➔ 対応端末が少ない ➔ 処理速度や精度が低い
34. 今まではアプリだけだったARを ブラウザで表現できるようになります
35. これからWebARが 盛り上がるといいなー