I need some help! I’m a complete newbie to 8th Wall and js.
Briefly; the project is a large mural with imbedded AR experiences.
The mural is divided into 6 individual portraits. Each portrait will be activated by AR, allowing them to ‘come to life’ and tell their story.
Each story will be told over approximately 90 seconds and will require a number of elements:
Image Target: Each portrait will activate the individual experience. This can happen with a ‘play’ gesture.
Portal: Each portal will be rectangular and the background image will be a wide aspect video. (The viewer cannot enter the portal space)
Green Screen Video with Audio: The portrait, or full length person will stand on the ground in front of the portal.
3D: A 3D model will appear in front of the portrait/person.
Animation: Each portrait will transition, or animate from the flat mural into their position, then animate back at the end of the story
Pause When Lost: Both video elements should pause and synchronously continue playing when relocated.
I have many questions, but my top 3 are:
Is there a resolution vs duration limit on the green screen video? I’d like to have each green screen video run for about 90 sec at 1080x 700. We may be able to stream the video if that’s preferable.
Is there a resolution vs duration limit on the portal video? What are the optimum dimensions for the portal video?
The portal video must run in sync with the green screen video. They should both pause when lost, and re-sync when continuing to play. Would there be any issues here?
That’s plenty to get started. Can someone help out here?
Matt
Resolution vs. Duration Limit on Green Screen Video: For WebAR experiences, especially on mobile devices, it’s important to optimize video assets. While 4K resolution is unnecessary, 1080p (1080x700) is a good choice. Optimizing further using tools like HandBrake can improve performance:HandBrakeIf streaming the video is an option, you might want to explore our portal project:Portal Streaming Project
Resolution vs. Duration Limit on Portal Video: There’s a balance to strike between video quality and load time. Lower resolution videos load faster but may appear blurry, while higher resolution videos look better but may load slower. As mentioned, 4K isn’t necessary. The optimal dimensions can vary based on your user base and specific use case.
Synchronization and Pause on Lost: To ensure that both the portal video and green screen video run in sync, and pause/resume correctly when the target is lost/found, you can start videos on certain events or clicks and pause them on the xrimagelost event. Building a custom image target component would be beneficial.Here’s a reference to a sample project for pausing videos on lost targets:Pause Video on Lost
Additional Information
Autoplay Policies: Autoplay policies for videos with audio vary between browsers:
Safari: Autoplay is allowed if the video has no audio or is muted. More details are in Apple’s documentation.
Chrome: Autoplay with sound is allowed if the user has interacted with the domain. More details are in Google’s documentation.For an example project that plays a video with sound upon user interaction with an image target, see:8th Wall’s Playground Example.