使用WebRTC在JavaScript中展示视频遇问题求助

你的代码核心问题是错误地将媒体流绑定到了<div>元素，<div>是普通容器，无法渲染视频/音频流，必须使用<video>和<audio>标签来承载媒体内容。另外还有几处语法和配置问题，下面是具体修正方案：

1. 修正HTML结构 #

把原来的<div id="video">和<div id="audio">替换成对应的<video>和<audio>标签，同时修复<header>标签的拼写错误（应该是<head>）：

<!DOCTYPE html>
<html>
<head>
  <title>video and audio</title>
  <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      height: 100%;
      margin: 0;
    }

    #video {
      height: 50%;
      width: 50%;
      border: 1px solid black;
    }
    #audio {
      height: 50%;
      width: 50%;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <video id="video" autoplay playsinline></video>
  <audio id="audio" autoplay></audio>
</body>
<script src="WebRTC.js" type="text/javascript"></script>
</html>

• 添加autoplay和playsinline属性：autoplay让视频自动播放（配合getUserMedia通常可正常触发），playsinline避免视频在移动端自动全屏。

2. 修正JavaScript代码 #

• 调整视频分辨率为合理值（原height:70太小，几乎无法显示）
• 修复catch的错误处理逻辑（原写法会直接执行打印，不管是否真的报错）
• 分别给video和audio标签绑定对应的媒体轨道：

const constraints = {
  audio: true,
  video: { width: 1280, height: 720 } // 修正为合理高度
};

navigator.mediaDevices.getUserMedia(constraints)
.then((mediaStream) => {
  console.log('success');
  // 绑定视频流到video元素
  const video = document.querySelector('#video');
  video.srcObject = mediaStream;
  
  // 绑定音频流到audio元素
  const audio = document.querySelector('#audio');
  audio.srcObject = mediaStream;
})
.catch((err) => {
  console.log('unsuccessful', err); // 打印具体错误信息，方便排查
});

3. 额外注意事项 #

• 确保在HTTPS环境下测试：现代浏览器要求getUserMedia必须在安全上下文（HTTPS或localhost）中运行，否则会报错。
• 如果浏览器仍不自动播放，可以添加用户交互触发（比如按钮点击）来调用video.play()，部分浏览器出于安全限制会阻止无交互的自动播放。

内容的提问来源于stack exchange，提问作者gtj520