最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Stop video with getUserMedia - Stack Overflow

programmeradmin1浏览0评论

I'm trying to learn more about streaming webcams and i'm stuck at stopping the video I hope someone can help me with stopping the video

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" width="400" height="300"></video>
<button id="start">START!</button>
<button id="stop">STOP!</button>

I'm trying to learn more about streaming webcams and i'm stuck at stopping the video I hope someone can help me with stopping the video

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" width="400" height="300"></video>
<button id="start">START!</button>
<button id="stop">STOP!</button>

Share Improve this question asked Dec 4, 2015 at 10:03 I NAI NA 1371 silver badge6 bronze badges 1
  • Possible duplicate of Stop/Close webcam which is opened by navigator.getUserMedia – jcaron Commented Dec 4, 2015 at 10:41
Add a ment  | 

1 Answer 1

Reset to default 6

You need to use getTrack() to be able stop the stream.

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

Also fiddle it for you to check it out

发布评论

评论列表(0)

  1. 暂无评论