All geek questions in one place

Problems setting various permissions using WebRTC

I am trying to use the WebRTC getUserMedia functionality to take pictures in streaming video from a user camera. The problem is that I want to use the resolution of 640 X 480 working in Firefox 19.02, Opera 12.14 and Chrome 25.0.1364.172, respectively, but I can not use this resolution in Firefox and Opera. When I try to do this, the image appears from the bottom with a resolution of 640 X 360. Anyway, if I try to change the resolution in Chrome, it does not work or with a higher resolution than 640 X 480. Someone has the same problem? I want to know if this is a mistake or something else, but I have not seen any information about this. This is my code, in many cases I have proven that such interference has a minimum width and height, but this does not work:

script:

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia; if(navigator.getUserMedia){ navigator.getUserMedia({ video: true }, onSuccess, onError); } else{ alert('An error has occurred starting the webcam stream, please revise the instructions to fix the problem'); } function onSuccess(stream) { var video = document.getElementById('webcam'); if(navigator.webkitGetUserMedia || navigator.mozGetUserMedia){ video.src = window.URL.createObjectURL(stream); } else if(navigator.msGetUserMedia){ //future implementation over internet explorer } else{ video.src = stream; } video.play(); } function onError() { alert('There has been a problem retrieving the streams - did you allow access?'); }

css (it's just for proof, it doesn't put everything in the right place):

 body { margin: 0px 0px; padding: 0px 0px; } #videoFrame { margin: 0px auto; width: 640px; height: 480px; border: 10px #333 solid; } #webcam { videoWidth: 640px; videoHeight: 480px; } #captureFrame { margin: 0px auto; width: 640px; height: 480px; } #webcamContent { width: 1280px; height: 480px; }

and jsp file:

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>Testing WebRTC</title>` <link href="css/styles.css" rel="stylesheet" type="text/css" />` </head> <body> <div id="webcamContent"> <div id="videoFrame"> <video id="webcam"></video> </div> <div id="captureFrame"> <canvas id="bioCapture"></canvas> </div> </div> <script src="js/webRTC.js"></script> </body> </html>

Thanks in advance!

+4
source share
2 answers

Try the maxWidth/maxHeight constraints :

 var video_constraints = { mandatory: { maxHeight: 480, maxWidth: 640 }, optional: [] }; navigator.getUserMedia({ audio: false, video: video_constraints }, onsuccess);

Updated (September 26, 2013):

According to this page ; You can set the following permissions (min / max. width / height):

 1920:1080 1280:720 960:720 640:360 640:480 320:240 320:180

Or Maybe :

 1280:800 1280:720 960:600 960:540 640:400 640:360 640:480 480:300 480:270 480:360 320:200 320:180 320:240 240:150 240:135 240:180 160:100 160:90 160:120
+6
source

I had the same problem when the aspect ratio of the camera was not saved or tried to force frames that it does not support (this is an old USB camera). So try like @Muaz Khan, but set only one required parameter, i.e.:

 var video_constraints = { mandatory: { maxWidth: 640 }, optional: [] }; navigator.getUserMedia({ audio: false, video: video_constraints }, onsuccess);

EDIT: try different values ​​i.e. maxHeight: 120 does not work for me, but maxHeight: 180 really worked. I think it depends on the camera.

0
source

Source: https://habr.com/ru/post/1469518/

More articles:


All Articles