Browserunabhängiger Public Viewer mit inline-Bildbearbeitung auf Basis C#/ASP.NET

Nachfolgende Scripte erlauben einen Public View Zugriff mit dem Browser auf die Aufnahmen der Cam, in Form von Bildern, die regelmäßig nachgeladen werden.
Ideal für einen klassischen Webcam-Einsatz, ohne dass der Client 3rd-Party Produkte wie Flash, Quicktime o. ä. benötigt.
Die Scripte sind für die 5907 entwickelt, müssten aber auch für alle anderen Cams mit diesem Chipsatz problemlos funktionieren.

Vorteile dieser Lösung:

  • Browserunabhängig
  • Sicherheit: Keine Useraccounts / Passwörter im Sourcecode der Seite sichtbar
  • Angezeigtes Bild kann verändert, gekippt, rotiert usw. werden

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InstarViewer.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="CamImage" runat="server" />
    </div>

    <script>

        var newImage = new Image();

        function loadPicture() {
            newImage.src = "getImage.aspx?x=" + (new Date()).getTime().toString();
            newImage.onload = setPicture;
        }

        function setPicture() {
            camImage = document.getElementById('CamImage');
            camImage.src = newImage.src;
            camImage.onload = function () {
                window.setTimeout(loadPicture, 500);
            }
        }

        loadPicture();

    </script>


    </form>
</body>
</html>

Default.aspx.cs

using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Security;
using System.Net;
using System.Text;
using System.IO;
// using System.Drawing;

namespace InstarViewer
{
    public partial class Default : System.Web.UI.Page
    {
      
        protected void Page_Load(object sender, EventArgs e)
        {
            // Not needed
        }

    }
}

getImage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="getImage.aspx.cs" Inherits="InstarViewer.getImage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <!-- Nothing to do // -->
    </div>
    </form>
</body>
</html>

getImage.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Security;
using System.Net;
using System.Text;
using System.IO;
using System.Drawing;

namespace InstarViewer
{
    public partial class getImage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            String user = @"guest";
            String pwd = @"DeinPasswortHierRein";
            String url = "http:xxxxxx.ddns-instar.com:81/tmpfs/snap.jpg";
            Bitmap pictureBitmap;
            
            byte[] byteArray;

            HttpWebRequest webRequest = (HttpWebRequest)HttpWebRequest.Create(url);

            CredentialCache credentialCache = new CredentialCache();
            NetworkCredential networkCredential = new NetworkCredential(user, pwd);
            credentialCache.Add(new Uri(url), "Basic", networkCredential);

            webRequest.Method = "GET";
            webRequest.PreAuthenticate = true;
            webRequest.AuthenticationLevel = System.Net.Security.AuthenticationLevel.MutualAuthRequested;
            webRequest.Credentials = credentialCache;
            webRequest.UserAgent = ": Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 4.0.20506)";
            WebResponse webResponse = webRequest.GetResponse();

            
            pictureBitmap = new Bitmap(webResponse.GetResponseStream());
            webResponse.Close();

            // Beispiel: Bild um 90 Grad drehen
            // pictureBitmap.RotateFlip(RotateFlipType.Rotate90FlipNone);

            // Änderung des Bildcontrasts. Weitere Beispiele / Funktionen der Bildmanipulation 
            // bei http://www.codeproject.com/Articles/33838/Image-Processing-using-C
            // SetContrast(150, pictureBitmap);

            byteArray = bitmapToByteArray(pictureBitmap);

            // Image out to http....
            Response.Clear();
            Response.AddHeader("Content-Disposition", "attachment; filename=camimage.jpg");
            Response.AddHeader("Content-Length", byteArray.Length.ToString());
            Response.ContentType = "image/jpeg"; 
            Response.BinaryWrite(byteArray);
            Response.End();

        }

        // Convert bitmap to byte array
        private byte[] bitmapToByteArray(System.Drawing.Bitmap image)
        {
            MemoryStream ms = new MemoryStream();
            image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
            return ms.ToArray();
        }

        public void SetContrast(double contrast, Bitmap _currentBitmap)
        {
            Bitmap temp = (Bitmap)_currentBitmap;
            Bitmap bmap = (Bitmap)temp.Clone();
            if (contrast < -100) contrast = -100;
            if (contrast > 100) contrast = 100;
            contrast = (100.0 + contrast) / 100.0;
            contrast *= contrast;
            Color c;
            for (int i = 0; i < bmap.Width; i++)
            {
                for (int j = 0; j < bmap.Height; j++)
                {
                    c = bmap.GetPixel(i, j);
                    double pR = c.R / 255.0;
                    pR -= 0.5;
                    pR *= contrast;
                    pR += 0.5;
                    pR *= 255;
                    if (pR < 0) pR = 0;
                    if (pR > 255) pR = 255;

                    double pG = c.G / 255.0;
                    pG -= 0.5;
                    pG *= contrast;
                    pG += 0.5;
                    pG *= 255;
                    if (pG < 0) pG = 0;
                    if (pG > 255) pG = 255;

                    double pB = c.B / 255.0;
                    pB -= 0.5;
                    pB *= contrast;
                    pB += 0.5;
                    pB *= 255;
                    if (pB < 0) pB = 0;
                    if (pB > 255) pB = 255;

                    bmap.SetPixel(i, j,
        Color.FromArgb((byte)pR, (byte)pG, (byte)pB));
                }
            }
            _currentBitmap = (Bitmap)bmap.Clone();
        }

       
    }
}

cp

zum Code

Response.AddHeader(„Content-Disposition“, „attachment; filename=camimage.jpg“);

Attachment;, wird nur benötigt - wenn es heruntergeladen werden soll.

Daher würde ich attachment weglassen, sonst kann es vorkommen, dass es nicht wie gewünscht im Browser angezeigt wird, sondern als Download-Datei!

Das ist genau das was ich für meine Homepage suche. Gibt es hier vielleicht einen netten User der mir als unerfahrenem Homepagebetreiber erklären kann wie man das in die Seiten einbaut?

Herzliche Grüße

Matthias