Using the Media Capture API

This article explores the Media Capture and Streams API (getUserMedia), enabling webpages to access webcam and microphone without plugins. Supported by major browsers including Chrome, Opera, Firefox, and Edge.

The API offers video, audio, and image capture; control over camera settings (resolution, frame rate, focus); multi-camera support; and integration with other APIs. Applications range from video chat to social media content creation. User permission is required, and feature availability varies across devices and browsers.

Key Features and Functionality:

The getUserMedia() method, central to the API, uses MediaStreamConstraints to define capture preferences (facingMode, volume, resolution). enumerateDevices() helps select specific devices via their deviceId. Successful calls return a MediaStream object.

Browser Compatibility:

The API enjoys broad support, dating back to Chrome 21, Opera 18, and Firefox 17, with recent addition to Edge. Modernizr simplifies browser compatibility checks. Without Modernizr, manual checks are necessary to handle browser inconsistencies.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Alternatively, without Modernizr:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Video Playback:

The HTML includes a <video></video> tag (set to autoplay and muted) to display the captured stream. JavaScript dynamically sets the srcObject (or src as a fallback) of the video element.

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

Camera Access and Permissions:

The API prioritizes user security. Upon launching, the application requests permission to use the webcam (or webcam and microphone, if specified). getUserMedia() accepts an object specifying media access requirements ({video: true} for webcam, {video: true, audio: true} for both).

Multiple Webcam Support:

MediaDevices.enumerateDevices() retrieves information about available media input/output devices (microphones, cameras, speakers). It returns a Promise resolving to an array of device objects, each with properties like kind, deviceId, and label. This feature is still experimental.

Setting Video Source:

The initializeVideoStream() function sets the video tag's source to the received MediaStream. It uses srcObject if supported, falling back to URL.createObjectURL() for older browsers.

var initializeVideoStream = function(stream) {
    // ... (code to set video source) ...
};

CSS Filters:

The application applies real-time CSS filters to the video and images. A JavaScript function cycles through predefined filters (grayscale, sepia, blur, etc.), adding corresponding CSS classes to the video element.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Image Saving:

navigator.msSaveBlob (IE10 ) or a fallback using toDataURL and an <a></a> element saves captured images.

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Further Development:

Future possibilities include WebGL integration for advanced filtering and interactive environments, and Web Audio API integration for audio manipulation. Mobile browser support is also expanding.

(The rest of the original input, including the FAQs and Microsoft learning resources, is omitted for brevity, as it is largely descriptive and not directly related to the core functionality of the Media Capture API as demonstrated in the code snippets.)

The above is the detailed content of Using the Media Capture API. For more information, please follow other related articles on the PHP Chinese website!