Access mobile and desktop camera and overlap image

hi, i need some help to create a virtual fitting room. I want to access the mobile and desktop camera (Don’t need to take pictures - just show real time image), and select some product png image with transparent background and overlap on real time image. Is it possible with bubble? I need help. thanks.

Put HTML Element and copy:

<div>
    <video autoplay="true" id="video-webcam">
        Your browser not supported!
    </video>
</div>
<script type="text/javascript">
    // video selection element
    var video = document.querySelector("#video-webcam");

    // get user access
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    // if user give access
    if (navigator.getUserMedia) {
        // run handleVideo function, and videoError if access rejected
        navigator.getUserMedia({ video: true }, handleVideo, videoError);
    }

    // function run only when user give access
    function handleVideo(stream) {
        video.srcObject = stream;
    }

    // function run only when user not giving the access
    function videoError(e) {
        // do something
        alert("Give the access to open your webcam!")
    }
</script>

(But the code only working for show the webcam camera and cannot be save in database or another user see it)

Put your overlay image in the top of HTML Element

Hi, thaks for your help. I’m a beginner, how i put the overlay?

put your group element that contain your overlay object in top of your html element

This topic was automatically closed after 70 days. New replies are no longer allowed.