Question

我正在尝试在我的网页中显示我的网络摄像头，但视频未显示，并且正在获取此错误（无法在“ URL”上执行“ createObjectURL”：找不到与提供的签名匹配的功能。在）这是我的Java脚本

  <script type ="text/javascript">
(function(){
    var video = document.getElementById('video'),
                vendorUrl = window.URL || window.webkitURL;

                navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                navigator.getMedia({
                    video: true,
                    audio: false    
                }, function(stream){
                        video.src = vendorUrl.createObjectURL(stream);
                        video.play();
                }, function(error){

                });
})();

</script>

我已经阅读了一些有关google的文档，其中删除了createObjectURL，但我忘了它的来源，如果是真的，那么该怎么做才能在我的网页中显示我的摄像头视频

Answer 1

您正在尝试将原始数据作为MediaSource流播放。

要更正此问题，请更改：

video.src = vendorUrl.createObjectURL(stream);
video.play();

收件人：

video.srcObject = stream;
video.play();

此外，请注意，navigator.getUserMedia已过时，您应该使用navigator.mediaDevices.getUserMedia()来代替：

navigator.getMedia = navigator.mediaDevices.getUserMedia()

Answer 2

您可以使用p5js库。出于安全原因，这在stackOverFlow代码段中无效。

尽管您可以在p5Js online editor上对其进行测试，也可以在示例中对其进行测试。不要忘记添加库 this example

var myCanvas;
var w = 640;
var h = 480;
var myVideo;
var frame;

function setup(){

  myCanvas = createCanvas(w,h);
  
  myVideo = createCapture(VIDEO);
  myVideo.id("whatever_id_name");
  myVideo.size(myCanvas.width, myCanvas.height); //480p
}

function draw(){ //loop function

  background(100); //Gray background - not visible
  
	
  rect(100,100,60,30); //Create rect at position (100,100) with size (60,30)
	
  //frameRate(1); //Default frame rate (30 frames per second)
	
  //add the image of the capturedVideo every frame 
  //at position (100,100)
  //with size have of the canvas dimensions - use 0,0 for default video size
  frame = image(myVideo, 160,100,w/2,h/2); 
	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.js"></script>

在我的网页上显示我的网络摄像头无法正常工作

2 个答案: