pokémon go - wsd.events · Егор Коновалов Делаю на...
TRANSCRIPT
![Page 1: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/1.jpg)
Pokémon GOна веб-технологиях
![Page 2: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/2.jpg)
Егор Коновалов
Делаю на веб-технологиях игры, приложения на телевизоры и VR.
Центр Высоких Технологий, Ижевск
![Page 3: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/3.jpg)
![Page 4: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/4.jpg)
Что может предложить веб?
• Геолокация
• Отслеживания положения устройства
• Захват картинки с камеры
![Page 5: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/5.jpg)
Геолокация
• Geolocation.getCurrentPosition()
• Geolocation.watchPosition()
• Geolocation.clearWatch()
https://www.w3.org/TR/geolocation-API/
![Page 6: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/6.jpg)
if (navigator.geolocation) {/* geolocation is available */
} else {/* geolocation IS NOT available */
}
![Page 7: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/7.jpg)
navigator.geolocation.getCurrentPosition(function(position) {do_something(position.coords.latitude,position.coords.longitude,position.timestamp
);}
);
![Page 8: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/8.jpg)
![Page 9: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/9.jpg)
Device Orientation Event
• deviceorientation
• devicemotion
• compassneedcalibration
https://www.w3.org/TR/orientation-event/
![Page 10: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/10.jpg)
if (window.DeviceOrientationEvent) {/* DeviceOrientationEvent is available */
} else {/* DeviceOrientationEvent IS NOT available */
}
![Page 11: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/11.jpg)
window.addEventListener('deviceorientation',function (event) {
do_something(event.alpha,event.beta,event.gamma
)}
);
![Page 13: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/13.jpg)
if (window.DeviceMotionEvent) {/* DeviceMotionEvent is available */
} else {/* DeviceMotionEvent IS NOT available */
}
![Page 14: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/14.jpg)
window.addEventListener('devicemotion',function (event) {
do_something(event.acceleration.x, // y, zevent.accelerationIncludingGravity.x, // y, zevent.rotationRate.alpha, // beta, gammaevent.interval
)}
);
![Page 15: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/15.jpg)
![Page 16: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/16.jpg)
А потом…
• AccelerometerSensor - http://www.w3.org/TR/accelerometer/
• GyroscopeSensor - http://www.w3.org/TR/gyroscope/
• MagnetometerSensor - http://www.w3.org/TR/magnetometer/
![Page 17: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/17.jpg)
Media Capture and Streams
• …
• navigator.mediaDevices.getUserMedia
• navigator.mediaDevices.enumerateDevices
https://w3c.github.io/mediacapture-main/
![Page 18: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/18.jpg)
if (navigator.mediaDevices) {/* mediaDevices is available */
} else {/* mediaDevices IS NOT available */
}
![Page 19: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/19.jpg)
navigator.mediaDevices.enumerateDevices().then(function (devices) {devices.forEach(function (device) {do_something(device.kind,device.label,device.deviceId
);});
});
![Page 20: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/20.jpg)
navigator.mediaDevices.getUserMedia({video: {width: width,height: height,deviceId: deviceId
}}).then(function (stream) {
do_something(stream);});
![Page 21: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/21.jpg)
![Page 23: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/23.jpg)
<script src="aframe.js"></script>
<a-scene><a-sphere position="0 1.25 -1“
radius="1.25“color="#EF2D5E">
</a-sphere>
<a-entity position="0 0 3.8"><a-camera></a-camera>
</a-entity></a-scene>
![Page 24: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/24.jpg)
Подключаем карту на практике
Google Static Maps API
<a-plane id="map"></a-plane>
navigator.geolocation.getCurrentPosition(function(position){mapEl.src = getMapQuery(position);
});
![Page 25: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/25.jpg)
Включаем камеру и выводим изображение
![Page 26: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/26.jpg)
<a-entity look-controls><a-camera ...></a-camera><a-video id='fromDevice' ...></a-video>
</a-entity><a-plane id='pokemon'></a-plane>
navigator.mediaDevices.enumerateDevices().then(function (devices) {devices.forEach(function (device) {if (device.kind === 'videoinput' && device.label.match(/back/)) {
navigator.mediaDevices.getUserMedia({video: {deviceId: device.deviceId
}}).then(function (stream) {videoEl.src = window.URL.createObjectURL(stream);
});}
});})
![Page 27: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/27.jpg)
Demo
![Page 28: Pokémon GO - wsd.events · Егор Коновалов Делаю на веб-технологиях игры, приложения на телевизоры и vr. Центр Высоких](https://reader033.vdocuments.mx/reader033/viewer/2022051604/5ffeabc597416262f51f7f70/html5/thumbnails/28.jpg)
Вопросы?
https://agegorin.ru:447/webpokego/
github.com/agegorin/webpokego
Егор Коновалов, ЦВТ
@agegorin
Изображение - Isaac Ramirez