HTML5 video capture from browser: error with "stop() not a function"

By -
A quick blog post about recent changes in the MediaStream API support in modern browsers. I had previously developed a function allowing users to capture images from their webcam, based on tutorials found on the web.

Here was my code to initialize the capture canvas:

function CaptureImageBeginCapture() {
   CaptureImageCanvas = $("#ImageCaptureCanvas")[0];
   var videoObj = { "video": true },
      errBack = function(error) {
         console.log("Video capture error: ", error.code);
      };

   CaptureImageVideo = $("#ImageCapturePreviewFrame")[0];
   CaptureImageContext = CaptureImageCanvas.getContext("2d");

   // Put video listeners into place   if(navigator.getUserMedia) { // Standard      navigator.getUserMedia(videoObj, function(stream) {
         CaptureImageStream = stream;
         CaptureImageVideo.src = stream;
         CaptureImageVideo.play();
      }, errBack);
   } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed      navigator.webkitGetUserMedia(videoObj, function(stream){
         CaptureImageStream = stream;
         CaptureImageVideo.src = window.webkitURL.createObjectURL(stream);
         CaptureImageVideo.play();
      }, errBack);
   }
   else if(navigator.mozGetUserMedia) { // Firefox-prefixed      navigator.mozGetUserMedia(videoObj, function(stream){
         CaptureImageStream = stream;
         CaptureImageVideo.src = window.URL.createObjectURL(stream);
         CaptureImageVideo.play();
      }, errBack);
   }
}
And this code was used to react to the pressing of a "Capture" button which froze the image and then saved it.
// Snapping up the picture$("#ImageCaptureSnap").click(function() {
   CaptureImageContext.drawImage(CaptureImageVideo, 0, 0, 640, 480, -95,0,448,330);
   CaptureImageStream.stop();
   $("#ImageCaptureStep1").hide();
   $("#ImageCaptureStep2").show();
});
Unfortunately, the MediaStream.stop() function recently became depreciated. After a quick search, I found only one article explaining what I need to do to fix it. The fix is to get a "track" instance from your MediaStream and stop the track instead of stopping the MediaStream itself.
// Snapping up the picture$("#ImageCaptureSnap").click(function() {
   CaptureImageContext.drawImage(CaptureImageVideo, 0, 0, 640, 480, -95,0,448,330);
   try { CaptureImageStream.stop(); } catch(e) { }
   try {
       var track = CaptureImageStream.getTracks()[0];
       track.stop();
    } catch(e) { }
   $("#ImageCaptureStep1").hide();
   $("#ImageCaptureStep2").show();
});
Hopefully it won't change further, but as we know HTML5 APIs are evolving all the time.

Comments

KlaudiaSmit said…
Our best japanese food new york menu features a tantalizing selection of traditional Japanese dishes, ranging from sushi and sashimi to hibachi-grilled specialties and noodle dishes. Each dish is meticulously prepared using the freshest ingredients, authentic recipes, and time-honored cooking techniques to ensure an unparalleled dining experience.
Mon Apr 15, 08:29:00 PM
Post a Comment

Popular posts from this blog

Nginx error 413: Request entity too large Quick Fix

By -
A quick article today about a common error people encounter with Nginx: the infamous 413 Request Entity Too Large HTTP error. I had the problem myself just yesterday on one of my newly configured servers, so I thought I'd make a blog post about it to make sure I don't forget this next time. Error 413: what does it mean? This error shows up when a visitor sends too much data in the HTTP request. This is normally caused by: • an overy large file being uploaded by the visitor • more generally too much POST data being sent by the client The fix is as simple as setting a directive in your Nginx configuration, read on below. How to fix it? client_max_body_size To fix this, you need to increase the value of the client_max_body_size directive. This directive defines the maximum amount of data Nginx will accept in an HTTP request. By default this value is set to 1 megabyte, meaning if you attempt to upload a file larger than 1 megabyte you'll be getting an  Error ...
Read more

Dealing with Nginx 400 Bad Request HTTP errors

By -
Today I'll write about something I experienced personally, on my websites. Some visitors reported that they were getting a "400 Bad Request" Nginx error randomly when visiting pages. And when they start getting that error, they can't access the site anymore: it'll output the same error no matter the page, until you "clear your cache and cookies". The error is easily understandable and is likely to be caused by... too much cookie data. Every time a visitor loads *any* page/content/file of your website, it sends the cookie data to the server. Cookie data is sent under the form of 1 header line starting with "Cookie: ". Basically, Nginx by default is configured to accept header lines of a maximum size of 4 kilobytes. When a line in the headers exceeds 4 kilobytes, Nginx returns the '400 Bad Request' error. Cookie data sometimes gets big, so it causes the error. It particularly happens on forums like vBulletin, Invision and others...
Read more

Affiliate module for Interspire Shopping Cart

By -
Image
Hello, I have already implemented this module on two shops rather successfully. The concept is quite simple: websites that want to get rewarded through affiliation must link to your website using an identifier in the URL. If your website is http://website.com/, then your links must be of the form http://website.com/?ref=123 where 123 is the affiliate ID. when a visitor clicks the link, the affiliate ID will be placed in a cookie that will expire after 15 days (this can be configured) when the visitor purchases an item: if the affiliate ID cookie is still enabled, the affiliate will be credited of a certain amount, it can be a share of the sale or a fixed amount. affiliate accounts are simple customer accounts, there is no modification to make regarding accounts. When a sale is made, they receive store credit. They can either spend the store credit to purchase items on the store, or they can manually request for a withdrawal (managing withdrawals is up to you). I will detail the i...
Read more