回答:
編集
この回答はもともと投稿されていたため、ブラウザAPIが変更されました。
.stop()
コールバックに渡されるストリームでは利用できなくなりました。開発者は、ストリーム(オーディオまたはビデオ)を構成するトラックにアクセスし、それぞれを個別に停止する必要があります。
詳細はこちら:https : //developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active
例(上記のリンクから):
stream.getTracks().forEach(function(track) {
track.stop();
});
ブラウザのサポートは異なる場合があります。
元の答え
navigator.getUserMedia
成功コールバックでストリームを提供します。.stop()
そのストリームを呼び出して記録を停止できます(少なくともChromeでは、FFはそれを好まないようです)
次のいずれかの関数を使用します。
// stop both mic and camera
function stopBothVideoAndAudio(stream) {
stream.getTracks().forEach(function(track) {
if (track.readyState == 'live') {
track.stop();
}
});
}
// stop only camera
function stopVideoOnly(stream) {
stream.getTracks().forEach(function(track) {
if (track.readyState == 'live' && track.kind === 'video') {
track.stop();
}
});
}
// stop only mic
function stopAudioOnly(stream) {
stream.getTracks().forEach(function(track) {
if (track.readyState == 'live' && track.kind === 'audio') {
track.stop();
}
});
}
注:回答が更新されました:06/09/2020
stream.getTracks().forEach(track => { track.stop() })
ですか?または、省略形を正当化するのに十分な頻度で実際にこれを行っている場合は、のようなヘルパー関数をいつでも定義できますstopAllTracks(stream)
。
は使用しないでください。stream.stop()
非推奨です。
使用する stream.getTracks().forEach(track => track.stop())
FF、Chrome、Operaは標準でgetUserMedia
viaの公開を開始しましたnavigator.mediaDevices
(変更される可能性があります:)
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 video
localStream.getVideoTracks()[0].stop();
異なるブラウザーでのWebカメラビデオの開始
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 );
異なるブラウザーでのWebカメラビデオの停止
Opera 12の場合
video.pause();
video.src=null;
Firefox Nightly 18.0の場合
video.pause();
video.mozSrcObject=null;
Chrome 22の場合
video.pause();
video.src="";
これにより、ウェブカメラのライトが毎回消えます...
ビデオタグでストリーミングがあり、IDがビデオであるとすると、<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();
});
// assign null to srcObject of video
videoEl.srcObject = null;
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の線量のように再度追加する必要はないと思います。これは、物事が非推奨になり、もう使用されない理由です。代わりにヘルパー関数を作成するだけです...これは、より多くのes6バージョンです
function stopStream (stream) {
for (let track of stream.getTracks()) {
track.stop()
}
}
for (let track of stream.getTracks()) { track.stop() }
stream.getTracks().forEach(function (track) { track.stop() })
ES5では、これにより次のような長いバベル変換がfor of
ストリーミングを閉じるにはトラックが必要であり、トラックに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();
});
もちろん、これはアクティブなビデオトラックをすべて閉じます。複数ある場合は、それに応じて選択する必要があります。
これを確認してください: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;
}
Webカメラを起動
stopWebCamera =()=>
//Start Web Came
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
//use WebCam
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
this.localStream = stream;
this.video.srcObject = stream;
this.video.play();
});
}
}
一般にWebカメラまたはビデオの再生を停止する
stopVideo =()=>
{
this.video.pause();
this.video.src = "";
this.video.srcObject = null;
// As per new API stop all streams
if (this.localStream)
this.localStream.getTracks().forEach(track => track.stop());
}
Webカメラの停止機能は、ビデオストリームでも機能します。
this.video.src = this.state.videoToTest;
this.video.play();
ストリームフォームsuccessHandleの参照がある
var streamRef;
var handleVideo = function (stream) {
streamRef = stream;
}
//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
val.stop();
});
stream.stop()
、クロムのためのdoen't作業が、mediaRecorder.stop()
それはブラウザが提供するストリームを停止しないのに対し、録音を停止します。このstackoverflow.com/questions/34715357/…をご覧ください