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,

height: 90,

facingMode: {

exact: "environment"

frameRate: {

ideal: 10,

max: 15

}

};

获取视频源

navigator.mediaDevices.getUserMedia(contraints).then(function(mediaStream)){

var video = document.querySelector('video');

video.srsObject = mediaStream

video.onloadedmetadata = function(e) {

video.play();

};

})

.catch(function(error)) {

console.log(error);

});

}

vue获取麦克风_前端多媒体-1.获取摄像头麦克风相关推荐

VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
pc端html调用麦克风_如何减少PC上的麦克风背景噪音
pc端html调用麦克风 Micolas/Shutterstock.com Micolas / Shutterstock.com Whether you're video conferencing w ...
mac实时麦克风_如何在Mac上选择麦克风
mac实时麦克风 Whether they're built-in to your computer or webcam (or not), you likely have multiple micr ...
vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置
1.网页的大小和浏览器窗口的大小一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和 document元素的clientHeight和clientWidth属性,就代表了网页的大小. f ...
ua获取手机型号_前端通过js获取手机型号
前段通过js获取手机型号需求: 用户登录后记录当前的手机型号并记录插件: 使用步骤: 获取UA信息->根据安卓和IOS不同的处理 IOS再通过插件mobile-device-js去获取型号 ...
axios vue 回调函数_前端Vue 面试题大全
点蓝色字关注"程序员报刊" 「学习新闻招聘」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...
vue接收索引_前端开发：Vue中findIndex() 方法的使用
前端开发过程中对数据的遍历是非常常见的操作,在Vue.js中通过对数组下标遍历操作来进行相关逻辑处理的方法常用的有两种:some()和findIndex() ,二者都是通过遍历数组里面的id值来进行操 ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
vue 后台翻译_前端使用vue-i18n做中英文翻译
vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本安装方法:(此处只演示 npm) npm insta ...

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

vue获取麦克风_前端多媒体-1.获取摄像头麦克风相关推荐

最新文章

热门文章