Object Recogniser

Stap 1

Tijd om te beginnen! Het code scherm onderaan de pagina is nu leeg (als het goed is zie je alleen een 1 staan nu, die 1 geeft de regel aan waarop je nu aan het programmeren bent. Voor stap 1 mag je de volgende code toevoegen:

{
	init: function() {
		const camera = this.initCamera();
		const model = cocoSsd.load();
		this.startDetector(camera, model, this.detectFrame);
	},
}

De accolades (dat zijn deze tekens {}) hebben we nodig om het programma goed in te delen. Dit stuk van de code init: function() start ons programma, waarna we de camera laden (dat is de webcam die we zometeen gaan gebruiken), en laden we een model (dit is een vooraf getraind model getraind op heel veel data zodat we dit zelf niet hoeven te doen). Hierna starten we een herkenner. We maken vandaag gebruik van een libary (een soort bilbiotheek van al bestaande code die door meer mensen/bedrijven wordt gebruikt), op die manier kunnen we het model laden en de herkenner starten.

Stap 2

Vervolgens kunnen we de volgende code toevoegen voor de laaste accolade:

detectFrame: function (video, model) {
	model.detect(video).then(predictions => {
		this.renderPredictions(predictions);
		requestAnimationFrame(() => {
			this.detectFrame(video, model);
		});
	});
},

Dit stuk code gebruikt het model om voorspellingen te maken in elk frame (video is normaal 24 beelden per seconde, dus in elke afbeelding worden items herkend).

Stap 3

Als laatste mag je de volgende code weer toevoegen, dit keer weer voor de laatste accolade:

style: {
	font: 'sans-serif',
	textColor: '#000000',
	borderColor: '#00b4ff',
},

Dit stuk geeft ons de mogelijkheden om aan te passen hoe onze object-herkenner er zo uit ziet. Je kunt de tekstkleur (textColor) en de kleur van de vierkanten waarin items zitten (borderColor) die herkent worden aanpasen. De volgende website kun je gebruiken om een kleur te kiezen: het enige wat je dan hoeft te doen is bijvoorbeeld '#000000' te vervangen door '#EE5433' (in dit geval een mooie kleur rood). Je kunt zelf zo'n kleurcode maken met de kleurkiezer hieronder.

Dit kun je ook later aanpassen en hoef je niet perse nu te doen.

Stap 4

Als het goed is ziet jouw code er nu ongeveer zo uit:

{
	init: function() {
		const camera = this.initCamera();
		const model = cocoSsd.load();
		this.startDetector(camera, model, this.detectFrame);
	},

	detectFrame: function (video, model) {
		model.detect(video).then(predictions => {
			this.renderPredictions(predictions);
			requestAnimationFrame(() => {
				this.detectFrame(video, model);
			});
		});
	},

	style: {
		font: 'sans-serif',
		textColor: '#000000',
		borderColor: '#00b4ff',
	},
}

Druk nu op het knopje "RUN CODE" naast de code die je zojuist helemaal zelf hebt geschreven! Het laden van de item-herkenner kan tussen de 20 en 30 seconden duren. Hierna zie je jouw eigen geschreven item-herkenner verschijnen. Probeer er maar een aantal items voor te houden om te zien of hij werkt! Als je net stap 3 hebt overgeslagen kun je deze nu nog doen.

Stap 5

We hadden het er net al over dat we gebruik maken van een libary, in dit geval is deze gemaakt door Google, en dus waarschijnlijk is het model dat wij hebben gemaakt ook getraind door een Amerikaans team. Merk je dat terug in de herkenning van de objecten?

Stap 6

Deze stap is niet noodzakelijk.

Het camerabeeld wordt nu precies weergegeven zoals het door de camera wordt gezien. Dit kan wat onnatuurlijk aanvoelen. Om dit op te lossen, kunnen we het beeld spiegelen. Dit kunnen we aanpassen in de initialisatie van de camera. Pas hiervoor de init-functie aan, zodat deze er als volgt uitziet:

init: function() {
	const options = {
		mirror: true,
	};
	const camera = this.initCamera(options);
	const model = cocoSsd.load();
	this.startDetector(camera, model, this.detectFrame);
},

Als je deze opdracht op je smartphone, heb je waarschijnlijk meerde camera's tot je beschikking: aan de voorkant en aan de achterkant van je toestel. Je kunt kiezen welke camera je wilt gebruiken, maar daarvoor moet je wel de ID van je camera achterhalen. Dat kan je doen met de camerakiezer hieronder.

Daarna kan je het blokje met options uit het vorige stukje code als volgt aan passen. Plak de ID van je camera tussen de aanhalingstekens (de aanhalingstekens zijn heel belangrijk, laat die staan).

const options = {
	mirror: true,
	deviceId: 'plak de ID van je camera hier',
};