The Wayback Machine - https://web.archive.org/web/20200521100924/https://github.com/justadudewhohacks/face-api.js/issues/392
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fetching external videos in browser (fetchImage for <video>) #392

Open
pt-br opened this issue Aug 24, 2019 · 6 comments
Open

Fetching external videos in browser (fetchImage for <video>) #392

pt-br opened this issue Aug 24, 2019 · 6 comments

Comments

@pt-br
Copy link

@pt-br pt-br commented Aug 24, 2019

I've ran into this issue for a couple hours and I ended up editing the dist library adding two new functions called fetchVideo and bufferToVideo that works pretty much like the fetchImage and bufferToImage functions.

I'll leave it here to help somebody else with the same issue and in case someone wants to include it on future releases.

face-api.js

...
exports.fetchVideo = fetchVideo;
...
function fetchVideo(uri) {
        return __awaiter(this, void 0, void 0, function () {
            var res, blob;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, fetchOrThrow(uri)];
                    case 1:
                        res = _a.sent();
                        return [4 /*yield*/, (res).blob()];
                    case 2:
                        blob = _a.sent();
                        if (!blob.type.startsWith('video/')) {
                            throw new Error("fetchVideo - expected blob type to be of type video/*, instead have: " + blob.type + ", for url: " + res.url);
                        }
                        return [2 /*return*/, bufferToVideo(blob)];
                }
            });
        });
    }

function bufferToVideo(buf) {
        return new Promise(function (resolve, reject) {
            if (!(buf instanceof Blob)) {
                return reject('bufferToVideo - expected buf to be of type: Blob');
            }
            var reader = new FileReader();
            reader.onload = function () {
                if (typeof reader.result !== 'string') {
                    return reject('bufferToVideo - expected reader.result to be a string, in onload');
                }
                var video = env.getEnv().createVideoElement();
                video.onloadstart = function () {
                    setTimeout(() => {
                        return resolve(video);
                    }, 100)
                };
                video.onerror = reject;
                video.type = "video/mp4";
                video.autoplay = true;
                video.src = reader.result;
            };
            reader.onerror = reject;
            reader.readAsDataURL(buf);
        });
    }

Usage example:

const videoElement = document.querySelector('video');
    const detections = await faceapi
      .detectAllFaces(await faceapi.fetchVideo(videoElement.src))
      .withFaceLandmarks()
      .withFaceDescriptors();
@pt-br
Copy link
Author

@pt-br pt-br commented Aug 24, 2019

@justadudewhohacks Feel free to close this issue if you want (idk if it should stay open or not)

@justadudewhohacks
Copy link
Owner

@justadudewhohacks justadudewhohacks commented Sep 13, 2019

Thanks for your solution, if you want to open a PR contributing this method feel free :)

@Bea98
Copy link

@Bea98 Bea98 commented Oct 28, 2019

is this code applicable to face-api.min.js and if so how can I implement it?
Thank you!

@rajkishoreandia
Copy link

@rajkishoreandia rajkishoreandia commented Jan 31, 2020

@pt-br could you please tell me where to place the code properly.if i write it as stand alone methods.i am getting following error in react.Failed to compile.
I changed the face-api.js still getting the below error
Attempted import error: 'fetchVideo' is not exported from 'face-api.js' (imported as 'faceapi').

@punisher97
Copy link

@punisher97 punisher97 commented Jan 31, 2020

Please add this feature, thanks!

@SathishSaminathan
Copy link

@SathishSaminathan SathishSaminathan commented Feb 12, 2020

is this code applicable to face-api.min.js and if so how can I implement it?
Thank you!

have u found the solution bro?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.