Невозможно создать миниатюру из видео в iOS Safari - работает на рабочем столе (Javascript) - PullRequest
Новая
       67

Невозможно создать миниатюру из видео в iOS Safari - работает на рабочем столе (Javascript)

0 голосов
/ 25 марта 2020

У меня проблемы с получением кода, который работает на Chrome рабочем столе для работы на iPhone. Я создал демонстрационную страницу (https://jsfiddle.net/0nryc7uf/), которая позволяет пользователям выбирать (или захватывать) видео. После выбора видео отображается в элементе видео, а миниатюрное изображение отображается в элементе IMG. Это хорошо работает на рабочем столе, но не на iPhone. Видео будет воспроизводиться iPhone (постер не отображается), но миниатюра не отображается. Есть мысли? 

function fileSelected(e)
{   //User captured or selected file: Event
    var file = e.target.files[0];
    if (file) 
      readFile(file);
    else 
        alert('Not a valid image!');    
}

function readFile(file) 
{//set up a FileReader
var reader = new FileReader();
reader.onloadend = function () {
    makeThumbnail(reader.result);
}
reader.onerror = function () {
    alert('There was an error reading the file!');
}
//read in the file data
reader.readAsDataURL(file);
}

function makeThumbnail(fileData) {
    //Find target elements in page
    var myvid = document.getElementById('myvid');
    var mythumb = document.getElementById('mythumb');

    //Create a video element and load with 
    var video = document.createElement('video');

    video.onloadedmetadata = function() {
    };
    video.oncanplay = function() {   //need this for iphone
        this.currentTime = 0.1;
        video.oncanplay = null;
        };  
    video.onseeked = function(e) {  
        //Create canvas to hold thumbnail
        var canvas = document.createElement('canvas');
        canvas.height = video.videoHeight;
        canvas.width = video.videoWidth;
        var ctx = canvas.getContext('2d'); 
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);            
        //display thumbnail
        mythumb.src = canvas.toDataURL("image/png");
        myvid.src = fileData;
        myvid.play();
    };

    video.src = fileData;
    video.load();  //need this for iphone
}

ОБНОВЛЕНИЕ: Проблема, похоже, связана с тем, какая камера (передняя / задняя) использовалась для захвата видео и какая ориентация использовалась. Кажется, все работает нормально, кроме портретного режима с задней камерой. Я обновил jsFiddle здесь: https://jsfiddle.net/roknjohn/j0gyn52k/4/ и провел такой же тест на github: https://roknjohn.github.io/thumbnail/index.html, чтобы лучше проиллюстрировать проблему.

ОБНОВЛЕНИЕ 2: У меня есть отказался от этой функциональности. К вашему сведению, мое приложение PWA позволяет пользователям захватывать видео и загружать на сервер. Приложение использует тег <input type="file" accept="video/mp4,video/x-m4v,video/*"> для захвата видео и javascript для публикации с вызовом AJAX. Перед публикацией PWA создал эскиз видео и также отправил его. Поскольку создание миниатюры на стороне клиента было проблематичным c по причинам, указанным выше, теперь я создаю миниатюру на сервере, как только появляется видео. Я использую FFMPEG, чтобы извлечь изображение PNG из загруженного файла mov ie и сохранить для дальнейшего использования.

Но, увы, я обнаружил еще одну проблему с iOS Safari. Приложения PWA на этом устройстве теряют доступ к камере, как только приложение теряет фокус (т.е. отправляется в фоновый режим). При первом запуске приложения камера работает хорошо, пока вы не откроете другое приложение и не вернетесь назад. Затем экран камеры становится абсолютно черным, что требует от пользователя завершения приложения и его повторного запуска.

ОБНОВЛЕНИЕ 3: Что ж, становится хуже. Я только что обновился до iOS 13.4 и теперь камера вообще не работает с тегом <input>. Думаю, я загляну в WebRT C ...

ОБНОВЛЕНИЕ 4: Возможно, я говорил слишком рано. Обновление 13.4 фактически сломало мой стиль тега <input>, так как я обернул его в <label> и скрыл стандартный (уродливый). Я просто добавил подпрограмму javascript для вызова метода click скрытого ввода, и теперь все работает. Скрестив пальцы ... это было очень круто.

...