Считайте видеокадр в изображения из любого источника - CORS - Electron / Angular / TS - PullRequest
Новая
       41

Считайте видеокадр в изображения из любого источника - CORS - Electron / Angular / TS

0 голосов
/ 22 октября 2018

Предыстория:

Начал использовать Electron и Angular для создания приложения Windows, используя этот шаблон , но обновил зависимости до самого последнего.

Цель - конвертировать видео в изображения.Видео может быть загружено с любого произвольного URL, но я хочу, чтобы оно работало хотя бы с локальной файловой системой.

Текущее состояние

Вот как я пытаюсьизвлечь изображение из текущего состояния видео.Холст обновлен, текущее изображение нарисовано просто отлично. 

captureFrame();
{
    const canvas = this.canvasRef.nativeElement as HTMLCanvasElement;
    const video = this.videoRef.nativeElement as HTMLVideoElement;

    canvas.setAttribute('crossOrigin', 'Anonymous');
    video.setAttribute('crossOrigin', 'Anonymous');

    const context = canvas.getContext('2d');

    const width = video.videoWidth;
    const height = video.videoHeight;

    context.drawImage(video, 0, 0, width, height);

    const imageData = context.getImageData(0, 0, width, height);

    console.log('image data retrieved:',
        imageData.data.length,
        imageData
    );
}

Задача

Вот что я получаю при попытке выполнить: 

ERROR DOMException: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Что очевидно, потому что видео не было загружено с исходного пути.

Ошибка исходит от zone-mix.js:388.

Вопросы и то, что у меня до сих пор

1)

Я уверен в том, что я использую видео, так как я могу отключить это?Насколько я понимаю, Electron работает в среде Chromium.Я помню, как смог запустить Chrome с опцией Access-Control-Allow-Origin и загрузить файлы таким образом, значит ли это, что ошибка вызвана Electron?

Electron запускается с 

webPreferences: {
  webSecurity: false
},

иЯ не вижу других вариантов.

2)

Angular уже нуждается в DomSanitizer для источника, чтобы воспроизводить видео вообще.Можно ли как-нибудь применить это полотно?Означает ли это, что ошибка вызвана Angular?

3)

Будет ли работать решение, когда я копирую файл в доверенный путь?URL для загруженного видео создается с window.URL.createObjectURL(file);, разве это не должно обеспечивать безопасный маршрут?

...