Search code examples
flutterdartip-cameraonvif

How to download image from ip camera in Flutter


When I send http request to Ip camera (Onvif)

    "<GetSnapshotUri xmlns=\"http://www.onvif.org/ver20/media/wsdl\">" +
          "<ProfileToken>PROFILE_000</ProfileToken></GetSnapshotUri>";

I got Response containing Url:

....
 <s:Body><trt:GetSnapshotUriResponse><trt:MediaUri> 
 <tt:Uri>http://192.168.1.102:13237/snapshot.cgi</tt:Uri> 
 <tt:InvalidAfterConnect>false</tt:InvalidAfterConnect> 
 <tt:InvalidAfterReboot>false</tt:InvalidAfterReboot><tt:Timeout>PT5S</tt:Timeout></trt:MediaUri> 
 </trt:GetSnapshotUriResponse></s:Body></s:Envelope>

I've tried to use image_downloader plugin, not worked. I can see it in browser(Chrome) but I can't view it via Image.network('http://192.168.1.102:13237/snapshot.cgi') Widget

I got error

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 401, http://192.168.1.102:13237/snapshot.cgi

When the exception was thrown, this was the stack: 
#0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:90:9)
<asynchronous suspension>
#1      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:47:14)
#2      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
...
Image provider: NetworkImage("http://192.168.1.102:13237/snapshot.cgi", scale: 1.0)
Image key: NetworkImage("http://192.168.1.102:13237/snapshot.cgi", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

I've found answer on Java

URL url = new URL("http://webacm-ip-adr:8084/snapshot.cgi");
InputStream input = url.openStream();
String jpg = "sample.jpg";
FileOutputStream output = new FileOutputStream(jpg);
IOUtils.copy(input, output);

Updated after get correct answer. I can see params needed for create Digest key, but due I can't return Response object by dart code Response header in http sniffer that I can't get by Dart code


Solution

  • How about instead of image downloader use

    import 'package:http/http.dart' as http;
    import 'dart:io';
    import 'package:path_provider/path_provider.dart';
    import 'package:flutter/foundation.dart';
     Future<File> _downloadFile(String authEncoded,String url, String param) async {
      final response = await http.post(url,
        headers: {
           HttpHeaders.authorizationHeader: 'Basic ' + authEncoded 
           // Do same with your authentication requirement
        },
        body: param,
      );
    
     response.headers.forEach((k,v) => print (k+" : "+v));
     //Your response headers here
    
    if(response.statusCode==200){
     String dir = (await getApplicationDocumentsDirectory()).path;
      File file = new File('$dir/image.jpg');
      await file.writeAsBytes(response.bodyBytes);
      return file;
     } else {
        print("Error : " + response.statusCode.toString());
      }
    }
    

    Now Call

    File file = await _downloadFile("http://192.168.1.102:13237/snapshot.cgi", "<GetSnapshotUri xmlns=\"http://www.onvif.org/ver20/media/wsdl\"><ProfileToken>PROFILE_000</ProfileToken></GetSnapshotUri>");