aura_sphere_360 1.1.0

Immersive 360° panorama and video viewer for Flutter. Display spherical images and videos with touch controls, sensor controls, and smooth 30 FPS playback. Perfect for VR experiences and 360° media.

Aura Sphere 360

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

✨ 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

• Quick Start Guide
• Deployment Guide
• API 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

• GitHub Repository
• Issue Tracker
• Pub.dev Package