webrtc getUserMedia javascript 代码

Question

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);

Hi I am working on webrtc example code of getUserMedia and getting an error: Uncaught TypeError: Cannot set property 'src' of null嗨，我正在处理 getUserMedia 的 webrtc 示例代码并收到错误： Uncaught TypeError: Cannot set property 'src' of null

I looked into the inspect element and found the我查看了检查元素并找到了

video.src

is turning out to be 'null' while原来是“空”，而

window.URL.createObjectURL(stream)

does have value of "blob:http%3A//danielle/738c6a8e-c887-4bd2-8b3d-3e3a18e6ac1f"确实具有“blob：http%3A//danielle/738c6a8e-c887-4bd2-8b3d-3e3a18e6ac1f”的价值

I can see an object in 'stream' object as well.我也可以在“流”对象中看到一个对象。

I don't know why it's not passing that value to video.src我不知道为什么它没有将该值传递给 video.src

Can anyone see any reason in code?任何人都可以在代码中看到任何原因吗？

I got this code from http://googlechrome.github.io/webrtc/samples/web/content/getusermedia/我从http://googlechrome.github.io/webrtc/samples/web/content/getusermedia/得到了这个代码

I actually copied exactly the same code from that link.我实际上从该链接复制了完全相同的代码。

Here is my HTML code这是我的 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>

Answer 1

Couple of things几件事

HTML is read from the TOP DOWN. HTML 是从 TOP DOWN 读取的。 So, you very well may have a video element declared but it is only found after reading and executing the script.因此，您很可能声明了一个视频元素，但只有在阅读并执行脚本后才能找到它。 So, either move your script execution after your video element or move your video element.因此，要么在视频元素之后移动脚本执行，要么移动视频元素。
Also, you may want to set your video element to autoplay.此外，您可能希望将视频元素设置为自动播放。 You COULD keep it they way it is but you will have to play it manually on the page(using the given controls) or play it manually in the JS.您可以保持原样，但您必须在页面上手动播放（使用给定的控件）或在 JS 中手动播放。

Here are my suggested changes that work:以下是我建议的有效更改：

<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>

Answer 2

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

Answer 3

I am quite sure that you are missing a video tag in you html code, add a line like this我很确定您在 html 代码中缺少视频标签，请添加这样的行

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

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

EDIT:编辑：

If you don't want to use jquery ($(document).ready()), wrap your javascript code with this如果您不想使用 jquery ($(document).ready())，请使用此包装您的 javascript 代码

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

You are getting the null error because you are querying for a video tag before the DOM get loaded, so the element does not exist.您收到 null 错误是因为您在 DOM 加载之前查询了视频标签，因此该元素不存在。

webrtc getUserMedia javascript 代码

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-07-15 12:58:27

解决方案2
1 2019-12-17 18:46:07

解决方案3
0 2014-07-14 13:52:16

webrtc getUserMedia javascript 代码

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-07-15 12:58:27

解决方案2 1 2019-12-17 18:46:07

解决方案3 0 2014-07-14 13:52:16

解决方案1
3 已采纳 2014-07-15 12:58:27

解决方案2
1 2019-12-17 18:46:07

解决方案3
0 2014-07-14 13:52:16