Releases5 min read

What’s New? Web Embeds & Camera Feeds in ProtoPie Connect

Introducing Stage Views: where ProtoPie prototypes seamlessly integrate with custom layers like web content and live camera feeds.

Iulia Sorodoc
Iulia Sorodoc, Product Marketing ManagerFebruary 28, 2024
Custom Layer Integrations in protopie connect stage view

With ProtoPie Connect 2.7.0, we are thrilled to announce the ability to integrate ProtoPie prototypes with custom layers such as web content and live camera feeds. Let's explore how these features can be harnessed to create immersive user experiences.

Enhance realism and interactivity with web-embedded content

Elevate your ProtoPie prototypes by seamlessly incorporating any web content into your designs with the new Web embed layer. This is perfect for adding interactive 3D objects from platforms such as Spline, Rive, or Bezi within your designs.

To demonstrate how easy it is to use this feature, let's explore embedding a 3D car iframe from Spline into a ProtoPie prototype, as shown in the image above.

  1. Open your 3D design in Spline and export it.
  2. Copy the embed code from the "Public URL" section.
  3. In the ProtoPie Connect Stage, add a "Web embed" layer.
  4. Paste the embed code into the URL field in the Web embed properties panel.

With this new feature, you can also embed interactive maps from Mapbox or Google to add more depth and context to your designs.

And the possibilities extend further. Not only can you import 3D objects and maps, but you can also incorporate any web content using URLs or iframe code snippets.

This means you can embed coded prototypes that can run in a browser and have a URL, which will work with ProtoPie. Advanced users who need to use coding for prototyping will particularly benefit from this feature. Moreover, if you are collaborating across teams that have pre-existing coded prototypes, this feature will enable smoother integration and interaction within ProtoPie environments.

Explore elevated camera feed experiences

add camera feeds and live streaming URLs to your prototypes
Effortlessly add camera feeds and live streaming URLs to your prototypes for real-time visual context.

Effortlessly add camera feeds and live streaming URLs (HLS) to your prototypes for real-time visual context. Integrating camera feeds via the Live camera layer offers practical applications such as:

  • Interactive games: Design interactive games that utilize camera feeds to enable gesture-based controls or incorporate the player's surroundings into the gameplay.
  • Live event streaming: Prototype applications for live event streaming platforms, allowing users to view and interact with live camera feeds of events.
  • Augmented Reality (AR) experiences: Using camera feeds to overlay digital content onto real-world environments creates immersive AR experiences.
  • Automotive industry: Implement camera feeds for automotive vehicle parking assistance, safety aids, and other applications.
  • Robotics industry: Integrate camera feeds into robotics systems for enhanced perception and interaction capabilities.
  • MedTech industry: Utilize camera feeds for applications such as surgery robots and medical imaging systems, improving precision and efficiency in healthcare settings.

Discover Stage Views for enhanced prototyping

Imagine your Stage as a canvas where ProtoPie prototypes merge seamlessly with custom layers like web embeds, 3D models, and camera feeds, elevating your prototyping experience.

Once you add and configure the layers, you can easily rearrange them within the Stage by dragging and dropping. Preview your Stage by clicking on View when ready.

Explore the possibilities of Stage Views:

  • Perfect for implementing global components like GNB;
  • Seamlessly integrate background music files for continuous playback;
  • Delegate different parts of a complex user interface to different prototypes and merge them on the Stage View instead of working everything in one prototype.

Elevate your creativity to new heights

With ProtoPie Connect 2.7, you can elevate your creativity to new heights. The Web embed layer, the Live camera layer, and the Stage View unlock a world of possibilities. These features bring you one step closer to your vision, helping you craft user experiences that are truly unforgettable.