MediaStream图像捕捉

MediaStream图像捕捉API是一种用于从照相设备捕捉图像或视频的API。

1.通过调用获取对设备的引用MediaDevices.getUserMedia()

navigator.mediaDevices.getUserMedia({ video: true })

  .then(mediaStream => {

    // Do something with the stream.

  })

2.隔离媒体流的可视部分;

通过调用来做到这一点MediaStream.getVideoTracks()。这将返回一个MediaStreamTrack对象数组。

const track = mediaStream.getVideoTracks()[0];

3.如果希望在捕获图像之前配置设备功能,可以通过applyConstraints()在执行任何其他操作之前调用track 对象来完成此操作;

let zoom = document.querySelector('#zoom');

const capabilities = track.getCapabilities();

// Check whether zoom is supported or not.

if(!capabilities.zoom) {

  return;

}

track.applyConstraints({ advanced : [{ zoom: zoom.value }] });

4.将MediaStreamTrack对象传递给ImageCapture()构造函数。

尽管 aMediaStream包含多种类型的轨道并提供多种检索它们的方法,但 ImageCapture 构造函数将抛出 a DOMExceptionof type NotSupportedErrorif MediaStreamTrack.kindis not "video"。

let imageCapture = new ImageCapture(track);

ImageCapture    图像捕获,用于从通过有效引用的摄影设备捕获图像的接口MediaStreamTrack

ImageCapture() 构造函数

创建一个新ImageCapture对象,该对象可用于从MediaStreamTrack表示视频流的给定对象中捕获静止帧(照片)。

特性:ImageCapture.track 只读,返回对MediaStreamTrack(媒体流跟踪)传递给构造函数的引用。

ImageCapture.track  图像捕捉跟踪,接口的track只读属性 ImageCapture返回对MediaStreamTrack传递给 ImageCapture()构造函数的引用 。

const mediaStreamTrack = imageCaptureObj.track

MediaStreamTrack接口表示流中的单个媒体轨道;通常,这些是音频或视频轨道,但也可能存在其他轨道类型。

接口的takePhoto()方法 ImageCapture使用视频捕获设备进行单次曝光MediaStreamTrack并返回Promise 一个Blob包含数据的解析。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容