WebRTC Chrome Camera constraints

Question

I am trying to set the getusermedia video constraints like setting min/max frame-rates and resolutions etc... in my peer.js webrtc application which is a simple peer to peer chat application. I have being trying to integrate it into my application but it seems to break it.Any help would be greatly appreciated other online tutorials look different to my app set up. Down at function 1 is where I have been trying to set the constraints it just doesn't show the video anymore. Is this the correct place?

Also will these constraints work on a video-file playing instead of the webcam?. I am using the Google chrome flags that plays a video file instead of a camera.

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

                // PeerJS object ** FOR PRODUCTION, GET YOUR OWN KEY at http://peerjs.com/peerserver **
                var peer = new Peer({
                    key: 'XXXXXXXXXXXXXXXX',
                    debug: 3,
                    config: {
                        'iceServers': [{
                            url: 'stun:stun.l.google.com:19302'
                        }, {
                            url: 'stun:stun1.l.google.com:19302'
                        }, {
                            url: 'turn:numb.viagenie.ca',
                            username: "XXXXXXXXXXXXXXXXXXXXXXXXX",
                            credential: "XXXXXXXXXXXXXXXXX"
                        }]
                    }
                });

                    // On open, set the peer id so when peer is on we display our peer id as text 
                    peer.on('open', function(){
                        $('#my-id').text(peer.id);
                    });

                    peer.on('call', function(call) {
                        // Answer automatically for demo
                        call.answer(window.localStream);
                        step3(call);
                    });

                    // Click handlers setup
                    $(function() {
                        $('#make-call').click(function() {
                            //Initiate a call!
                            var call = peer.call($('#callto-id').val(), window.localStream);
                            step3(call);
                        });
                        $('end-call').click(function() {
                            window.existingCall.close();
                            step2();
                        });

                        // Retry if getUserMedia fails
                        $('#step1-retry').click(function() {
                            $('#step1-error').hide();
                            step();
                        });

                        // Get things started
                        step1();
                    });







             function step1() {
//Get audio/video stream
navigator.getWebcam({audio: true, video: true}, function(stream){
    // Display the video stream in the video object
    $('#my-video').prop('src', URL.createObjectURL(stream));




                        // Displays error  
                        window.localStream = stream;
                        step2();
                    }, function(){ $('#step1-error').show(); });
                }

                function step2() { //Adjust the UI
                    $('#step1', '#step3').hide();
                    $('#step2').show();
                }

                function step3(call) {
                    // Hang up on an existing call if present
                    if (window.existingCall) {
                        window.existingCall.close();
                    }

                    // Wait for stream on the call, then setup peer video
                    call.on('stream', function(stream) {
                        $('#their-video').prop('src', URL.createObjectURL(stream));
                    });
                    $('#step1', '#step2').hide();
                    $('#step3').show();
                }

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

Your JavaScript looks invalid. You can't declare a var inside a function argument list. Did you paste wrong? Try:

var constraints = {
  audio: false,
  video: { mandatory: { minWidth: 1280, minHeight: 720 } }
};
navigator.getWebcam(constraints, function(stream){ etc. }

Now it's valid JavaScript at least. I'm not familiar with PeerJS, but the constraints you're using look like the Chrome ones, so if you're on Chrome then hopefully they'll work, unless PeerJS does it differently for some reason.

Your subject says "WebRTC Camera constraints" so I should mention that the Chrome constraints are non-standard. See this answer for an explanation.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 28 '15 at 05:47

jib

40,579
17
100
158

I put it in the wrong place. I thought thats were it went cause I seen in the my code before, thats were the video and audio true was .I am a beginner at JavaScript and got confused . I have changed back my code above to the way it was before I tried to add the constraints up at function step1 again. How would you suggest implementing them into the code I have ? @jib. yeah I am using chrome for this project so constraints that work with chrome would be great. Cheers for the help. – WebRTC83 Mar 28 '15 at 14:47
Replace `{audio: true, video: true}` with the constraints I mention in my answer (only the `{}` part, not the `var constraints = ` part). Always look at your browser's web console for any basic JavaScript errors. Also, you asked if constraints work on video-files, and they do not. Some cameras offer different modes of capture with low to high resolution and/or low to high frame rates, whereas video-files are always pre-recorded in a specific resolution. - To resize playback, change the size of the HTML video element you're outputting to instead. – jib Mar 30 '15 at 00:30
Cheers @jib. So when I get the constraints working in my application it will have no effect on the video playing instead of the camera using the chrome flags with use-file-for-fake-video-capture=/path/to/video.y4m. There are no constraints available that will achieve this?. So it only works with the camera its self setting it to different modes that are available. Can the bitrate be set through constraints?. Many thanks – WebRTC83 Mar 30 '15 at 20:21
Right, constraints are for negotiating cameras and mics. It sounds like you want to control encoding and transmission in RTCPeerConnection instead? Such a control surface is [still being developed in the specification](http://w3c.github.io/webrtc-pc/#rtp-media-api). For now this is handled automatically, and the bit-rate used adapts to the bandwidth available, as can be seen in [this test](http://webrtc.github.io/samples/src/content/peerconnection/constraints). I seem to recall that Google Chrome used to have some bitrate settings in the past, but I don't see them exposed at present. – jib Mar 30 '15 at 22:37

WebRTC Chrome Camera constraints

1 Answers1