2 
var video = document.querySelector("video");
var constraints = {audio: false, video: true};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||     navigator.mozGetUserMedia;

function successCallback(stream) 
{
  window.stream = stream; // stream available to console
  if (window.URL) 
    {
         video.src = window.URL.createObjectURL(stream);
    } else 
    {
         video.src = stream;
    }
}

function errorCallback(error)
{
    console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

嗨，我正在研究 getUserMedia 的 webrtc 示例代码并收到错误： 未捕获的TypeError：无法设置属性 'src' of null

我查看了检查元素并找到了

video.src

结果是“空”，而

window.URL.createObjectURL(stream)

确实具有“blob:http%3A//danielle/738c6a8e-c887-4bd2-8b3d-3e3a18e6ac1f”的值

我也可以在“流”对象中看到一个对象。

我不知道为什么它没有将该值传递给 video.src

任何人都可以在代码中看到任何原因吗？

我从http://googlechrome.github.io/webrtc/samples/web/content/getusermedia/得到这段代码

我实际上从该链接复制了完全相同的代码。

这是我的 HTML 代码

<html>
<head>
<base target="_blank">
<title>getUserMedia</title>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div id="container">
    <video controls style="border: 1px solid rgb(14, 168, 234); width: 90%;"></video>
</div>
</body>
</html>
4

3 回答 3

3

几件事

  • HTML 是从 TOP DOWN 读取的。因此，您很可能声明了一个视频元素，但只有在阅读并执行脚本后才能找到它。所以，要么在你的视频元素之后移动你的脚本执行，要么移动你的视频元素。
  • 此外，您可能希望将视频元素设置为自动播放。您可以保持原样，但您必须在页面上手动播放（使用给定的控件）或在 JS 中手动播放。

以下是我建议的有效更改：

<html>
<head>
<base target="_blank">
<title>getUserMedia</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
    <video controls style="border: 1px solid rgb(14, 168, 234); width: 90%;" autoplay></video>
</div>
<script src="main.js"></script>
</body>
</html>
于 2014-07-15T12:58:27.923 回答
1

Google chrome 会阻止 http 中的视频和音频设备访问，因此请确保您使用的是 https 协议，然后您将获得 navigator.getUserMedia() 工作

于 2019-12-17T18:46:07.623 回答
0

我很确定您的 html 代码中缺少视频标签，添加这样的行

<video controls style="border: 1px solid rgb(14, 168, 234); width: 90%;"></video>

到您的 HTML 代码。您还可以阅读https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes

编辑：

如果你不想使用 jquery ($(document).ready())，用这个包装你的 javascript 代码

document.addEventListener("DOMContentLoaded", function() { 
    /*your js code here*/ 
});

您收到 null 错误，因为您在加载 DOM 之前查询视频标签，因此该元素不存在。

于 2014-07-14T13:52:16.217 回答