Access webcam of device (getUserMedia)

sidjuego · October 12, 2017, 7:47am

Hi all,

I just stumbled upon a blog post of play canvas regarding the access to webcamera by using getUserMedia

My requirement is for the same but I am not sure where exactly to do it. I have already achieved this in native javascript (not in play canvas) but I am not sure on how to achieve it here.

I would really appreciate if you can help me into this.

Thanks,

OnizeAyanami · October 12, 2017, 2:46pm

^^ have u tried drag&drop ur native javascript in to the asset space?

will · October 13, 2017, 5:50am

Check out PlayCanvasAR on GitHub:

It uses getUserMedia for AR purposes. The particular line of interest is here:

github.com

playcanvas/playcanvas-ar/blob/master/src/playcanvas-ar.js#L554


var self = this;


var constraints = {
    audio: false,
    video: {
        // Prefer the rear camera
        facingMode: "environment"
    }
};


navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
    self.videoPlaying = false;


    // Create the video element to receive the camera stream
    var video = document.createElement('video');


    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    // This is critical for iOS or the video initially goes fullscreen
    video.setAttribute('playsinline', '');
    video.srcObject = stream;