目录
效果展示
代码实现
1.html代码
添加video标签用于显示摄像头的视频流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video autoplay="autoplay" playsinline id='player'></video>
<script src="./js/clent.js"></script>
</body>
</html>
2.js代码
首先可以通过以下代码先获取电脑支持的音视频设备
//获取支持的音视频设备
if (!navigator.mediaDevices ||
!navigator.mediaDevices.enumerateDevices()) {
console.log('不支持')
} else {
navigator.mediaDevices.enumerateDevices()
.then((deviceInfos) => {
deviceInfos.forEach((info) => {
console.log(info.kind + "：label=" +
info.label + "：id=" + info.deviceId + "：group = " + info.groupId);
})
})
.catch((err) => {
console.log(err.name + "：" + err.message)
});
}
可以看到我电脑有如下这些音视频设备，其中audioinput代表音频输入设备，audiooutput代表音频输出设备，videoinput代表视频输入设备，videooutput代表视频输出设备，而我的电脑没有真实的摄像头，只有一个OBS的虚拟摄像头（如果电脑没有摄像头的同学也可以通过下载安装OBS添加一个虚拟的摄像头）
然后可以通过如下代码申请使用摄像头，并将获取的流赋给video标签
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
.mozGetUserMedia) {
var constraints = {
audio: true,
video: true
};
//调用用户媒体设备, 访问摄像头
getUserMedia(constraints, success, error);
} else {
alert('不支持访问用户媒体');
}
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//获取video标签
var videoPlayer = document.querySelector('video#player')
function success(stream) {
console.log(stream);
//将流赋给video标签
videoPlayer.srcObject = stream;
}
function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
这时就可以获取到摄像头的数据了，另外也可以通过css的filter给视频添加滤镜，如下（加了一个灰度滤镜）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.grayscale{
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<video class="grayscale" autoplay="autoplay" playsinline id='player'></video>
<script src="./js/clent.js"></script>
</body>
</html>
补充（OBS虚拟摄像头设置）
如果你跟我一样也是使用的OBS的虚拟摄像头，它的设置如下所示：
1.添加视频源
这里随便选一个，我选的是视频
选择一个本地的视频点确定即可
2.启动虚拟摄像头
网友评论