使用 getUserMedia 停止视频

Posted 2023-05-07

【中文标题】使用 getUserMedia 停止视频

【英文标题】：Stop video with getUserMedia

【发布时间】：2016-03-09 05:28:35

【问题描述】：

我正在尝试了解有关流式网络摄像头的更多信息，但我一直无法停止视频我希望有人可以帮助我停止视频

var videoDiv = $("#video"),
	vendorUrl = window.URL || window.webkitURL;
	navigator.getMedia = 	navigator.getUserMedia ||
							navigator.webkitGetUserMedia ||
							navigator.mozGetUserMedia ||
							navigator.oGetUserMedia ||
							navigator.msGetUserMedia;

function captureWebcam(video, audio)
	navigator.getMedia(
		video: video,
		audio: audio
	, function(stream)
		localStream = stream;
		videoDiv.attr("src", vendorUrl.createObjectURL(localStream))
	, function(error)
		// An error occured
		// error.code
		console.log(error)
	);	
		
$("#stop").on("click", function()

	videoDiv.attr("src", "")	
	//captureWebcam(false, false)
    // Stop the video
);	
$("#start").on("click", function()
	captureWebcam(true, false)
);

<video id="video"  ></video>
<button id="start">START!</button>
<button id="stop">STOP!</button>

【问题讨论】：

Stop/Close webcam which is opened by navigator.getUserMedia的可能重复

【参考方案1】：

您需要使用getTrack() 才能停止流。

var videoDiv = document.getElementById("video"),
    vendorUrl = window.URL || window.webkitURL;
    navigator.getMedia =    navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.oGetUserMedia ||
                            navigator.msGetUserMedia;

var MediaStream;
function captureWebcam(video, audio)
    navigator.getMedia(
        video: video,
        audio: audio
    , function(stream)
        videoDiv.src = vendorUrl.createObjectURL(stream);
        MediaStream = stream.getTracks()[0]; // create the stream tracker
    , function(error)
        // An error occured
        // error.code
        console.log(error)
    ); 
       
$("#stop").on("click", function()
   // Stop the tracked stream
   MediaStream.stop()
); 
$("#start").on("click", function()
    captureWebcam(true, false)
);

也fiddle给你看看

【讨论】：

小提琴不工作....