javascript - 无法从 iOS Safari 上的视频创建缩略图 - 适用于桌面 (Javascript)

Question

我无法让可在 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 创建了视频的缩略图并将其发送出去。由于上述原因在客户端生成缩略图存在问题，我现在在视频到达后在服务器上创建缩略图。我使用 FFMPEG 从上传的电影中提取 PNG 图像并存储以备后用。

但是，唉，我发现了 iOS Safari 的另一个问题。一旦应用程序失去焦点（即发送到后台），此设备上的 PWA 应用程序将无法访问相机。当应用程序首次启动时，相机工作良好，直到您打开另一个应用程序并返回。然后，相机屏幕全黑，需要用户关闭应用程序并重新启动。

更新3：嗯，它变得更糟。我刚刚升级到 iOS 13.4，现在相机根本无法使用<input>标签。我想我会研究 WebRTC ......

更新4：我可能说得太早了。13.4 更新实际上打破了我为<input>标签设计样式的方式，因为我将它包裹在 a 中<label>并隐藏了标准（丑陋的）标签。我刚刚添加了一个 javascript 例程来调用隐藏输入的 click 方法，现在似乎一切正常。手指交叉……这真是太棒了。

标签： javascriptiosiphonevideo-thumbnails