P5.js: capture = createCapture(VIDEO); Can we reference a different Camera on phone?
capture = createCapture(VIDEO);
Using this on a mobile phone web page generally in my small test calls the front facing camera.
Was wondering about extending so we can have a default, but also pass a parameter to call any other subsequent devices attached (or at least try to) so for example we can call the standard back facing camera ? Please forgive i have missed this in any documentation
Ashley
ashleyjamesbrown
All 23 comments
On http://p5js.org/reference/#/p5/createCapture you will find the full documentation.
More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers.
For instance possible constraints are listed on:
- https://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints
- https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
You can define a facing mode, e.g. user:
function setup() {
createCapture({
audio: false,
video: {
facingMode: "user"
}
});
}
To use the rear camera you choose the environment facing mode. I tested it successfully with my _desktop camera_ (as fallback I guess).
function setup() {
createCapture({
audio: false,
video: {
facingMode: {
exact: "environment"
}
}
});
}
The list shows the different facing modes:
- user: The source is facing toward the user (a self-view camera).
- environment: The source is facing away from the user (viewing the environment).
- left: The source is facing to the left of the user.
- right: The source is facing to the right of the user.
Image source: https://w3c.github.io/mediacapture-main/getusermedia.html#dom-mediatrackconstraintset-facingmode
Nevertheless you should check the browser support and read the security specifications (https):
Security note: A new browser security specification requires that getUserMedia, which is behind createCapture(), only works when you're running the code locally, or on HTTPS. Learn more here and here.
Darius
nok
on 1 Jul 2016
Thanks a lot i did read the reference i just didn't follow through the link to the other constraints.
Might be worth updating the demo as well btw as this doesn't show using any constraints at all - let alone my request but also in that reference you linked me it only shows setup function. As I dug in the reference it states using constraints creates a video object to be displayed using video() but no example code on how to implement this. Using image(capture) just leaves me with black box canvas regardless of mode chosen.
And yeh - i have it on my own server online which has secure hosting. It also has to point to https:// for the scripts which i have hosted on my server as well.
Thanks a lot for the response
ashleyjamesbrown
on 2 Jul 2016
If you wish to look.
Even with the 'desktop' mode you suggest I cant show the image to the canvas yet the camera is clearly streaming. Can you let me know what i'm doing wrong.
ashleyjamesbrown
on 2 Jul 2016
First of all the second sentence of the description of createCapture() is wrong:
Creates a new
sketch.js:14 Uncaught ReferenceError: video is not defined
It can't work with the video() method, because there isn't a method with this name.
Here is my working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript" type="text/javascript" src="https://ashleyjamesbrown.com/p5js/p5.js"></script>
<script language="javascript" type="text/javascript" src="https://ashleyjamesbrown.com/p5js/p5.dom.js"></script>
<script src="sketch.js"></script>
<style>
video {
display: none;
}
</style>
</head>
<body>
</body>
</html>
The method createCapture() creates a <video> element, which we want to _hide_.
var capture;
function setup() {
createCanvas(640, 480);
var constraints = {
audio: false,
video: {
facingMode: "user"
}
};
capture = createCapture(constraints);
}
function draw() {
image(capture, 0, 0, 640, 480);
// filter(INVERT); // ;-)
}
For testing I use Google Chrome (Version 51.0.2704.103 (64-bit)): http://caniuse.com/#feat=stream
nok
on 2 Jul 2016
Did not realise i needed a style tag element in the html. Thanks.
It works fine in the browser and on the phone now and as you say it hides the capture automatically without calling the old function capture.hide();
This code though
facingMode: {
exact: "environment"
}
does not change the phone camera to use the front facing one. On the desktop it calls the same webcam, on the phone it calls the front facing one the same as using _user_
Could we update the reference docs btw about that error line and the html line that needs to go in - i mean once we have a use for this working as currently it does the same as the standard code?
ashleyjamesbrown
on 2 Jul 2016
Did not realise i needed a style tag element in the html. Thanks.
Thanks, I didn't know this method, but in general it does the same: https://github.com/processing/p5.js/blob/master/lib/addons/p5.dom.js#L1451-L1465
The hide() method has the advantage, that you just hide the created and specific <video> element. Instead the CSS way would hide all <video> elements.
The user mode should use the front camera. On the other hand the environment mode should use the rear camera. In your implementation you use the user mode.
The constraints will be passed to navigator.getUserMedia(), so it's a browser support issue.
https://github.com/processing/p5.js/blob/master/lib/addons/p5.dom.js#L985
I tested your implementation on my phone (Galaxy S6) with the Firefox for Android and Google Chrome. By using the Chrome browser I just see a black box. By using the Firefox browser I see a stretched version of myself:
Using the phone was very laggy. I suppose because of the transformation from the streaming source to the <canvas> element. But I didn't test it. In detail I don't know whether the browsers are smart enough to not render the video on a hidden <video> element.
In addition maybe the Chrome browser uses another technologies like the mediaDevices.enumerateDevices() and deviceId to select the right camera: https://webrtc.github.io/samples/src/content/devices/input-output/
nok
on 2 Jul 2016
hallo.
I tried everything but the camera that opens in mobile phones is the face camera
anyone find a solution?
thank you
dimpapadop
on 5 Oct 2016
here is an example of printing out available sources and then specifying one by id to use for capture:
https://github.com/ITPNYU/ICM-2015/blob/master/09_video_sound/02_capture/13_get_sources/sketch.js
lmccart
on 5 Oct 2016
thanks @lmccart it was extremely usefull.!!!!!!!!!!!
dimpapadop
on 5 Oct 2016
I am trying to make a simple live feed using createCapture(VIDEO) on my Raspberry Pi. The problem is that when I access the sketch from my browser, the camera feed switches to my laptop camera. How can I ensure that the createCapture video source is the Raspberry Pi camera?
Thanks for any help.
balsimpson
on 25 Apr 2017
here's an example: https://github.com/ITPNYU/ICM-2015/blob/master/09_video_sound/02_capture/13_get_sources/sketch.js
@TODO add an example like this to the reference or examples page somewhere
lmccart
on 25 Apr 2017
thank you for the reply. maybe I wasn't clear in my question as to what I wanted to achieve. I want to use a live feed of a camera connected to my raspberry pi as the background image for my p5js sketch. So i can overlay other elements relative to this feed and track my cat movement to play a game. but i cannot seem to proceed because when I open to sketch from a different computer, the feed switches to the local camera from the laptop, which I don't want (it should only be using the raspberry pi cam)
so my question is:
do i need to use it in a different manner than
createCapture(VIDEO). Like using motioneye and pointing p5js to the images folder usingloadImageis there someway to specify the camera to be used for the original sketch?
Am still not sure if I've explained it clearly. So just for clarity, am repeating myself:
- sketch uses raspberry pi cam live feed as background image.
- when new user opens the page, they see objects and text overlaid on the source image(pi cam feed)
- use motion detection to use cat movement to interact with the elements overlaid.
thanks for all the help. I tried your sketch but it only shows the camera attached to the local machine from which am accessing the sketch.
balsimpson
on 25 Apr 2017
@balsimpson createCapture will only capture the camera device attached to the browser host environment, meaning if you visit your sketch on your laptop, it will use your laptop camera and when you visit it on a Raspberry Pi, it will use the attached Raspberry Pi camera.
If you are thinking of streaming the Raspberry Pi camera feed footage to a sketch running on your laptop, you will be some kind of server setup. I would start with WebRTC as a possible solution, others might have better suggestion.
limzykenneth
on 26 Apr 2017
I get MediaStreamTrack.getSources is not a function, what have I missed?
CharlesFr
on 8 May 2017
@CharlesFr does your browser support WebRTC? E.g. Safari doesn't support it yet
limzykenneth
on 8 May 2017
I'm running it on Chrome Version 57.0.2987.133 (64-bit)
CharlesFr
on 8 May 2017
@CharlesFr does this example work? If it does then we will need to provide more detail about your sketch, if not then we need more detail about your setup.
limzykenneth
on 8 May 2017
This code though
facingMode: {
exact: "environment"
}
Changed to:
facingMode: "environment"
Worked for me.
JoelStrawnCode
on 17 May 2017
I'm trying to connect an IP Camera instead of a droidcam or webcam. Is it possible ? If yes, Please suggest on how to use an IP Camera with p5.js
CheshtaKumar
on 17 Jan 2019
Hi! For the pi camera part, we've been able to stream to a canvas from a pi camera using this code:
...while the pi is running a pi camera web interface, we have a standard as card image you can use here, that also starts up a wifi net from the pi: http://publiclab.org/pi-camera
Hope that helps!
jywarren
on 16 Apr 2019
Also I believe the demo here isn't working due to an API change in webrtc video... If that's correct I can submit a fix soon! Thanks all.
jywarren
on 16 Apr 2019
Sorry, that's not it (the API change), at least as far as I can tell. It works normally on Chrome/ChromeOS but not on Chrome Android 73.0.3683.90. I'll look for or open a new issue. 馃憤
jywarren
on 16 Apr 2019
False alarm, sorry -- it is working in that environment; the video is just cut off the side of the screen. https://github.com/processing/p5.js/issues/3699
jywarren
on 16 Apr 2019
Related issues
kjhollen
路
3Comments
aferriss
路
3Comments
swirly
路
3Comments
kartikay-bagla
路
3Comments
aparrish
路
3Comments
Most helpful comment
On http://p5js.org/reference/#/p5/createCapture you will find the full documentation.
For instance possible constraints are listed on:
You can define a facing mode, e.g. user:
To use the rear camera you choose the environment facing mode. I tested it successfully with my _desktop camera_ (as fallback I guess).
The list shows the different facing modes:
Image source: https://w3c.github.io/mediacapture-main/getusermedia.html#dom-mediatrackconstraintset-facingmode
Nevertheless you should check the browser support and read the security specifications (https):
Darius