How can I capture an image using webcam or mobile using jquery?

I am building a web app which should open the front camera in the phone or web cam my code work fine web but no response on mobile and tab how can i fix this problem here is code and save the image in to database . I am using the getUserMedia Web API .How can I change my code it to capture the image in webcam or mobile ?.

Html code

<video id="video"></video>
<canvas id="canvas" style="display:none;"></canvas>
<div id="buttoncontent">

</div>

 
<button id="startbutton" class="btn btn-primary "  >CAPTURE</button>
<button type="submit" id="cancel" class="btn btn-primary  cancel">Next</button>

jquery Code

  var streaming = false,
    video = document.querySelector('#video'),
    canvas = document.querySelector('#canvas'),
    buttoncontent = document.querySelector('#buttoncontent'),
    cancel= document.querySelector('#cancel'),
    //photo = document.querySelector('#photo'),
    startbutton = document.querySelector('#startbutton'),
    width = 320,
    height = 0;


  navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia    ||
                       navigator.msGetUserMedia
                       );

  navigator.getMedia({
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev) {
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth / width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    video.style.display = "none";
    canvas.style.display = "block";
    startbutton.innerText= "RETAKE";
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');

    canvas.setAttribute('src', data);
    return   data;
  }

  startbutton.addEventListener('click', function(ev) {

    if(startbutton.innerText==="CAPTURE")
    {
        var data=takepicture();

        $('#file').val(data);
    }
    else
    {
        video.style.display = "block";
        canvas.style.display = "none";
      startbutton.innerText= "CAPTURE";
    }
    ev.preventDefault();
  }, false);
  cancel.addEventListener('click',function(e)
    {
            if(cancel.innerText==="Next")
            {
                    video.mozSrcObject.getTracks().forEach( (track) =>
                    {
                        track.stop();
                     });
            }

    }, false);


});

it's does not work mobile came please help me fix this problem .it work fine in web

How can I change my code it to capture the image in webcam or mobile?

via Chebli Mohamed