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 サンプル コードに取り組んでいて、エラーが発生しました: Uncaught TypeError: Cannot set property 'src' of null

inspect 要素を調べたところ、

video.src

「null」であることが判明しています

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*/ 
});

DOM が読み込まれる前にビデオ タグをクエリしているため、要素が存在しないため、null エラーが発生しています。

于 2014-07-14T13:52:16.217 に答える