Show only center of video stream javasctipt and send it using post request without using css

Asked May 14 '18 at 11:55

Active May 14 '18 at 12:08

Viewed 16 times

I use the navigator.mediaDevices.getUserMedia to stream video on the page (640x480). Is it possible to do it without CSS?

    var video = document.getElementById('video');
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
            video.srcObject = stream;
            video.play();
        });
    }

I need to show only a centered square 300x300. All outside images should not be displayed or it should have increased brightness.

The main problem is to send entire image which is captured from the stream.

edited May 14 '18 at 12:07

asked May 14 '18 at 11:55

bexoc

So you want to send the cropped image or the full one? – Kaiido May 14 '18 at 12:06
The full one. Cropped only is shown to the user. – bexoc May 14 '18 at 12:08
Ok so css solution in dupe should work for you (video also is sensible to object-fit rules) – Kaiido May 14 '18 at 12:09
I have absolutely no experience in CSS, this project is my first project at all, I mean browser. It is only the prototype which will not be used (native program will be used) – bexoc May 14 '18 at 12:12
https://jsfiddle.net/0bo2c4qj/ And of course chrome is buggy... So here is a workaround for chrome: https://jsfiddle.net/0bo2c4qj/1/ – Kaiido May 14 '18 at 12:15
Thank you, I will try my best – bexoc May 14 '18 at 12:21

Show only center of video stream javasctipt and send it using post request without using css

0 Answers0