Создание приложения для обеспечения безопасности AI с использованием django и react-native, но вывод, отправленный django, не отображается на android и ios, но отображается на Web

Делаю приложение безопасности, которое с помощью модели классификации будет определять, кто находится у моей двери (пока что члены моей семьи) и показывать это на приложении, которое я делаю на react-native. Я разобрался с большей частью кода, но проблема, с которой я столкнулся, заключается в том, что когда django отправляет поток (изображение за изображением, я предполагаю), мобильное приложение не показывает поток (используя expo go), но веб-приложение показывает.

Views.py:

MonitorScreen.jsx

import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useFocusEffect } from '@react-navigation/native';
import Video from 'expo-video';

export default function MonitorScreen() {
  const router = useRouter();
  const [facing, setFacing] = useState('front');
  const [videoUrl, setVideoUrl] = useState('http://192.168.0.101:8000/playground/vid');
  const videoPlayer = useRef(null);
  function toggleCameraFacing() {
    setFacing((current) => (current === 'back' ? 'front' : 'back'));
    // Adjust the video URL if needed when switching cameras
  }



  return (
    <View style={styles.container}>
      {/* Use Image to display the video feed */}
      <View>

        <Image
          source={{uri:videoUrl}}
          style={styles.camera}

        />
      </View>


      <View style={styles.bottomNav}>
        <TouchableOpacity
          style={styles.navItem}
          onPress={() => router.push('StudentListScreen')}
        >
          <AntDesign name="home" size={24} color="#FFF" />
          <Text style={styles.navText}>Home</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.navItem}
          onPress={() => router.push('MonitorScreen')}
        >
          <AntDesign name="camera" size={24} color="#FFF" />
          <Text style={styles.navText}>Cams</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.navItem}
          onPress={() => router.push('AccountScreen')}
        >
          <AntDesign name="user" size={24} color="#FFF" />
          <Text style={styles.navText}>Account</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    width: '100%', // Full screen width
    height: '100%', // Full screen height
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
    marginBottom: '40',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#293241',
    paddingVertical: 10,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  navItem: {
    alignItems: 'center',
  },
  navText: {
    color: '#FFF',
    fontSize: 12,
    marginTop: 5,
  },
});

Я пробовал использовать модуль Video в expo-video, но я думаю, что он предназначен для уже созданных видео, а не для потоковой передачи видео напрямую. На данный момент я запускаю локальный сервер, и запросы выполняются устройствами в той же сети, я видел, как оба мобильных устройства отправляли успешные вызовы API (вызовы запускали камеру), но на моем мобильном устройстве ничего не отображалось, кроме навигационного меню внизу. Остальная часть приложения работает нормально, только эта страница вызывает у меня головную боль.

Вернуться на верх