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

嗨，我正在處理 getUserMedia 的 webrtc 示例代碼並收到錯誤： Uncaught TypeError: Cannot set property '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>

Answer 1

幾件事

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>

Answer 2

谷歌瀏覽器會阻止 http 中的視頻和音頻設備訪問，因此請確保您使用的是 https 協議，然后您將獲得 navigator.getUserMedia() 工作

Answer 3

我很確定您在 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 加載之前查詢了視頻標簽，因此該元素不存在。

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