私はこのような、ウェブカメラからビデオを再生するには、HTML5 videoタグのAPIを使用しています近代的なクロム

Question

を上video.play（）APIにアクセスする方法：私はエラーが発生して始めました

最近

videoElement = element.find('video')[0]; 
navigator.getUserMedia(constraints, function(stream) { 
if (navigator.mediaDevices.getUserMedia) { 
    videoElement.mozSrcObject = stream; 
} else { 
    var vendorURL = window.URL || window.webkitURL; 
    videoElement.src = window.URL.createObjectURL(stream); 
} 
videoElement.play(); 

：Uncaught (in promise) DOMException: The element has no supported sources 。

この機能リンク - https://www.chromestatus.com/feature/4765305641369600もあり、約Deprecate MediaStreamTrack.getSources()で、MediaDevices.enumerateDevices()が好ましい。しかし、コンソールから実行すると、MediaStreamTrack.getSourcesはundefinedになります。これが関連しているかどうかは不明です。 https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en - -

は、私はこの実装の説明見つけたこれを解決しようとしますが、今 video.play()は約束を返すと述べている：

var playPromise = document.querySelector('video').play(); 

// In browsers that don’t yet support this functionality, 
// playPromise won’t be defined. 
if (playPromise !== undefined) { 
    playPromise.then(function() { 
    // Automatic playback started! 
    }).catch(function(error) { 
    // Automatic playback failed. 
    // Show a UI element to let the user manually start playback. 
    }); 
} 

テストこのコードは常にキャッチセクションに落ちる - 自動再生がに失敗しました。

しかし、このデモは私のためにうまく動作します - https://googlechrome.github.io/samples/play-return-promise/ですが、<audio>タグです。

私はChrome v.53を使用しています。現在のFirefoxでは、古いコードはうまく動作します。

Answer 1

適切な約束をするには、ビデオデータが読み込まれるまで待つ必要があります。従って

video.addEventListener('loadeddata', function() { 
    playPromise = video.play(); 
}); 
video.load();