I am trying to convert video frames to images and store in server but getting an error message:"The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters."
my c# code to get frame to server is:
[WebMethod()]
public static void UploadImage(string imageData)
{
FileStream fs = new FileStream("D:\myimage.png", FileMode.Create);
BinaryWriter bw = new BinaryWriter(fs);
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
and my script is:
<script>
var videoId = 'video';
var scaleFactor = 0.25;
var snapshots = [];
var graph;
var video = document.getElementById('video');
var output = document.getElementById('graph');
function capture(video, scaleFactor) {
if (scaleFactor == null) {
scaleFactor = 1;
}
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}
$(document).ready(function (video, scaleFactor) {
var video = document.getElementById(videoId);
var output = document.getElementById('output');
var canvas = capture(video, scaleFactor);
canvas.onclick = function () {
window.open(this.toDataURL());
};
snapshots.unshift(canvas);
output.innerHTML = '';
for (var i = 0; i < 4; i++) {
graph.appendChild(snapshots[i]);
}
});
$('#sendBtn').live('click', function () {
for (var i = 0; i < 4; i++) {
var image = snapshots[i].toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: '/Default.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image sent!');
}
});
}
});
</script>
and my html5 code is:
<source src="h.mp4">
</video><br/>
<canvas id="graph" width="200" height="150"></canvas>
<input type="button" id="sendBtn" value="Send To Server" />