jhuckaby / webcamjs

HTML5 Webcam Image Capture Library with Flash Fallback
MIT License
2.5k stars 1.11k forks source link

Image captured rotates 90 degrees anti-clockwise #287

Open WadeFanyao opened 5 years ago

WadeFanyao commented 5 years ago

webcamjs is really good and I love it. But I am facing an issue which I actually found out the solution, but I don't know if this will impact something or not.

Half results of my mobile devices are correct but the rest of them are rotated 90 degrees anti-clockwise under preview.

I found out issue(May be not) is in below function:

function doImageCapturing() {
                                if (imageCapture) {

                                    var has_platform_error = false;
                                    // if this device throws platform error when trying to call takePhoto()
                                    if (localStorage && !localStorage.getItem('webcamjs_platform_error')) {
                                        has_platform_error = false;
                                    } else {
                                        has_platform_error = true;
                                    }

                                    if (has_platform_error === false) {

                                        imageCapture.takePhoto(camera_photo_settings)
                                           .then(function (blob) {
                                               createImageBitmap(blob)
                                               .then(function (imageBitmap) {
                                                   //context.drawImage(imageBitmap, 0, 0, self.video.videoWidth, self.video.videoHeight); -----I commented
                                                   context.drawImage(self.video, 0, 0, self.video.videoWidth, self.video.videoHeight); ----I added

                                                   // fire callback right away
                                                   func();
                                               })
                                               .catch(function (error) {
                                                   return reject(self.dispatch('error', "Error when creating image bitmap: " + error));
                                               });
                                           })
                                            .catch(function (error) {
                                                try {
                                                    localStorage.setItem('webcamjs_platform_error', 1);
                                                } catch (e) { }
                                                //return reject(self.dispatch('error', "Error when taking photo: " + error));
                                                Webcam.reattach().then(() => {
                                                    //wait for video to come
                                                    Webcam.on('live', function () {
                                                        captureImageWhenPlatformError();
                                                        Webcam.off('live');
                                                    });
                                                });
                                            });
                                    }
                                    else {
                                        captureImageWhenPlatformError();
                                    }
                                }
                                else {
                                    context.drawImage(self.video, 0, 0, self.video.videoWidth, self.video.videoHeight);
                                    // fire callback right away
                                    func();
                                }

I changed below code:

context.drawImage(imageBitmap, 0, 0, self.video.videoWidth, self.video.videoHeight);

to context.drawImage(self.video, 0, 0, self.video.videoWidth, self.video.videoHeight);

And then it works perfect.

The devices I used to test: ZTE, Andriod 7.1.1, chrome 70.0.3538.110. Works good. Samsung Galaxy Tab A (2017), Android 7.1.1, chrome 71.0.3578.99, not working.

I just want to understand why it works when changing imageBitmapto self.video. Other parameters are the same.