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.