在 javascript 中使用 WebRTC 显示视频答案

【问题标题】：Displaying video using WebRTC in javascript在 javascript 中使用 WebRTC 显示视频
【发布时间】：2022-11-21 00:27:44
【问题描述】：

我目前正在学习如何在 javascript 中使用 WebRTC。
下面是我写的代码：

主.html

<!DOCTYPE html>
<header>
  <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>
</header>
<body>
  <div id="video"></div>
  <div id="audio"></div>
</body>
<script src="WebRTC.js" type="text/javascript"></script>
</html>

WebRTC.js

const constraints = {audio: true, video: {width: 1280, height: 70}}

navigator.mediaDevices.getUserMedia(constraints)
.then (
  (mediaStream) => {
    console.log('success')
    const video = document.querySelector('#video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = () => {video.play();}
  })
.catch (
  console.log('unsuccessful')
)

当我打开它时，它会询问我是否允许访问我的相机，然后控制台返回“成功”。所以我认为代码工作正常但是<div id="video">上没有显示视频。我用谷歌搜索了解决方案，但我还没有想出任何办法。如果您能帮我找到我在这里缺少的东西，我将不胜感激。非常感谢。

【问题讨论】：

这可能相关也可能不相关，但是您是否在 HTML 文件中包含了 WebRTC.js？
您不需要库即可使用 webrtc，@LakshyaRaj。 OP，您是否尝试过使用实际的视频元素而不仅仅是普通的 div？ developer.mozilla.org/en-US/docs/Web/HTML/Element/video
只需在附加媒体链接后播放。那应该工作。您还应该为 webrtc 实现使用一个适配器库，这对于处理跨浏览器问题很有用。
@jmargolisvt 这不是我的意思。 OP 有两个文件，main.html 和 WebRTC.js。 main.html 包括 main.js，但问题中没有 WebRTC.js 文件的引用。但是，我同意您关于使用视频标签的第二点。
@LakshyaRaj 我现在明白了。对不起，我的错！ :)

标签： javascript html webrtc

【解决方案1】：

为了能够在您的页面上播放视频，您需要使用<video /> 标签而不是普通的<div />。所以你只需要改变

<div id="video"></div>
<div id="audio"></div>

和

<video autoplay="true"></video>

你的最终代码将是这样的：

const constraints = {
  audio: true,
  video: {
    width: 1280,
    height: 70
  }
}

navigator.mediaDevices.getUserMedia(constraints)
  .then(
    (mediaStream) => {
      console.log('success')
      const video = document.querySelector('video');
      video.srcObject = mediaStream;
      video.onloadedmetadata = () => {
        video.play();
      }
    })
  .catch(
    console.log('unsuccessful')
  )

html {
  height: 100%;
}

body {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

video {
  height: 50%;
  width: 50%;
  border: 1px solid black;
}

&lt;video autoplay="true"&gt;&lt;/video&gt;

代码笔：https://codepen.io/SMAKSS/pen/RwJxjpb

【讨论】：

【解决方案2】：

它不起作用，因为您使用的是 div 标签而不是 video 标签。

只需使用下面的视频标签。

<video id="video"></video>

【讨论】：