Implementing WebcamJS in C#/ASP.NET/Razor html web app

85 views Asked by At

I have very little experience with C#/Asp.net/Razor HTML. I'm trying to change the webcam feature on a web app from using the old jQuery webcam (with flash) project to the jhuckaby/webcamjs (on Github) project. I think the problem right now is that the base64 image isn't saving right. I see in the below code something about String_To_Bytes2. What exactly does that do and do you have any ideas on how I could adjust it to take the input base64 image data from the JavaScript side to be saved in a directory folder?

C#:

public ActionResult Capture(int id)
{
    var uniqueFileName = id + ".png";
    var uploads = Path.Combine(hostingEnvironment.WebRootPath, "images/photos/");
    var path = Path.Combine(uploads, uniqueFileName);

    var stream = Request.Body;
    string dump;

    using (var reader = new StreamReader(stream))
        dump = reader.ReadToEnd();

    if (System.IO.File.Exists(path))
    {
        System.IO.File.Delete(path);
        System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));
    }
    else System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));

    return RedirectToAction("ServiceHistory", new { Id = id });
}

private byte[] String_To_Bytes2(string strInput)
{
    int numBytes = (strInput.Length) / 2;
    byte[] bytes = new byte[numBytes];

    for (int x = 0; x < numBytes; ++x)
    {
        bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);
    }
    return bytes;
}

JavaScript (with a bit of Razor HTML)

 <script>
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            //enable_flash: false,
            jpeg_quality: 80
        });
        Webcam.attach('#Camera');
    </script>


    <script>
        function configure() {
            Webcam.set({
                width: 320,
                height: 240,
                image_format: 'jpeg',
                //enable_flash: false,
                jpeg_quality: 80
            });
            Webcam.attach('#Camera');
        }


        // preload shutter audio clip
        var shutter = new Audio();
        shutter.autoplay = false;
        shutter.src = navigator.userAgent.match(/Firefox/) ? '@Url.Content("~/shutter.ogg")' : '@Url.Content("~/shutter.mp3")';

        function take_snapshot() {
            // play sound effect
            shutter.play();

            // take snapshot and get image data
            Webcam.snap(function (data_uri) {
                // display results in page
                document.querySelector('#Camera').innerHTML =
                    '<img id="imageprev" src="' + data_uri + '"/>';
            });
            //Webcam.reset();
        }

        function saveSnap() {
            // Get base64 value from <img id='imageprev'> source
            var base64image = document.getElementById("imageprev").src;

            Webcam.upload(base64image, '@Url.Action("Capture", "Guest", new { Id = @Model.Id })', function (code, text) {
                console.log('Save successfully');
                console.log('The server responded with a' +' '+ code);
               // document.querySelector('#save-btn').style.border = "4px solid green";

                configure();
            });
        }   

    </script>

Any ideas or explanation would be greatly appreciated. I'm a noob and I feel like I'm so close to getting it to work. So far, I've tested and I can send the base64 image data to console with console.log and it does indeed generate the image. It also saves a PNG file in the folder directory, but it's 0kb so something isn't right on the C# side I think.

Again, any assistance would be amazing! Let me know if you need more information.

0

There are 0 answers