无法从iOS Safari上的视频创建缩略图-桌面可用（Javascript）

我很难让Chrome桌面上的代码在iPhone上运行。我创建了一个演示页面（），允许用户选择（或捕获）视频。一旦选择，视频将显示在视频元素中，缩略图图像将显示在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
}

更新： 问题似乎与使用哪个摄像头（前/后）拍摄视频以及使用哪个方向有关。除了后置摄像头的纵向模式外，所有其他模式似乎都可以正常工作。我在这里更新了JSFIDLE：并在github上进行了相同的测试：以更好地说明问题

更新2： 我已经放弃了这个功能。仅供参考，我的PWA应用程序允许用户捕获视频并上传到服务器。该应用程序使用

标记捕获视频，并使用javascript通过AJAX调用发布视频。在发布之前，PWA创建了视频的缩略图，并将其发送出去。由于上面提到的原因，在客户端生成缩略图是有问题的，所以我现在在视频到达后在服务器上创建缩略图。我使用FFMPEG从上传的电影中提取PNG图像，并存储起来供以后使用

但是，唉，我发现了iOS Safari的另一个问题。一旦应用程序失去焦点（即发送到后台），此设备上的PWA应用程序将无法访问摄像头。当应用程序首次启动时，摄像头将正常工作，直到您打开其他应用程序并返回。然后，摄像头屏幕全黑，要求用户结束应用程序并重新启动

更新3：嗯，情况变得更糟了。我刚升级到iOS 13.4，现在摄像头根本无法使用

标签。我想我会调查一下WebRTC

---

更新4：我可能说得太快了。13.4更新实际上打破了我设计

标签的方式，因为我把它包装在

中，并隐藏了标准（丑陋）标签。我刚刚添加了一个javascript例程来调用隐藏输入的click方法，现在一切似乎都正常了。祈祷吧……这真是一场灾难。

Argh！我已经将问题归结为在纵向模式下使用后置（非自拍）摄像头拍摄的视频。如果我在横向模式下拍摄视频，或者在纵向或横向模式下使用前向（自拍）相机，那么代码可以工作！iPhone 11 Pro上的后肖像视频有什么不同？[我无法告诉你这个问题有多严重。]啊！我已经将问题归结为在纵向模式下使用后置（非自拍）摄像头拍摄的视频。如果我在横向模式下拍摄视频，或者在纵向或横向模式下使用前向（自拍）相机，那么代码可以工作！iPhone 11 Pro上的后肖像视频有什么不同？[我无法告诉你这个问题有多严重。]