Web Media Application

[lenrinfvck]

MediaDevices

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

事件

devicechange 系统中支持的设备变动时触发

方法

1. MediaDevices.enumerateDevices()

获取有关系统中可用的媒体输入和输出设备的一系列信息。

navigator.mediaDevices.enumerateDevices().then((...arg)=> console.log(arg))

2. MediaDevices.getUserMedia()

在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

2.1 参数 constraints

{ audio: true, video: true }
{
  audio: false,
  video: { width: 1280, height: 720 }
}
//前置摄像头（默认）
{ video: { facingMode: "user" } }
//后置摄像头
{ video: { facingMode: { exact: "environment" } } }

2.2 返回值

返回一个 Promise ， 这个Promise成功后的回调函数带一个 MediaStream 对象作为其参数。

example: /media-device/qr-code.html

[lenrinfvck]

\<Video>

HTML \<video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 \<video> 标签用于音频内容，但是 \<audio> 元素可能在用户体验上更合适。

示例 & 属性

//浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
// [controls]: 如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件
// [src]: 要嵌到页面的视频的URL。可选；你也可以使用video块内的 <source> 元素来指定需要嵌到页面的视频。
<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

HTMLVideoElement & 父类 HTMLMediaElement

HTMLVideoElement:	属性	说明
width, heigh	表达HTML属性 width, heigh的值的一个DOMString ，以CSS pixels的单位给出了显示区域的大小。
videoHeight, videoWidth (只读)	以CSS pixels的单位给出视频资源的实际高度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的ready state是 HAVE_NOTHING，这个属性的值为0。

HTMLMediaElement:	属性	说明
readyState	媒体状态 HAVE_NOTHING, HAVE_ENOUGH_DATA
src	设置媒体资源, 传URL
srcObject，mozSrcObject	同src，但传入stream对象

方法	说明
play()	开始播放
pause()	暂停播放

MediaStream

MediaStream 接口是一个媒体内容的流.。一个流包含几个轨道，比如视频和音频轨道。

方法	说明
.getTracks()	返回流中所有的MediaStreamTrack列表
.getAudioTracks()	返回流中kind属性为"audio"的MediaStreamTrack列表
.getVideoTracks()	返回流中kind属性为"video"的MediaStreamTrack列表
.getTrackById()	返回流中kind属性为"video"的MediaStreamTrack列表
.removeTrack()	返回流中kind属性为"video"的MediaStreamTrack列表

MediaStreamTrack

方法	说明
.stop()	返回流中所有的MediaStreamTrack列表

URL.createObjectURL()

用于创建 URL, 参数为File 对象、Blob 对象或者 MediaSource 对象。 返回string，为该资源的url。

[lenrinfvck]

TEST START

Naver China

TEST END

[lenrinfvck]

jsQR

https://github.com/cozmo/jsQR

const code = jsQR(imageData, width, height, options?);

if (code) {
  console.log("Found QR code", code);
}

ImageData

接口描述 \<canvas> 元素的一个隐含像素数据的区域。使用 ImageData() 构造函数创建或者使用和 canvas 在一起的 CanvasRenderingContext2D 对象的创建方法： createImageData() 和 getImageData()

Canvas 截图

ImageData < .getImageData() < .drawImage()

CanvasRenderingContext2D.drawImage()

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image

绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource)，例如：CSSImageValue (en-US)，HTMLImageElement，SVGImageElement (en-US)，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 或者OffscreenCanvas。

[lenrinfvck]

MediaRecorder

example: /media-device/recording.html

事件 MediaRecorder.ondataavailable

• 媒体流结束时
• 当调用MediaRecorder.stop()
• 调用MediaRecorder.requestData()

返回一个Blob对象

[lenrinfvck]

face-api.js

example: /media-device/face.html