为什么相机流正在加载但在浏览器窗口中不可见？答案

【问题标题】：Why is the camera stream loading but is not visible in the browser window?为什么相机流正在加载但在浏览器窗口中不可见？
【发布时间】：2021-06-30 09:29:36
【问题描述】：

我正在尝试将我的相机作为视频元素访问，但是当我运行程序时它不可见。

这是我的代码：

const myvideo=document.createElement('video');
myvideo.muted=true;

const videoGrid=document.getElementById("video_grid");

//I'm using a div element with id "video_grid" in my HTML file.This div does not contain any data (or child element) every property is set to default.

navigator.mediaDevices.getUserMedia({
    video:true,
    audio:true
}).then((stream)=>{
    addVideoElement(myvideo,stream);
}).catch((e)=>console.log(e.name +":"+e.message ));

const addVideoElement=(video,stream)=>
{
    video.srcObject=stream;
    video.addEventListener('loadmetadata',()=>{
        video.play();
    });
    videoGrid.append(video);
}

//HTML
<body>
  <div id="video_grid">
  </div>
    <script src="script.js"></script>
</body>

视频流仅在我单击显示控件按钮后可见。你能帮我解决这个问题吗？

这是一个例子：

this is the camera view i get after clicking show controls and now i can play it manually

【问题讨论】：

请阅读stackoverflow.com/help/how-to-ask
对不起。现在可以理解了吗？

标签： javascript frontend webapi navigator

【解决方案1】：

如果我们还可以看到它的 HTML 和 CSS，我觉得它会提供更好的上下文，但是快速查看您的代码会显示这种 getElementById 尝试：

const videoGrid=document.getElementById("video_grid");

但是找不到id。也许添加它会帮助您的代码正确获取元素：

myvideo.id=""video_grid"

【讨论】：

抱歉，我认为 HTML 是不言自明的。我已经编辑了我的帖子，请看一下。