【javascript|调用电脑摄像头】网页调用电脑摄像头,可以自动添加摄像头的个数,我这里只有添加了两个摄像头,可以根据自己的需要添加。
GET VIDEO - 锐客网
>
.video_con {
float: left;
width: 48%;
height: 31%;
background-color: #666;
margin-left: 1%;
margin-top: 0.5%;
}
.video {
float: right;
width: 48%;
height: 31%;
background-color: #666;
margin-left: 1%;
margin-top: 0.5%;
}
>function getMedia() {
let constraints = {
video: {width: 600, height: 300},
audio: true
};
//获得video摄像头区域
let video = document.getElementById("video");
//这里介绍新的方法,返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
function getMedia1() {
let constraints = {
video: {width: 600, height: 300},
audio: true
};
//获得video摄像头区域
let video1 = document.getElementById("video1");
//这里介绍新的方法,返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video1.srcObject = MediaStream;
video1.play();
});
}
// function takePhoto() {
////获得Canvas对象
//let video = document.getElementById("video");
//let canvas = document.getElementById("canvas");
//let ctx = canvas.getContext('2d');
//ctx.drawImage(video, 0, 0, 500, 500);
// }
// setTimeout("getMedia()",3000);
设置定时器自动调用方法
文章图片
实时效果图
推荐阅读
- 前端|手把手教你在实际开发中怎么创建第一个Vue3程序
- vue|Vue 计算属性与监听属性
- javaScript高级|Ajax第四天笔记总结
- web开发|问题与解决(用 jQuery Ajax 发送请求,后端获取 session 为空)
- JavaScript|JavaScript基础( 浅聊 Object.defineProperty)
- 前端|ajax 和 axios、fetch的区别
- 前端面试|JS的继承方法
- javaScript|AJAX基础使用
- 前端面试|webpack