次のJavaScriptコードを使用してウェブカメラを開きました:navigator.getUserMedia
ウェブカメラを停止または閉じるためのJavaScriptコードはありますか?みんな、ありがとう。
編集
この回答が最初に投稿されて以来、ブラウザAPIは変更されました。 .stop()
は、コールバックに渡されるストリームで使用できなくなりました。開発者は、ストリーム(オーディオまたはビデオ)を構成するトラックにアクセスし、各トラックを個別に停止する必要があります。
例(上記のリンクから):
var track = stream.getTracks()[0]; // if only one media track
// ...
track.stop();
ブラウザのサポートは異なる場合があります。
元の答え
navigator.getUserMedia
は成功コールバックでストリームを提供します。そのストリームで.stop()
を呼び出して記録を停止できます(少なくともChromeでは、FFは気に入らないようです)
「stop "over MediaStream object」を呼び出すことができますが、これは廃止されます;新しい提案は、各メディアトラックで "stop"を呼び出してメディアトラックをリリースすることです。
mediaStream.stop();
// or
mediaStream.getTracks()[0].stop();
mediaStream.getTracks()[1].stop();
2015年11月3日更新---- 10:34:24 AM
stream.stop
ハックは次のとおりです。var MediaStream = window.MediaStream;
if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
MediaStream = webkitMediaStream;
}
/*global MediaStream:true */
if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) {
MediaStream.prototype.stop = function() {
this.getTracks().forEach(function(track) {
track.stop();
});
};
}
異なるブラウザーでWebcam Videoを開始する
Opera 12の場合
window.navigator.getUserMedia(param, function(stream) {
video.src =window.URL.createObjectURL(stream);
}, videoError );
Firefox Nightly 18.0の場合
window.navigator.mozGetUserMedia(param, function(stream) {
video.mozSrcObject = stream;
}, videoError );
Chrome 22の場合
window.navigator.webkitGetUserMedia(param, function(stream) {
video.src =window.webkitURL.createObjectURL(stream);
}, videoError );
異なるブラウザーでWebcam Videoを停止する
Opera 12の場合
video.pause();
video.src=null;
Firefox Nightly 18.0の場合
video.pause();
video.mozSrcObject=null;
Chrome 22の場合
video.pause();
video.src="";
これにより、ウェブカメラのライトは毎回消灯します...
FF、ChromeおよびOperaは、標準としてnavigator.mediaDevices
を介してgetUserMedia
の公開を開始しました(変更される可能性があります:)
navigator.mediaDevices.getUserMedia({audio:true,video:true})
.then(stream => {
window.localStream = stream;
})
.catch( (err) =>{
console.log(err);
});
// later you can do below
// stop both video and audio
localStream.getTracks().forEach( (track) => {
track.stop();
});
// stop only audio
localStream.getAudioTracks()[0].stop();
//stop only audio
localStream.getVideoTracks()[0].stop();
成功ハンドラでgetUserMediaに返されたストリームオブジェクトを使用して、ストリームを直接終了できます。例えば.
localMediaStream.stop()
video.src=""
またはnull
は、ビデオタグからソースを削除するだけです。ハードウェアをリリースしません。
以下の方法を試してください
var mediaStream = null;
navigator.getUserMedia(
{
audio: true,
video: true
},
function (stream) {
mediaStream = stream;
mediaStream.stop = function () {
this.getAudioTracks().forEach(function (track) {
track.stop();
});
this.getVideoTracks().forEach(function (track) { //in case... :)
track.stop();
});
};
/*
* Rest of your code.....
* */
});
/*
* somewhere insdie your code you call
* */
mediaStream.stop();
.stop()
が非推奨の場合、@ MuazKhan doseのように再追加する必要はないと思います。これは、物事が非推奨になり、今後使用すべきではない理由の理由です。代わりにヘルパー関数を作成してください...これは、es6バージョンです
function stopStream (stream) {
for (let track of stream.getTracks()) {
track.stop()
}
}
Videoタグでストリーミングし、idがvideo-<video id="video"></video>
の場合、次のコードが必要です-
var videoEl = document.getElementById('video');
// now get the Steam
stream = videoEl.srcObject;
// now get all tracks
tracks = stream.getTracks();
// now close each track by having forEach loop
tracks.forEach(function(track) {
// stopping every track
track.stop();
});
//ビデオのsrcObjectにnullを割り当てますvideoEl.srcObject = null;
ストリーミングを閉じるにはトラックが必要であり、トラックに到達するにはstream
オブジェクトが必要なので、上記のMuaz Khanの回答を利用して使用したコードは次のとおりです。
if (navigator.getUserMedia) {
navigator.getUserMedia(constraints, function (stream) {
videoEl.src = stream;
videoEl.play();
document.getElementById('close').addEventListener('click', function () {
stopStream(stream);
});
}, errBack);
function stopStream(stream) {
console.log('stop called');
stream.getVideoTracks().forEach(function (track) {
track.stop();
});
もちろん、これはすべてのアクティブなビデオトラックを閉じます。複数ある場合は、それに応じて選択する必要があります。
すべてのトラックを停止する必要があります(Webカメラ、マイクから):
localStream.getTracks().forEach(track => track.stop());
これを確認してください: https://jsfiddle.net/wazb1jks/3/
navigator.getUserMedia(mediaConstraints, function(stream) {
window.streamReference = stream;
}, onMediaError);
記録停止
function stopStream() {
if (!window.streamReference) return;
window.streamReference.getAudioTracks().forEach(function(track) {
track.stop();
});
window.streamReference.getVideoTracks().forEach(function(track) {
track.stop();
});
window.streamReference = null;
}
ストリームで.stop()を使用すると、http経由で接続したときにchromeで機能します。 ssl(https)を使用すると機能しません。
localStream.getTracks().forEach(track => track.stop());
正しい...だけでなく、httpsの何かを使用するときにも正しくありません。
次のコードは私のために働いた:
public vidOff() {
let stream = this.video.nativeElement.srcObject;
let tracks = stream.getTracks();
tracks.forEach(function (track) {
track.stop();
});
this.video.nativeElement.srcObject = null;
this.video.nativeElement.stop();
}