Turn on / Access the web camera in an Axure prototype? (javascript)


#1

Hello all,

I’m struggling with a project and was hoping someone might be able to help. I need to turn on the web cam of the device the prototype is running on and see the stream. I went trough the few threads I could find here:



but they are locked and of not much help really.

In one of those threads the user was successful in doing exactly what I need (https://dli2ts.axshare.com/#g=1&p=home), but with using the plugin functionality of axshare. In my case this is not an option, since the project must be run locally.

My traction so far is that I got the prototype to trigger the camera usage permission and turn it on, but I can’t figure out how to get the stream to show. Here is the example file: WebCam Access.rp (43.0 KB)

Unfortunately I’m not good with javascript and I have no idea how (if even possible) to pass the video to the inline frame.

Here is the script I use on load I took from this tutorial (https://webmobtuts.com/javascript/accessing-webcam-with-javascript-getusermedia/) and it goes like this:

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
var video = document.querySelector(‘video’);
if (“srcObject” in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});

I’ll be very grateful to anyone who could give me a hand with that. I guess it will also will generally be very helpful to a lot of people attempting to build the same functionality.


#2

Did you find a solution to this problem?


#3

If you want to run locally, you need a https server.

APIs with functions like getUserMedia , getDisplayMedia and enumerateDevices require a secure context

That’s why WebCam Access.rp can work on axshare.

Axure Preview is http


#5

Hi,

I wanted to do the same and just tried to get started with your file. After looking at the resources you posted as well as https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia , I finally got it to work.

Your file WebCam Access.rp is not working when published on AxShare because it is missing the video-element in the html. Without that, the DOM selector “var video = document.querySelector(‘video’);” is not gonna find anything.

You could inject that video element e.g. with jQuery which Axure uses anyway. It seems that it doesnt work with the iframe-element though.

Like in the example above that works, i did it with a

Dynamic Panel named “dynVideo” in axure (in the published html it will appear as an DIV with 'data-label=“dynVideo” ’ as attribute)

One “open external link” to append the video element (on “Page Loaded”, because it needs to be defined before the script for the permission and video stream runs)

javascript:void( $(’[data-label=“dynVideo”]’).append( <video></video>));

A second “open external link” with the script on the designated dynamic panel, when this element is “Loaded” (i didn’t need the audio and wanted the rear cam to be shown, also removed the “e” within the function(e) as this variable isnt used anyway):

javascript: navigator.mediaDevices.getUserMedia({
audio: false,
video: {facingMode: “environment”}
}).then(function(stream) {
var video = document.querySelector(‘video’);
if (“srcObject” in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function() {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});

Remarks

  • The video stream dimensons could be too big for the mobile screen (with screenshots i figured i did get a resolution of 480x640px on one of the phones), you can enclose it in another smaller dyamic panel to mask it.
  • One tricky thing is that most of the phones have multiple rear cameras. With this script it seems to choose the one with the widest lens.
  • I got it to run on the Chrome Mobile browser on two Android phones (havent checked other ones like ios. Other posts mention issues with safari on ios)

Let me know if this works also for you.

Kind regards

(Can someone tell me how to post HTML tags with brackets in these forums without them being compiled?)


#6

Thank you @ProtoAlex :slight_smile:

Although the project I needed this for is long closed, the solution is a valuable resource, and I’m sure other people will also need this.

Here is an important warning for those that are about to copy/paste the code snippets off your post: Depending on your regional settings some characters (usually the quotation marks) may be converted to non-standard symbols which will break the code. The browsers will spit out console errors, but you have to know what to look for.

To make things easier for everyone, I implemented @ProtoAlex’s code in a simple new file, and added a “start” and “stop” buttons. I kept the .append method (creating the child “video” tag element in the html) on the page load event, but moved the navigator.mediaDevices.getUserMedia(… part to the start button. That gives better control, and is probably closer to real-life use-cases. Of course, if you need the video to start automatically with the loading of the page, you move that part of the code from the button back to the loaded event of the dynamic panel. The “stop” button is completely optional :slight_smile:

I tested it on Safari with the built-in web cam on my MacBook, so hopefully it should work well not only on mobile, but on desktop as well.

Enjoy: WebCamTest.rp (49.2 KB)


#7

You are right, somehow the punctuation characters those look fine in the editor, but here in the preview and on the page they are different. Seems to be a regional/language problem (OS, browser, Axure or my code editor).

Thanks for the heads up!


closed #8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.