<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<video class="video_miao" src=""></video>
</div>
<script>
let video_miao = document.getElementsByClassName("video_miao")
console.log(video_miao)
//1.首先定义一个constraints参数，navigator.mediaDevices.getUserMedia需要一个对象类型的参数,这个参数（constraints）指定了请求的媒体类型（如摄像头/麦克风）和相对应的参数
let constraints = {
video : {width: 1280, height: 720}, //启用摄像头，并设置尺寸
//audio : true //启用麦克风，这里不需要就先注释掉了
}
//2.调用getUserMedia方法，传入constraints参数。定义一个变量来接收它，getUserMedia方法返回的就是一个promise，这里我们就把变量名命名为promise
let promise = navigator.mediaDevices.getUserMedia(constraints);
//3.使用.then()获取到promise当中的value,我们能够获取到一个媒体流，这里我们就把箭头函数的形参命名为MediaStream(媒体流)
//MediaStream(媒体流)是一个接口，你可以把它视为一个对象，它有一些属性和方法。
promise.then((MediaStream) => {
//video_miao是video标签，srcObject是video标签的属性，他可以接收MediaStream，blob,file等对象，这里我们就把得到的MediaStream赋值给srcObject属性。
video_miao.srcObject = MediaStream;
//调用video标签中的play()方法,play()方法没有参数和返回值，就是单纯的用于播放，与之对应的一个方法pause()可以控制video暂停
video_miao.play();
});
</script>
</body>
</html>
js调用摄像头
最新推荐文章于 2024-07-27 22:26:20 发布
扫一扫
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
