WebRTC：浏览器获取摄像头数据

效果展示

代码实现

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>