如何打开相机并在 div 中拍摄照片答案

【问题标题】：how can turn on camera and capture a photo in div如何打开相机并在 div 中拍摄照片
【发布时间】：2021-07-20 08:37:21
【问题描述】：

我想在 div 元素中打开相机。我使用以下结构：

return (
    <div id="container">
         <video id="video" width="640" height="480"></video>
            {testFunction()}
    </div>
);

function testFunction() {
var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    video.srcObject = stream;
    video.play();
  });
}}

但是，它给出了错误！ video.srcObject = stream; 和 video.play(); 给出错误.. 我该怎么办？谢谢！

【问题讨论】：

你能发布你从“video.srcObject = stream;”得到的错误吗？和“video.play();”？
Object is possibly 'null'. TS2531 video.srcObject = stream;
我已经尝试了给出的代码，在我的带摄像头的笔记本电脑中没有出现任何错误，我的摄像头播放成功。你的电脑或笔记本电脑上有摄像头吗？如果相机不存在，可能会出错。
我发现它的错误是因为打字稿！我应该告诉“视频”变体的类型。我不知道怎么？！ var video: HTMLVideoElement = document.getElementById('video');?!

标签： javascript html reactjs typescript video

【解决方案1】：

试试这个

function testFunction() {
  var video = document.getElementById('video');

  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(
      function(stream) {
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
    });
  }

【讨论】：