vue获取麦克风_前端多媒体-1.获取摄像头&麦克风

获取视频/音频引言

因为最近在学习WebRTC,前端就需要学习一下媒体的相关知识.

MediaDevices.getUserMedia()

MediaDevice.getUserMedia()与WebRTC相关,欣慰他是通过这组API的门户.提供访问用户本地相机/麦克风媒体流手段

MediaDevice.getUserMedia()方法提示用户是否允许使用一个视频或音频输入设备,例如相机或屏幕共享或麦克风.如果用户给予许可,就返回一个Promise对象.

需要注意的是,由于用户不会被要求必须做出允许或者拒绝,所以返回的Promise对象可能既不处罚resolve也不触发reject

【注意】新版本的视频获取接口要用HTTPS协议，否则会抛出错误，当然现在在本地访问通过 localhost, 127.0.0.1 或者文件协议，都可以正常使用

定义输出媒体

使用video组件输出产生的视频(就是一个播放器)

#video{

width: 320px;

height: 180px;

background-color: #000000;

}

指定请求的媒体类型和相对应的参数

var constrains = {

audio: true,

video: true

};

当然可以指定视频源的一些信息,比如摄像头分辨率,最高,最低,理想的摄像头分辨率,强制使用后置摄像头,采样率.当让你可以使用getSupportedConstraints方法获取,浏览器支持哪些配置

var constraints = {

audio: false,

video: {

width: 160,