Aura Sphere 360

Immersive 360° panorama and video viewer for Flutter. Perfect for VR experiences, virtual tours, and 360° media playback.

pub package

✨ Features

  • ✅ 360° image panoramas
  • ✅ 360° video panoramas
  • ✅ WebRTC live streaming (NEW)
  • ✅ Touch controls (pan, zoom, rotate)
  • ✅ Sensor controls (gyroscope)
  • ✅ Smooth 30 FPS video playback
  • ✅ Cross-platform (iOS, Android, Web)
  • ✅ Easy integration

🚀 Getting Started

Installation

Add aura_sphere_360 to your pubspec.yaml:

dependencies:
  aura_sphere_360: ^1.0.0

Then run:

flutter pub get

Image Panoramas

import 'package:aura_sphere_360/aura_sphere_360.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AuraSphere(
      child: Image.asset('assets/panorama360.jpg'),
    ),
  );
}

Video Panoramas

import 'package:aura_sphere_360/aura_sphere_360.dart';
import 'package:video_player/video_player.dart';

class VideoPanoramaScreen extends StatefulWidget {
  @override
  _VideoPanoramaScreenState createState() => _VideoPanoramaScreenState();
}

class _VideoPanoramaScreenState extends State<VideoPanoramaScreen> {
  late VideoPlayerController _controller;
  bool _initialized = false;

  @override
  void initState() {
    super.initState();
    
    // Load video from file, network, or assets
    _controller = VideoPlayerController.file(File('path/to/video.mp4'));
    // Or from network:
    // _controller = VideoPlayerController.networkUrl(
    //   Uri.parse('https://example.com/video.mp4')
    // );
    
    _controller.initialize().then((_) {
      _controller.setLooping(true);
      _controller.play();
      setState(() => _initialized = true);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _initialized
          ? AuraSphere(
              videoPlayerController: _controller,
              sensorControl: SensorControl.orientation,
            )
          : Center(child: CircularProgressIndicator()),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

WebRTC Live Streaming (NEW)

Important: WebRTC requires additional setup. See WEBRTC_SETUP_GUIDE.md for detailed instructions.

Resolution: The panorama viewer automatically uses the incoming stream's resolution. No configuration needed - works with any resolution from 720p to 8K!

import 'package:aura_sphere_360/aura_sphere_360.dart';

class WebRTCPanoramaScreen extends StatefulWidget {
  @override
  _WebRTCPanoramaScreenState createState() => _WebRTCPanoramaScreenState();
}

class _WebRTCPanoramaScreenState extends State<WebRTCPanoramaScreen> {
  RTCVideoRenderer? _renderer;
  bool _initialized = false;

  @override
  void initState() {
    super.initState();
    _initializeWebRTC();
  }

  Future<void> _initializeWebRTC() async {
    _renderer = RTCVideoRenderer();
    await _renderer!.initialize();
    
    // Connect to your WebRTC stream
    // This is a simplified example - you'll need proper signaling
    final stream = await navigator.mediaDevices.getUserMedia({
      'video': true,
      'audio': false,
    });
    
    _renderer!.srcObject = stream;
    setState(() => _initialized = true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _initialized
          ? AuraSphere(
              webrtcRenderer: _renderer,
              sensorControl: SensorControl.orientation,
            )
          : Center(child: CircularProgressIndicator()),
    );
  }

  @override
  void dispose() {
    _renderer?.dispose();
    super.dispose();
  }
}

For real-world integration with remote WebRTC peers (like 360° cameras), see the WebRTC Setup Guide.

🎮 Controls

Touch Controls

  • Pan: Drag to look around
  • Zoom: Pinch to zoom in/out
  • Rotate: Two-finger rotate

Sensor Controls

  • Gyroscope: Move your device to look around
  • Orientation: Automatic orientation tracking

📱 Supported Platforms

  • ✅ iOS
  • ✅ Android
  • ✅ Web (without sensor controls)

🎥 Video & Streaming Support

Video Playback

  • Frame Rate: 30 FPS (smooth for 360° viewing)
  • Supported Sources: Local files, network URLs, assets
  • Performance: Optimized for videos up to 1920x1080
  • Auto-scaling: Larger videos are automatically scaled

WebRTC Live Streaming (NEW)

  • Real-time: Live 360° video streaming
  • Low Latency: Optimized for real-time applications
  • Flexible: Works with any WebRTC source
  • Use Cases: Live events, remote tours, video conferencing

📚 Documentation

💡 Examples

Check out the example folder for complete working examples:

  • Image panoramas
  • Video panoramas
  • WebRTC live streaming
  • Custom controls
  • Sensor integration

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

Apache 2.0

🙏 Credits

Built on top of the excellent panorama_viewer package by dariocavada, with added video support and enhancements.

🔗 Links

Libraries

aura_sphere_360
Aura Sphere 360 - Immersive 360° panorama and video viewer for Flutter
panorama_viewer