video标签获得摄像头或者屏幕截图，以及两种流进行切换

看到的比较好的文章，记录一下
https://blog.csdn.net/Victor2code/article/details/106905266?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-1.control

<div class="row video-box" id="videoBox">
     <video src="" class="col-md-4" id="localVideo" autoplay controls></video>
</div>

video获取摄像头

//摄像头和音频设置
var mediaConstraints = {"audio": true,"video": true};
// 本地流
var localStream = null;
// 视频盒子,video标签外面的div标签
var videoBox = document.getElementById('videoBox');
// 本地视频对象,video标签
var localVideo = document.getElementById('localVideo');
navigator.mediaDevices.getUserMedia((mediaConstraints)).then(stream => {
            localStream = stream;
            localVideo.srcObject = stream;
        });

video将摄像头流换为屏幕流

这里采用了去除原先video，然后添加一个新的video标签的方法

//屏幕共享参数
var screenConstraints = {
    video: true
};
localVideo.remove();
    navigator.mediaDevices.getDisplayMedia(screenConstraints).then(stream => {
        console.log("开始获取用户摄像头");
        var screenStream = stream;
        var screenVideo = document.createElement("video");
        screenVideo.className = "col-md-4";
        screenVideo.id = "localVideo";
        screenVideo.autoplay = 'autoplay';
        screenVideo.controls = true;
        screenVideo.srcObject = screenStream;
        videoBox.appendChild(screenVideo);
        localVideo = screenVideo;
        localStream = stream;
        console.log("获取屏幕成功");
    });