title: Unable to create thumbnail from video on iOS Safari - works on desktop (Javascript)
body: <p>I am having trouble getting code that works on Chrome desktop to work on iPhone.  I've create a demo page (<a href="https://jsfiddle.net/0nryc7uf/" rel="nofollow noreferrer">https://jsfiddle.net/0nryc7uf/</a>) that allows users to select (or capture) a video.  Once selected, the video is displayed in a video element and a thumbnail image is displayed in a IMG element.  This works well on desktop, but does not on iPhone.  The video will play on iPhone (no poster is shown) but the thumbnail doesn't appear.  Any thoughts?</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>UPDATE:
  The issue appears to have something to do with which camera (front/back) was used to capture the video and which orientation was used.  All seem to work fine except the portrait-mode with the back camera.  I have updated the jsFiddle here: <a href="https://jsfiddle.net/roknjohn/j0gyn52k/4/" rel="nofollow noreferrer">https://jsfiddle.net/roknjohn/j0gyn52k/4/</a>  and have the same test on github: <a href="https://roknjohn.github.io/thumbnail/index.html" rel="nofollow noreferrer">https://roknjohn.github.io/thumbnail/index.html</a> to better illustrate the problem.</p>
  
  <p>UPDATE 2:
  I have given up on this functionality.  FYI, my PWA app allows users to capture video and upload to the server.  The app uses a <code>&lt;input type="file" accept="video/mp4,video/x-m4v,video/*"&gt;</code> tag to capture the video and javascript to post it with an AJAX call. Before posting, the PWA created a thumbnail of the video and sent it along as well.  Since producing the thumbnail on the client-side was problematic for the reasons mentioned above, I now create the thumbnail on the server once the video arrives.  I use FFMPEG to extract a PNG image from the uploaded movie and store for later use.</p>
  
  <p>But, alas, I have discovered another issue with iOS Safari.  PWA apps on this device lose access to the camera once the app loses focus (i.e. sent to background.)  When the app is first launched, the camera works nicely until you open a different app and come back.  Then, the camera screen is totally black, requiring the user to end the app and re-launch.</p>
  
  <p>UPDATE 3: Well, it gets worse.  I just upgraded to iOS 13.4 and now the camera doesn't work at all with a <code>&lt;input&gt;</code> tag.  Guess I'll look into WebRTC...</p>
  
  <p>UPDATE 4: I may have spoken too soon.  The 13.4 update actually broke the way that I was styling the <code>&lt;input&gt;</code> tag, as I had it wrapped in a <code>&lt;label&gt;</code> and hid the standard (ugly) one.  I just added a javascript routine to call the hidden input's click method and all seems to be working now.  Fingers crossed...this has been a real doozy.</p>