locked
Webserver for HTML page with image RRS feed

  • Question

  • Hello,

    I have to implement a webserver in background on a rapsberry pi under windows IoT.

    With an other application a produce image that should be available through a browser by some clients.

    All what I found is a very simple sebserver which manage only the HTML "index.html" without img= inside.Wher can I find a more complete webserver for HTML page. I don't want to start with javascript or something like that. I work on c# on windows normally.

    Thank you in advance for yours answers.

    Best regards.

    Sunday, July 15, 2018 3:48 PM

All replies

  • there is a webserver that works with windows iot at https://w3pi.info but it is not free, and it doesn't use c#
    Sunday, July 15, 2018 11:45 PM
  • Before the web server sends the response, you could add a little bit of code to convert an image file to a memory stream and then append that to responses for jpg's (or similar).

    First, read all the bytes from an image (file) into an array. Then convert that to a MemoryStream and add the length of the stream to the HTTP response header. After sending the response header, use the MemoryStream CopyToAsync method to append the stream to the response.

    That should result in an image being served up. I've got a similar solution running on Raspberry Pi Win 10 IoT that's been working very well for several months now.

    Good Luck!

    Rick

    Monday, July 16, 2018 1:03 AM
  • Hello TamialPAD,

    Do some research I found there is a tutorial of implementing a simple webserver in a Background Application for Windows IoT Core. 

    And as @Pannell pointed out, for sending an image, you need read image file as stream, add length of the stream to the header and append the stream to the response.

    Here is a simple sample code I implemented you can reference:

    using System;
    using System.Text;
    using Windows.ApplicationModel.Background;
    using Windows.Networking.Sockets;
    using Windows.Storage.Streams;
    using System.IO;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Storage;
    using System.Threading.Tasks;
    
    // The Background Application template is documented at http://go.microsoft.com/fwlink/?LinkID=533884&clcid=0x409
    
    namespace WebServer
    {
        public sealed class StartupTask : IBackgroundTask
        {
            private BackgroundTaskDeferral deferral;
    
            public void Run(IBackgroundTaskInstance taskInstance)
            {
                deferral = taskInstance.GetDeferral();
    
                var webserver = new MyWebserver();
    
                webserver.Start();
            }
    
            internal class MyWebserver
            {
                private const uint BufferSize = 8192;
    
                public async void Start()
                {
                    var listener = new StreamSocketListener();
    
                    await listener.BindServiceNameAsync("8081");
    
                    listener.ConnectionReceived += async (sender, args) =>
                    {
                        var request = new StringBuilder();
    
                        using (var input = args.Socket.InputStream)
                        {
                            var data = new byte[BufferSize];
                            IBuffer buffer = data.AsBuffer();
                            var dataRead = BufferSize;
    
                            while (dataRead == BufferSize)
                            {
                                await input.ReadAsync(
                                     buffer, BufferSize, InputStreamOptions.Partial);
                                request.Append(Encoding.UTF8.GetString(
                                                              data, 0, data.Length));
                                dataRead = buffer.Length;
                            }
                        }
    
                        string query = GetQuery(request);
    
                        using (var output = args.Socket.OutputStream)
                        {
                            using (var response = output.AsStreamForWrite())
                            {
                                var file = await GetImage();
                                var bodyStream = await file.OpenStreamForReadAsync();
    
                                var header = $"HTTP/1.1 200 OK\r\nContent-Length: {bodyStream.Length}\r\nConnection: close\r\n\r\n";
                                var headerArray = Encoding.UTF8.GetBytes(header);
                                await response.WriteAsync(headerArray,
                                                            0, headerArray.Length);
                                await bodyStream.CopyToAsync(response);
                                await response.FlushAsync();
                            }
                        }
                    };
                }
    
                private static string GetQuery(StringBuilder request)
                {
                    var requestLines = request.ToString().Split(' ');
    
                    var url = requestLines.Length > 1
                                      ? requestLines[1] : string.Empty;
    
                    var uri = new Uri("http://localhost" + url);
                    var query = uri.Query;
                    return query;
                }
    
                private async static Task<StorageFile> GetImage()
                {
                    StorageFile imagefile = await KnownFolders.PicturesLibrary.GetFileAsync("SimplePhoto.jpg");
                    return imagefile;
                }
            }
        }
    }

    Make sure add the following app capabilities in Package.appxmanifest:

      <Capabilities>
        <Capability Name="internetClient" />
        <Capability Name="internetClientServer" />
        <Capability Name="privateNetworkClientServer" />
        <uap:Capability Name="picturesLibrary" />
      </Capabilities>

    Use a browser to access the server:

    http://[YOUR SERVER ADDRESS]:8081/

    Best regards,

    Rita


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    Tuesday, July 17, 2018 7:20 AM