navigator实现通过点击按钮访问摄像头和麦克风并投屏到页面上

首先，在 HTML 文件中添加一个视频标签和两个按钮，如下所示：

<video id="video" autoplay></video>
<button id="startButton">开始</button>
<button id="stopButton">停止</button>

然后，在 JavaScript 中获取这些元素并添加事件监听器：

const video = document.getElementById('video');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');

startButton.addEventListener('click', startCapture);
stopButton.addEventListener('click', stopCapture);

接下来，定义 `startCapture` 和 `stopCapture` 函数：

async function startCapture() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    video.srcObject = stream;
  } catch (error) {
    console.error('Error: ', error);
  }
}

function stopCapture() {
  const stream = video.srcObject;
  const tracks = stream.getTracks();

  tracks.forEach(track => track.stop());
  video.srcObject = null;
}

`startCapture` 函数使用 `getUserMedia` 方法获取摄像头和麦克风的访问权限，并将流设置为视频标签的源。`stopCapture` 函数停止捕获并释放流。

最后，通过 CSS 样式设置视频标签的大小和位置，以及按钮的样式。

#video {
  width: 640px;
  height: 480px;
}

button {
  padding: 10px;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  margin: 10px;
}

这样就完成了通过点击按钮访问摄像头和麦克风并投屏到页面上的功能。