Issue with media stream constraints type in lib.dom.d.ts

[puneeth8994]

TypeScript Version: ~2.5.3

Integrating screen share, invalid type for MediaStreamConstraints

Code

// A *self-contained* demonstration of the problem follows...
// Test this by running `tsc` on the command-line, rather than through another build tool such as Gulp, Webpack, etc.

`navigator.mediaDevices.getUserMedia({
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            maxWidth: 1920,
            maxHeight: 1080,
            maxFrameRate: 10
            minAspectRatio: 1.77
            chromeMediaSourceId: sourceId         
          }
        }
        //testConstraints
      }).then(returnedStream => {

        console.log(URL.createObjectURL(returnedStream));

        let myScreenShareUrl = URL.createObjectURL(returnedStream);

        this.someUrl = this.sanitizer.bypassSecurityTrustResourceUrl(myScreenShareUrl);

      }).catch(err => {

        console.error('Could not get stream: ', err);
      });`

Expected behavior:
I get a stream URL which I can use in my video tag.

Actual behavior:
Argument of type '{ video: { mandatory: { chromeMediaSource: string; maxWidth: number; maxHeight: number; maxFrameR...' is not assignable to parameter of type 'MediaStreamConstraints'.
Types of property 'video' are incompatible.
Type '{ mandatory: { chromeMediaSource: string; maxWidth: number; maxHeight: number; maxFrameRate: numb...' is not assignable to type 'boolean | MediaTrackConstraints'.
Object literal may only specify known properties, and 'mandatory' does not exist in type 'boolean | MediaTrackConstraints'.

I checked the format for video in lib.dom.d.ts which was either a boolean value or an interface with the following format.

interface MediaTrackCapabilities { aspectRatio?: number | DoubleRange; deviceId?: string; echoCancellation?: boolean[]; facingMode?: string; frameRate?: number | DoubleRange; groupId?: string; height?: number | LongRange; sampleRate?: number | LongRange; sampleSize?: number | LongRange; volume?: number | DoubleRange; width?: number | LongRange; }

When I try to provide the sourceId in the expected format of the interface
deviceId: {exact: [sourceId]}
I end up getting back the stream of my webcam when the stream I'm expecting is that of my screenshare whose sourceId I have passed.

I can get the expected behaviour I want if the mandatory object was allowed in media stream constraints.

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[a-tarasyuk]

@mhegazy TS follows the latest WebRTC specification. Each browser can have differences in API as WebRTC specification is not an official standard yet.

MediaTrackMandatoryConstraints, MediaTrackMandatoryConstraintsSet - these interfaces are not part of the specification, so I think we do not need to add them to core types. As I know, only Chrome supports, mandatory property. Does not make sense add to core types options which available only for one browser. What do you think?

@puneeth8994 There is polyfill webrtc#adapter, which makes API consistent for all browsers which support WebRTC, you can try it. Example how to choice devices dynamically - input-output. Also, in order to support legacy API, you can define types on your own or find appropriate types on npm.

[mhegazy]

thanks @a-tarasyuk for the detailed explanation. closing.