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 示例代码并收到错误: 未捕获类型错误:无法将属性“src”设置为 null
我查看了检查元素并发现了
video.src
结果为“null”，而
window.URL.createObjectURL(stream)
确实具有“blob:http%3A//danielle/738c6a8e-c887-4bd2-8b3d-3e3a18e6ac1f”的值
我也可以在“stream”对象中看到一个对象。
我不知道为什么它没有将该值传递给 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>
最佳答案
有几件事
- HTML 是从上到下读取的。因此，您很可能声明了一个视频元素，但只有在阅读并执行脚本后才能找到它。因此，要么将脚本执行移到视频元素之后，要么移动视频元素。
- 此外，您可能希望将视频元素设置为自动播放。您可以保持原样，但您必须在页面上手动播放(使用给定的控件)或在 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>
关于javascript - webrtc getUserMedia javascript代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24731913/