title: iPhone doesn't support inline video - Is it possible to strip frames and audio from an uploaded video file with JS?
body: <h1>Tl;Dr</h1>
  
  <p><strong>Is it possible with JS to strip individual frames and audio data of an uploaded video for streaming to a custom canvas / audio player?</strong> Why or why not?</p>
  
  <p>I haven't tried reading raw file data / manipulating it with JavaScript but I wouldn't be surprised if it were possible. I'll explain my reason for going to this extreme / the workarounds that I've already tried. </p>
  
  <hr>
  
  <h1>Explanation</h1>
  
  <p>To my dismay, while building a video streaming application which must overlay elements onto the video, I discovered a problem with supporting the iPhone. I'll explain the topic and then explain my question about non traditional weird possible workaround to this problem. </p>
  
  <p>As some of you may already know, Apple has decided to make it impossible for HTML5 video to be played without the video going fullscreen on the iPhone, nor does iPhone support Flash. </p>
  
  <p>There are already some questions about it on SO:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android">Can I avoid the native fullscreen video player with HTML5 on iPhone or android?</a></li>
  <li><a href="https://stackoverflow.com/questions/8572306/why-does-apple-devices-play-html5-videos-in-its-own-player?lq=1">Why does apple devices play html5 videos in its own player?</a></li>
  </ul>
  
  <p>I've even developed a Canvas player which hides the HTML5 video player and renders it on HTML5 Canvas, but to my <strong>further</strong> dismay <a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html" rel="nofollow noreferrer">Apple has also decided to make this impossible.</a> </p>
  
  <p><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html" rel="nofollow noreferrer">Apple says:</a></p>
  
  <blockquote>
    <p>Note: Video as a source for the canvas drawImage() method is not
    currently supported on iOS. Using video as a source for drawImage()
    involves a lot of system resources. Generally speaking, video is best
    displayed using the video element, not the canvas element. To
    composite canvas text or animations over moving video, it’s better to
    use a video element behind the canvas—the video shows through the
    transparent background of the canvas without the overhead of
    displaying video on the canvas itself.</p>
    
    <p>On iOS-based devices with small screens—such as iPhone and iPod
    touch—video always plays in fullscreen mode, so the canvas cannot be
    superimposed on playing video. On iOS-based devices with larger
    screens, such as iPad, you can superimpose canvas graphics on playing
    video, just as you can on the desktop.</p>
    
    <p>Use video as an image source for the canvas only when you need to
    access the pixel data of a video. Video on canvas is useful for things
    such as realtime image processing—green screen effects, extracting the
    average color value from a video frame, capturing a series of stills
    from a video—or special effects such as putting segments of a moving
    video image on tiles and moving them independently.</p>
  </blockquote>
  
  <p>To which I respond, "YES <em>obviously</em> video is best displayed in the video element, but you've broken iPhone's support for the W3C specs of HTML5 video and made it impossible for creative video applications to support one of the most popular mobile devices on Earth!" <em>- rant out of the way -</em> </p>
  
  <p>So. My next step is to display a screen to iPhone users explaining that our application doesn't work on iPhone, "because Apple doesn't think W3C standards apply to iPhones" BUT first I want to explore one more possibility. </p>
  
  <p>Is it in any way possible to strip individual frames and audio data of an uploaded video for streaming? ( I have the use of WebRTC in mind)</p>
  
  <p>If so, it seems to me that the raw audio and frame data can be streamed / played fairly easily in Canvas without needing to use the HTML5 video player as a source. </p>