得到错误，同时通过URL API渲染视频的BLOB文件答案

【问题标题】：getting error while rendering video by blob file by URL API得到错误，同时通过URL API渲染视频的BLOB文件
【发布时间】：2023-03-31 10:50:02
【问题描述】：

    function startWebcam(){
        navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(localMediaStream=>{
            //console.log(localMediaStream);
            let textFileAsBlob = new Blob([localMediaStream],{"type":"video/mp4"});
            video.src=URL.createObjectURL(textFileAsBlob);
            //console.log(textFileAsBlob);
            video.crossOrigin = 'anonymous';
            video.load(); 
           // console.log(video);
        });
    }
    startWebcam();

我无法使用 js 代码在我的屏幕上渲染网络摄像头视频每当我运行代码 video.play() 时，它都会向我显示 该元素没有任何浏览器支持的来源 任何人都可以帮帮我？？

【问题讨论】：

您的问题需要更清楚！比如你使用的语言和运行代码的浏览器。

标签： javascript blob navigator mediastream createobjecturl

【解决方案1】：

我从您的问题中了解到的是，您想使用此代码 sn-p 访问并启动网络摄像头。您的代码对我来说工作正常。代码没有问题。

不过你也可以试试下面这段代码。

<body>
    <div id="container">
      <video autoplay="true" id="videoElement"></video>
    </div>
    <button onclick="startCam()">Start WebCam</button>

    <script>
    </script>

  </body>

现在在<script>标签里面写下代码：

      function startCam() {
        var video = document.querySelector("#videoElement");

        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia({ video: true })
            .then(function (stream) {
              video.srcObject = stream;
            })
            .catch(function (err) {
              console.log(err);
            });
        }
      }

希望对你有帮助！

【讨论】：

谢谢！是的，先生，这很有帮助。您的代码工作正常，但我很困惑为什么我无法从伪文件（Blob 文件）呈现视频。
浏览器不支持您尝试转换为 Blob 的视频格式（类型）。试试type: "video/webm"，可能会奏效。