H2S107: Browser APIs for Web.Camera Input lit-rev:

STAR TECH<a-r><vid-021> at 8:13<anthro>, in line 35, he writes: mediaStream = await navigator.mediaDevices.getUserMedia(mediaConst):

H3S1: An anthropological survey of getUserMedia()<fbno>:

H4S1: dev-Mozilla<a-r>:

The MediaDevices interface provides access to connected media input | devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware | source of media data.

getUserMedia()

<dev-Mozilla>: With the user’s permission through a prompt, turns on a camera and/or a microphone on the system and provides a MediaStream containing a video track and/or an audio track with the input.

H5S1: MediaStream: Hu: The media handling functions # in JS are object–oriented, in that they are functions that contain, as sub-functions, a number of specific events, and methods, that act upon any variables, ie data, that is contained within the function object. PHP.built-ins often work the same way, but often, what is defined within the same function as a sub-method in JS, will be a separate built-in in PHP, with an explicit dependency stated; ultimately, what this amounts to, is an extra order of granularity in the documentation<Turing>: do you get your own office in the company building? And how does that affect your accounting output<some-Confucius>

<dev-Mozilla>: The MediaStream | interface represents a stream of media content. A stream consists of several tracks, such as video or audio tracks. Each track is specified as an instance of MediaStreamTrack.

MediaStream()

Creates and returns a new MediaStream object. You can create an empty | stream, a stream which is based upon an existing | stream, or a stream that contains a specified list of tracks (specified as an array of MediaStreamTrack | objects).

MediaStream.id

<Read-only>: A string containing a 36-character universally unique identifier (UUID) for the object.

H6S1: Instance | methods:

MediaStream.addTrack()

<dev-Mozilla>: Stores a copy of the MediaStreamTrack given as argument. If the track has already been added to the MediaStream object, nothing happens.

H7S1: MediaStream.getVideoTracks()

<dev-Mozilla>: Returns a list of the MediaStreamTrack | objects stored in the MediaStream object that have their kind | attribute set to "video". The order is not defined, and may not only vary from one browser to another, but also from one call to another.

H6S2: Events:

H7S1: addtrack

<dev-Mozilla>: Fired when a new MediaStreamTrack object is added.

H7S2: active

<dev-Mozilla>: Fired when the MediaStream is activated.

H5S2: MediaStreamTrack:

The MediaStreamTrack interface represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist as well.

MediaStreamTrack.id 

<Read-only>: Returns a string containing a unique identifier (GUID) for the track; it is generated by the browser.

MediaStreamTrack.readyState 

<Read-only>: Returns an enumerated | value giving the status of the track. This will be one of the following | values:

• "live" which indicates that an input is connected and does its best-effort in providing real-time data. In that case, the output of data can be switched on or off using the enabled attribute.
• "ended" which indicates that the input is not giving any more data and will never provide new data.

Hu: the readyState static event, still getting used to how JS labels these things<anthro>, can be used to trigger alternative function-execs, or simply to ping back for status, as part of testing.

H6S1: <dev-Mozilla>: Listen to these events using addEventListener() or by assigning an event | listener to the oneventname property of this interface.

H5S3: Independence from RTCPeerConnection:

Hu: RTCPeerConnection is an interface in JS that describes a particular protocol, or connection, that can be used to send the static content that is contained in # the Media.Stream-set, but Media-Stream itself preceded Web-RTC, and does not have to, necessarily, employ it for transmission. Web-RTC is a very specific type of transmission that allows for peer.to-peer connections, whenever NATs-permit, and save server cost, whenever 2 clients can directly be connected, for the bulk of video.payload-transmission. We will skip this for now, and just try to capture the browser video, and have it be sent, through our own simplified TURN server, not a Web.RTC-TURN server<note that Web-RTC itself, uses standard TURN servers that were described by RFC, before its own existence[dependency][standing on the shoulders of big people]>.

H5S4: MediaDevices.getUserMedia()

<dev-Mozilla>: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. The MediaDevices.getUserMedia() method | prompts the user for permission to use a media | input which produces a MediaStream with tracks containing the requested types of media. That stream can include, for example, a video track (produced by either a hardware or virtual video | source such as a camera, video recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, A/D converter, or the like), and possibly other track types. Hu: This method can handle streams, and generalize them, regardless of whether they are sourced from the web-cam or screen-share. A separate type-setting is required, to extract the correct output, from the browser-computer # <Mozilla>: Generally, you will access the MediaDevices singleton | object using navigator.mediaDevices:

navigator.mediaDevices

H6S1: <dev-Mozilla>: The Navigator.mediaDevices read-only property returns a MediaDevices object, which provides access to connected media | input devices like cameras and microphones, as well as screen | sharing. See the try.catch-str in<WP.MIC-H2S72,H3S3.H4S3>

async function getMedia(constraints) {
  let stream = null;
  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch (err) {
    /* handle the error */
  }
}

H6S2: Syntax:

getUserMedia(constraints)

<Mozilla>: An object specifying the types of media to request, along with any requirements for each type. The constraints parameter is an object with two members: video and audio, describing the media types requested. Either or both must be specified. If the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with NotFoundError DOMException. The following requests both audio and video without any specific requirements:

getUserMedia({
  audio: true,
  video: true
})

Mozilla: Another non-number constraint is the deviceId constraint. If you have a deviceId from mediaDevices.enumerateDevices(), you can use it to request a specific device:

getUserMedia({
  video: {
    deviceId: myPreferredCameraDeviceId
  }
})

The above will return the camera you requested, or a different camera if that specific camera is no longer available. Again, to require the specific camera, you would use:

getUserMedia({
  video: {
    deviceId: {
      exact: myExactCameraOrBustDeviceId
    }
  }
})

To require a capability, use the keywords min, max, or exact (a.k.a. min === max). The following demands a minimum resolution of 1280×720:

getUserMedia({
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 }
  }
})

H7S1: The constraints for getUserMedia can be previously | defined to a variable, and passed into the function as an argument by the variable | name:<Mozilla, getUserMedia a-r>:

const constraints = {
  audio: true,
  video: { width: 1280, height: 720 }
};

navigator.mediaDevices.getUserMedia(constraints)

H7S2: Frame rate:

const constraints = {
  video: { frameRate: { ideal: 10, max: 15 } }
};

H4S2: https://www.w3.org/TR/mediacapture-streams/

H4S3: https://webrtc.org/getting-started/media-devices#listening_for_devices_changes

H4S4: https://www.digitalocean.com/community/tutorials/front-and-rear-camera-access-with-javascripts-getusermedia

References:

MediaDevices/getUserMedia:

(1) https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices

(2) https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

(3) https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

https://www.w3.org/TR/mediacapture-streams/

https://webrtc.org/getting-started/media-devices

https://www.digitalocean.com/community/tutorials/front-and-rear-camera-access-with-javascripts-getusermedia

Intro to Object Oriented Programming – Crash Course: freeCodeCamp.org. https://www.youtube.com/watch?v=SiBw7os-_zI

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices