从摄像头获取stream对象并导入页面上的video元素这个过程并不简单,仅就这一话题就可以写一整本关于C或C++的书!--《Learning webrtc中文版》
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <video id="v1" autoplay controls></video> </body> <script> function aaa() { var userMedia = navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(mediaStream => { console.log("coming in...") document.getElementById(‘v1‘).srcObject = mediaStream; }).catch(err => { console.log("coming in.4..") console.log(err) }) } window.onload = function () { aaa(); } </script> </html>
Here‘s an example of using navigator.mediaDevices.getUserMedia()
, with a polyfill to cope with older browsers. Note that this polyfill does not correct for legacy differences in constraints syntax, which means constraints won‘t work well across browsers. It is recommended to use the adapter.js polyfill instead, which does handle constraints.
// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// Some browsers partially implement mediaDevices. We can‘t just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it‘s missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// First get ahold of the legacy getUserMedia, if present
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// Some browsers just don‘t implement it - return a rejected promise with an error
// to keep a consistent interface
if (!getUserMedia) {
return Promise.reject(new Error(‘getUserMedia is not implemented in this browser‘));
}
// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
var video = document.querySelector(‘video‘);
// Older browsers may not have srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// Avoid using this in new browsers, as it is going away.
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
var promise = navigator.mediaDevices.getUserMedia(constraints);
constraints
A MediaStreamConstraints
object specifying the types of media to request, along with any requirements for each type.
The constraints
parameter is a MediaStreamConstraints
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
.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints
Some combination—but not necessarily all—of the following properties will exist on the object.
audio
MediaTrackConstraints
object providing the constraints which must be met by the audio track included in the returned MediaStream
. If constraints are specified, an audio track is inherently requested.video
MediaTrackConstraints
object providing the constraints which must be met by the video track included in the returned MediaStream
. If constraints are specified, a video track is inherently requested.
video的选项
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/video
var videoConstraints = true | false | MediaTrackConstraints;
MediaTrackConstraints的选项
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
The MediaTrackConstraints
dictionary is used to describe a set of capabilities and the value or values each can take on. A constraints dictionary is passed into applyConstraints()
to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling getConstraints()
.
For each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you‘d like to be as close to as possible. The specifics vary somewhat depending on the type of the constrainable property.
To learn more about how constraints work, see Capabilities, constraints, and settings.
Some combination—but not necessarily all—of the following properties will exist on the object.
deviceId
ConstrainDOMString
object specifying a device ID or an array of device IDs which are acceptable and/or required.groupId
ConstrainDOMString
object specifying a group ID or an array of group IDs which are acceptable and/or required.autoGainControl
ConstrainBoolean
object which specifies whether automatic gain control is preferred and/or required.channelCount
ConstrainLong
specifying the channel count or range of channel counts which are acceptable and/or required.echoCancellation
ConstrainBoolean
object specifying whether or not echo cancellation is preferred and/or required.latency
ConstrainDouble
specifying the latency or range of latencies which are acceptable and/or required.noiseSuppression
ConstrainBoolean
which specifies whether noise suppression is preferred and/or required.sampleRate
ConstrainLong
specifying the sample rate or range of sample rates which are acceptable and/or required.sampleSize
ConstrainLong
specifying the sample size or range of sample sizes which are acceptable and/or required.volume
ConstrainDouble
specifying the volume or range of volumes which are acceptable and/or required.whiteBalanceMode
String
specifying one of "none"
, "manual"
, "single-shot"
, or "continuous"
.exposureMode
String
specifying one of "none"
, "manual"
, "single-shot"
, or "continuous"
.focusMode
String
specifying one of "none"
, "manual"
, "single-shot"
, or "continuous"
.pointsOfInterest
exposureCompensation
ConstrainDouble
(a double-precision integer) specifying f-stop adjustment by up to ±3. colorTemperature
ConstrainDouble
(a double-precision integer) specifying a desired color temperature in degrees kelvin.iso
ConstrainDouble
(a double-precision integer) specifying a desired iso setting.brightness
ConstrainDouble
(a double-precision integer) specifying a desired brightness setting.contrast
ConstrainDouble
(a double-precision integer) specifying the degree of difference between light and dark.saturation
ConstrainDouble
(a double-precision integer) specifying the degree of color intensity.sharpness
ConstrainDouble
(a double-precision integer) specifying the intensity of edges.focusDistance
ConstrainDouble
(a double-precision integer) specifying distance to a focused object.zoom
ConstrainDouble
(a double-precision integer) specifying the desired focal length.torch
Boolean
defining whether the fill light is continuously connected, meaning it stays on as long as the track is active.aspectRatio
ConstrainDouble
specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.facingMode
ConstrainDOMString
object specifying a facing or an array of facings which are acceptable and/or required.frameRate
ConstrainDouble
specifying the frame rate or range of frame rates which are acceptable and/or required.height
ConstrainLong
specifying the video height or range of heights which are acceptable and/or required.width
ConstrainLong
specifying the video width or range of widths which are acceptable and/or required.resizeMode
ConstrainDOMString
object specifying a mode or an array of modes the UA can use to derive the resolution of a video track. Allowed values are none
and crop-and-scale
. none
means that the user agent uses the resolution provided by the camera, its driver or the OS. crop-and-scale
means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution.These constraints apply to MediaTrackConstraints
objects specified as part of the DisplayMediaStreamConstraints
object‘s video
property when using getDisplayMedia()
to obtain a stream for screen sharing.
cursor
A ConstrainDOMString
which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. The value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor.
always
motion
never
displaySurface
A ConstrainDOMString
which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:
application
browser
monitor
window
logicalSurface
ConstrainBoolean
value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.Specification | Status | Comment |
---|---|---|
Media Capture and Streams | Candidate Recommendation | Initial definition. |
MediaStream Image Capture | Working Draft | Adds image constraints. |
Unknown | Unknown | Added properties for screen sharing. |
原文:https://www.cnblogs.com/yasepix/p/10929931.html