Add Twilio integration for TURN server configuration in WebRTC setup, update video attributes, and create .gitignore for environment files and cache.

.gitignore

@@ -0,0 +1,4 @@
+.vscode
+.streamlit
+.env
+__pycache__

app.py

@@ -1,3 +1,4 @@
+import os
 import cv2
 import math
 import numpy as np
@@ -6,8 +7,14 @@ import streamlit as st
 import pandas as pd
 import altair as alt
 import time
-from streamlit_webrtc import webrtc_streamer, VideoProcessorBase, RTCConfiguration
+from streamlit_webrtc import (
+    webrtc_streamer,
+    VideoProcessorBase,
+    WebRtcMode,
+    VideoHTMLAttributes,
+)
 from streamlit_autorefresh import st_autorefresh
+from twilio.rest import Client
 
 from line_detector import (
     LineDetector,
@@ -28,6 +35,34 @@ st.set_page_config(
     initial_sidebar_state="expanded",
 )
 
+
+def get_ice_servers():
+    """
+    Get ICE servers configuration.
+    For Streamlit Cloud deployment, a TURN server is required in addition to STUN.
+    This function will try to use Twilio's TURN server service if credentials are available,
+    otherwise it falls back to a free STUN server from Google.
+    """
+    try:
+        # Try to get Twilio credentials from environment variables
+        account_sid = os.environ.get("TWILIO_ACCOUNT_SID")
+        auth_token = os.environ.get("TWILIO_AUTH_TOKEN")
+
+        if account_sid and auth_token:
+            client = Client(account_sid, auth_token)
+            token = client.tokens.create()
+            return token.ice_servers
+        else:
+            st.warning(
+                "Twilio credentials not found. Using free STUN server only, which may not work reliably."  # Removed Streamlit Cloud mention for generality
+            )
+    except Exception as e:
+        st.error(f"Error setting up Twilio TURN servers: {e}")
+
+    # Fallback to Google's free STUN server
+    return [{"urls": ["stun:stun.l.google.com:19302"]}]
+
+
 # Apply custom CSS for a modern minimalist design
 st.markdown(
     """
@@ -265,11 +300,6 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# WebRTC Configuration
-RTC_CONFIGURATION = RTCConfiguration(
-    {"iceServers": [{"urls": ["stun:stun.l.google.com:19302"]}]}
-)
-
 # App header with minimalist design
 st.title("🚁 Drone Line Follower")
 st.markdown("Vision-based line tracking with real-time PID control")
@@ -711,9 +741,23 @@ with col1:
     # Create the webrtc component
     webrtc_ctx = webrtc_streamer(
         key="line-detection",
+        mode=WebRtcMode.SENDRECV,
+        rtc_configuration={"iceServers": get_ice_servers()},
         video_processor_factory=VideoTransformer,
         media_stream_constraints={"video": True, "audio": False},
         async_processing=True,
+        video_html_attrs=VideoHTMLAttributes(
+            autoPlay=True,
+            controls=False,
+            style={
+                "width": f"1280px",
+                "height": f"720px",
+                "border-radius": "8px",
+                "margin": "0 auto",
+                "display": "block",
+                "border": "2px solid #AAAAAA",  # Changed border to lighter grey
+            },
+        ),
     )
 
     # Pass the settings to the video transformer

requirements.txt

@@ -5,3 +5,4 @@ opencv-python==4.9.0.80
 numpy==1.24.4
 altair==5.5.0
 matplotlib==3.10.0
+twilio~=9.4.3