Scan code from within Storyline?


Is there some way that a Storyline-created resource could use a device's camera to scan a code, and branch to a particular slide in the resource? (And if so, would that work when the resource is downloaded into the Articulate Mobile Player app, and used off-line?)

In the project we have, we would ideally want students to wander around an outdoor environment that has no WiFi or mobile coverage. They would carry an iPad that has the Articulate Mobile Player app installed, and the Storyline resource pre-downloaded onto it. The students would run the Storyline resource, and look for codes to scan (e.g. QR codes). When they scan the code, the Storyline resource would identify it, and branch to a relevant slide in the resource. After working through a few slides, they would end up back at the 'home' screen, ready to scan another code.

I have created a Storyline resource where students can type a six-character code into the iPad, and Storyline uses that to branch to the relevant slide in the resource - but it would be simpler if the students could use the devices camera to scan a code, instead of typing it in (with possibly wet fingers/mistypes).

Thanks, Eoghan.

4 Replies
Eoghan Clarkson

Thanks Michael, those are interesting options.

It would be great to have a go at developing a self-contained app, but I don't think it would be practicable for us (at least, not for our first run of the project).

If there is a feature built into Storyline to allow camera use to scan codes, that would be perfect - otherwise I think we will stick with the students having to type a number code into the Storyline resources.

Thanks, Eoghan.

Paul Kizilos

This may be a good start for this task.

//element structure on the page (slide) where the video will appear
var target = document.getElementById('slide-window').childNodes[0];
//create the video element through script
var vk = document.createElement('video');
vk.setAttribute('id', 'videoplayer');
vk.setAttribute('width', '100%');
vk.setAttribute('controls', '');
vk.setAttribute('autoplay', '');
//replace the target child elements on the slide with the video element
target.replaceChild(vk, target.childNodes[0]);
//create a capture button and add it after the video element
var bk = document.createElement('button');
bk.setAttribute('id', 'captureBtn');
bk.innerHTML = "Capture";
//create a canvas element to hold the captured image and add it after the button
var ck = document.createElement('canvas');
ck.setAttribute('id', 'canvas');
ck.setAttribute('width', '320');
ck.setAttribute('height', '240');
ck.innerHTML = '';
const player = document.getElementById('videoplayer');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('captureBtn');
// identify video
const constraints = {
video: true,
captureButton.addEventListener('click', () => {
// When button is clicked, dapture current video frame and put it into the canvas element.
context.drawImage(player, 0, 0, canvas.width, canvas.height);
// When script runs, attach the video stream to the video element and autoplay the video.
.then((stream) => {
player.srcObject = stream;