AR result capture into .jpg / AR photo taking

[max903]

Hi Hiukim! Thank you very much for your great works, and I am glad to see you are adding the face tracking feature to the project.

May I know how to do an image capture with all the 3D models together with the webcam scene, is there any Function I can call from your library? I am playing the AR with my son and want to capture/download some AR moments.

Again, Thank you very much for this easy-to-use library. All the works you did are amazing.

[hiukim]

@max903 Unfortunately, it's not that straight forward. You need to create another canvas element, then render the background video and the AR canvas on it. After that, export the canvas as jpg. I don't have any examples right now, and the library doesn't provide such a method.

I'll see if I can create an exmaple on this, or better yet, a method call later.

[max903]

@hiukim Thank you very much for your reply. I did tried the following code take_photo(), it works but the quality is fairly poor, low resolution. Please see if it helps.

In addition, I discover that when exporting the a-frame screenshot, the color rendering is incorrect (not exporting what we can see in the screen). I tried to debug in the mindar.prod.js, and fix it, please see if this help.

encoding:i.sRGBEncoding //Add this option to the new WebGLRenderTarget can fix the color rending problem.

getRenderTarget: function(e, t) { return new i.WebGLRenderTarget(e, t, { minFilter: i.LinearFilter, magFilter: i.LinearFilter, wrapS: i.ClampToEdgeWrapping, wrapT: i.ClampToEdgeWrapping, format: i.RGBAFormat, type: i.UnsignedByteType, encoding:i.sRGBEncoding }) }

`
function take_photo()
{
document.querySelector("video").pause();

const video = document.getElementsByTagName("video")[0];

const canvas = document.createElement("canvas");

var window_width = $(window).outerWidth();    var window_height = $(window).outerHeight();


var v_width = $(video).outerWidth();
var v_height = $(video).outerHeight();

var a_width = document.querySelector('a-scene').components.screenshot.data.width * 0.5;
var a_height = document.querySelector('a-scene').components.screenshot.data.height * 0.5;
canvas.width = $(window).outerWidth();
canvas.height = $(window).outerHeight();

canvas.getContext('2d').drawImage(video, 0, parseFloat($("video").css("top")), v_width, v_height);

var imgData = document.querySelector('a-scene').components.screenshot.getCanvas('perspective');

canvas.getContext('2d')
    .drawImage(imgData, 0, 0, window_width, window_height);
    
if (window.navigator.msSaveOrOpenBlob) {
    var blobObject = canvas.msToBlob();
    window.navigator.msSaveOrOpenBlob(blobObject, 'download.png');
} else {
    var a = document.createElement('a');
    a.href = canvas.toDataURL("image/png");
    a.download = 'download.png';
    a.click();
}
document.querySelector("video").play();

}
`

[Radioactive-l1r]

So, how can we have mp4 out of it? Is there any approach for that...i have been trying it...

[kurihiro0119]

Hi! @hiukim I am also suffering from the same problem(the quality is fairly poor, low resolution. ).
Is there a solution to this problem yet?

[o150209001]

Hello, try it maybe it can solve your problem, as this worked for me.

`const video = document.querySelector("video");

        const canvas = document.createElement("canvas");
        video.pause();

        let v_width = video.clientWidth*2;
        let v_height = video.clientHeight*2;
        
        canvas.width = v_width;
        canvas.height = v_height;

        let element = document.querySelector('video'),
            style = window.getComputedStyle(element),
            top = style.getPropertyValue('top');

        canvas.getContext('2d').drawImage(video, 0, parseFloat(top), v_width, v_height);

        let imgData = document.querySelector('a-scene').components.screenshot.getCanvas('perspective');

        canvas.getContext('2d')
            .drawImage(imgData, 0, 0, v_width, v_height);`

[kurihiro0119]

Thx, I'll try it!

[kurihiro0119]

Hi @o150209001
I solved this problem with your advice.
Thanks!!!!

[CongAn]

Thank you for providing the code sample. I created a screenshot of the visible part of the video on my phone.

const video = document.querySelector("video");
const canvas = document.createElement("canvas");
video.pause();

// Obtain the view style data of the video
const style = window.getComputedStyle(video),
  width = parseFloat(style.getPropertyValue('width')),
  height = parseFloat(style.getPropertyValue('height')),
  top = parseFloat(style.getPropertyValue('top')),
  left = parseFloat(style.getPropertyValue('left'));

// The width and height of the video may exceed the screen to achieve a full screen effect, 
// so screenshots need to only capture the visible part of the video.
const imgLeft = left * video.videoWidth / width
const imgTop = top * video.videoHeight / height
const drawLeft = imgLeft > 0 ? 0 : imgLeft
const drawTop = imgTop > 0 ? 0 : imgTop
const drawWidth = video.videoWidth
const drawHeight = video.videoHeight
canvas.width = video.videoWidth + imgLeft * 2
canvas.height = video.videoHeight + imgTop * 2

// render
canvas.getContext('2d').drawImage(video, drawLeft, drawTop, drawWidth, drawHeight);
video.play()

[Dan2456ca5]

Hello, try it maybe it can solve your problem, as this worked for me.

`const video = document.querySelector("video");

        const canvas = document.createElement("canvas");
        video.pause();

        let v_width = video.clientWidth*2;
        let v_height = video.clientHeight*2;
        
        canvas.width = v_width;
        canvas.height = v_height;

        let element = document.querySelector('video'),
            style = window.getComputedStyle(element),
            top = style.getPropertyValue('top');

        canvas.getContext('2d').drawImage(video, 0, parseFloat(top), v_width, v_height);

        let imgData = document.querySelector('a-scene').components.screenshot.getCanvas('perspective');

        canvas.getContext('2d')
            .drawImage(imgData, 0, 0, v_width, v_height);`

hi o150209001, thanks providing the code. I've tried it on Android mobile, but the AR element/3d object get squeezed. Any idea? how to fix it? thanks for your help.