Camera upload button

[Paul Chapman]

Thank you very much - it works a treat

[Paul Chapman]

.ok... me again, and if i then wanted to save the image into a library on the sharpoint site with a datestamp as a name?...


Paul

[rostislav]

Here's a pretty complete example that you can use to set this thing up for yourself.

1. Use this JavaScript code (paste inside the JavaScript editor):

Code: Select all

window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function(error) {
			console.log("Video capture error: ", error.code); 
		};
	document.getElementById("snap").addEventListener("click", function() {
		context.drawImage(video, 0, 0, 640, 480);
	});
	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
}, false);


function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}
	
function createFile() {
    var clientContext;
    var oWebsite;
    var oList;
    var fileCreateInfo;
    var fileContent;

    clientContext = new SP.ClientContext.get_current();
    oWebsite = clientContext.get_web();
	//specify the ID of your document list
    oList = oWebsite.get_lists().getById("A201C074-54F9-4304-8FB7-07722D7AB2A3");

    fileCreateInfo = new SP.FileCreationInformation();
	//specify the name of the file to be created
    fileCreateInfo.set_url("my new file.png");
    fileCreateInfo.set_content(new SP.Base64EncodedByteArray());

    var img = convertCanvasToImage(document.getElementById("canvas"));
    var arr = convertDataURIToBinary(img.src);
    for (var i = 0; i < arr.length; ++i)
    {
        fileCreateInfo.get_content().append(arr[i]);
    }

    this.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);

    clientContext.load(this.newFile);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, successHandler),
        Function.createDelegate(this, errorHandler)
    );

    function successHandler() {
        alert(
            "Go to the " +
            "document library " +
            "to see your new file.");
    }

    function errorHandler() {
        alert("Request failed: " + arguments[1].get_message());
    }
}

function convertDataURIToBinary(dataURI)
{
    var BASE64_MARKER = ';base64,';
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
    var base64 = dataURI.substring(base64Index);
    var raw = window.atob(base64);
    var rawLength = raw.length;
    var array = new Uint8Array(new ArrayBuffer(rawLength));
 
    for (i = 0; i < rawLength; i++)
    {
        array[i] = raw.charCodeAt(i);
    }
    return array;
}

window.saveFile = function() {
 createFile();
}

2. and add the following html as contents of an html control:

Code: Select all

<video id="video" width="640" height="480" autoplay></video>
<button type="button" id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

3. change the list id inside the code as appropriate (you need to specify the ID of the document library you will be saving the file to).

4. Now when you're on the page, click snap to snap the photo. Now type saveFile() in the console. This should save the snapped picture into the library.