React Native集成Django API视频流遇AVFoundationErrorDomain -11850错误求助

错误码-11850的核心原因是你的Django媒体服务器不支持HTTP字节范围请求（Range Requests）——AVPlayer依赖该功能实现视频流式播放，而谷歌示例视频的服务器默认支持该请求，所以能正常播放。

以下是针对开发和生产环境的具体解决步骤：

开发环境（Django内置runserver） #

Django自带的开发服务器默认不处理Range请求，可通过两种方式修复：

方式1：使用第三方库快速支持 #

• 安装django-range-requests：

  pip install django-range-requests
  

• 在项目settings.py的MIDDLEWARE列表中添加中间件：

  MIDDLEWARE = [
      # ... 其他中间件
      'django_range_requests.middleware.RangeRequestsMiddleware',
  ]
  

• 重启开发服务器后测试视频播放。

方式2：自定义中间件处理Range请求 #

如果不想引入第三方库，可手动编写中间件：

from django.http import HttpResponse
import os
from wsgiref.util import FileWrapper

class RangeRequestsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        # 仅针对200状态的媒体文件响应处理Range请求
        if response.status_code == 200 and hasattr(response, 'file_to_stream'):
            http_range = request.META.get('HTTP_RANGE')
            if http_range:
                # 解析Range头
                range_part = http_range.split('=')[1]
                start_str, end_str = range_part.split('-')
                start = int(start_str) if start_str else 0
                file_size = os.path.getsize(response.file_to_stream.name)
                end = int(end_str) if end_str else file_size - 1
                # 计算分片长度
                chunk_length = end - start + 1
                # 调整响应
                response.file_to_stream.seek(start)
                response = HttpResponse(
                    FileWrapper(response.file_to_stream, chunk_length),
                    status=206,  # Partial Content
                    content_type=response['Content-Type']
                )
                response['Content-Length'] = str(chunk_length)
                response['Content-Range'] = f'bytes {start}-{end}/{file_size}'
        return response

将上述中间件添加到settings.py的MIDDLEWARE列表，重启服务器即可。

生产环境 #

如果用Nginx托管媒体文件，默认已支持Range请求，但需确保配置无错误：

• 检查Nginx的媒体文件location配置，确保路径正确且未禁用Range功能：

  location /media/ {
      alias /实际的媒体文件夹路径/;
      # 可选：添加缓存控制，不影响Range请求
      add_header Cache-Control "public, max-age=31536000";
  }
  

• 重启Nginx生效：

  sudo systemctl restart nginx
  

验证配置是否生效 #

用curl命令测试服务器是否支持Range请求：

curl -I -H "Range: bytes=0-100" http://你的服务器地址/media/测试视频.mp4

若返回状态码206 Partial Content且包含Content-Range响应头，说明配置成功。

React Native端检查 #

• 确保视频URI是完整的HTTP/HTTPS地址，而非相对路径
• 若使用react-native-video库，确认source配置正确：

  import Video from 'react-native-video';
  
  <Video
    source={{ uri: 'http://你的服务器地址/media/你的视频.mp4' }}
    resizeMode="contain"
    style={{ width: '100%', height: 300 }}
  />
  

内容的提问来源于stack exchange，提问作者Phil Cassidy