blob: f3b64821ea38a5b4e7eedca8cc21c6b7c974f048 [file] [log] [blame]
{{+bindTo:partials.standard_nacl_article}}
<section id="webassembly-migration-guide">
<span id="migration"></span><h1 id="webassembly-migration-guide"><span id="migration"></span>WebAssembly Migration Guide</h1>
<h2 id="p-nacl-deprecation-announcements">(P)NaCl Deprecation Announcements</h2>
<p>Given the momentum of cross-browser WebAssembly support, we plan to focus our
native code efforts on WebAssembly going forward and plan to remove support for
PNaCl in Q4 2019 (except for Chrome Apps). We believe that the vibrant
ecosystem around <a class="reference external" href="http://webassembly.org">WebAssembly</a>
makes it a better fit for new and existing high-performance
web apps and that usage of PNaCl is sufficiently low to warrant deprecation.</p>
<p>As of Chrome 76, PNaCl on the open web has been moved behind an
<a class="reference external" href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md">Origin Trial</a>,
which is a mechanism for web developers to register and get access to a feature that isn&#8217;t on by default.
This is usually a new proposed feature but in this case it&#8217;s a feature being deprecated.
A developer can register on the <a class="reference external" href="https://developers.chrome.com/origintrials/#/view_trial/3553340105995321345">Origin Trial Console</a>
and receive a token, which can be embedded into a page and will enable the feature without the user needing to use a flag.
(For more details see the linked guide). The trial is scheduled to last through Chrome 78, approximately until December 2019.
This change is not intended to affect NaCl or PNaCl in Chrome Apps or extensions, and the &#8220;enable-nacl&#8221;
flag in chrome://flags can also be used to enable PNaCl locally for testing
(this flag also retains its current function of enabling non-PNaCl &#8220;native&#8221; NaCl on any page).</p>
<p>We also recently announced the deprecation Q1 2018 of
<a class="reference external" href="https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html">Chrome Apps</a>
outside of Chrome OS.</p>
<h2 id="toolchain-migration">Toolchain Migration</h2>
<p>For the majority of (P)NaCl uses cases we recommend transitioning
from the NaCl SDK to <a class="reference external" href="http://webassembly.org/getting-started/developers-guide/">Emscripten</a>.
Migration is likely to be reasonably straightforward
if your application is portable to Linux, uses
<a class="reference external" href="https://www.libsdl.org/">SDL</a>, or POSIX APIs.
While direct support for NaCl / Pepper APIs in not available,
we&#8217;ve attempted to list Web API equivalents.
For more challenging porting cases, please reach out on
<a class="reference external" href="mailto:native-client-discuss&#37;&#52;&#48;googlegroups&#46;com">native-client-discuss<span>&#64;</span>googlegroups<span>&#46;</span>com</a></p>
<h2 id="api-migration">API Migration</h2>
<p>We&#8217;ve outlined here the status of Web Platform substitutes for each
of the APIs exposed to (P)NaCl.
Additionally, the table lists the library or option in Emscripten
that offers the closest substitute.</p>
<p>We expect to add shared memory threads support to WebAssembly in 2017,
as threads are crucial to matching (P)NaCl&#8217;s most interesting use
cases. Migration items which assume forthcoming threads support
are marked below. If your application&#8217;s flow control relies heavily on blocking
APIs, you may also find threads support is required for convenient porting.</p>
<p>While we&#8217;ve tried to be accurate in this table,
there are no doubt errors or omissions.
If you encounter one, please reach out to us on
<a class="reference external" href="mailto:native-client-discuss&#37;&#52;&#48;googlegroups&#46;com">native-client-discuss<span>&#64;</span>googlegroups<span>&#46;</span>com</a></p>
<h2 id="ppapi">PPAPI</h2>
<table>
</table>
<h3>PPB_Audio</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">x </td>
<td style="font-size: 11px; padding: 5px;">SDL (partial) </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - AudioWorkletNode ROUGHLY equivalent</td>
<td style="font-size: 11px; padding: 5px;">The AudioWorkletSpec is done, but AudioDeviceClient may be a better fit for this API. The AudioDeviceClient is still being specified by the community. The worklet may not be the rough equivalent for this API. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetCurrentConfig </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioContext.* (gets back settings passed in) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">StartPlayback </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBufferSourceNode.start </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">StopPlayback </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBufferSourceNode.stop </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_AudioBuffer</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTimestamp </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBufferSourceNode.start (parameter) </td>
<td style="font-size: 11px; padding: 5px;">Passed in each time instead of attached to the buffer. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetTimestamp </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBufferSourceNode.start (parameter) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSampleRate </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBuffer.sampleRate </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSampleSize </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - WebAudio only uses 32-bit float, PPAPI does 16-bit int.</td>
<td style="font-size: 11px; padding: 5px;">PPAPI theoretically supports multiple sampling sizes. In practice, it only supports 16-bit samples. Unfortunately, developers have requested 16-bit sample sizes to save on memory use. The next version of the Web Audio spec will implement support for 16-bit samples. An optimization for AudioBuffer could be implemented similar to Firefox by using 16-bit buffer for audio that comes from decodeAudioData </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetNumberOfChannels </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBuffer.numberOfChannels </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetDataBuffer </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBuffer.getChannelData </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetBufferSize </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBuffer.length </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_AudioConfig</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">CreateStereo16Bit </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - Only 32-bit float samples supported</td>
<td style="font-size: 11px; padding: 5px;">The next version of the Web Audio spec will implement support for 16-bit samples. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSampleRate </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioContext.sampleRate </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSampleFrameCount </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioBuffer.length </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RecommendSampleRate </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">AudioContext.sampleRate (from default construct) </td>
<td style="font-size: 11px; padding: 5px;">An AudioContext will have the preferred sampling rate that matchs the actual sample rate of the hardware audio device by default. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RecommendSampleFrameCount </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - Would be handled with the planned AudioDeviceClient</td>
<td style="font-size: 11px; padding: 5px;">There is an open issue to allow a user-specified size, but that is still being defined. This is probably best handled with AudioDeviceClient which can tell you what the appropriate size would be for the given hardware. </td>
</tr>
</table>
<h3>PPB_Console</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Log </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">utime </td>
<td style="font-size: 11px; padding: 5px;">console.log/warn/error/... </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">LogWithSource </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">The Console API is regarded as a sufficiently complete replacement, unless there are specific use cases raised by developers for the functionality provided by LogWithSource. DevTools Source Maps can be used to debug transpiled JavaScript in their original source language. </td>
</tr>
</table>
<h3>PPB_Core</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">getTime </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">utime </td>
<td style="font-size: 11px; padding: 5px;">new Date().getTime() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">getTimeTicks </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">utime </td>
<td style="font-size: 11px; padding: 5px;">new Date().getTime() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">IsMainThread </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">window.document !== undefined </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">CallOnMainThread </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">Worker.postMessage + Atomics.wait </td>
<td style="font-size: 11px; padding: 5px;">Equivalent synchronization can be built. </td>
</tr>
</table>
<h3>PPB_FileIO</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">window.chooseFileSystemEntries() </td>
<td style="font-size: 11px; padding: 5px;">Create and open are used differently, but the pieces are of equal power. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Open </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">window.chooseFileSystemEntries() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Query </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">Blob.size, FileSystemHandle.getFile(), FileSystemHandle.getDirectory(), File.lastModified </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - Blob.type can also be used to check the MIME type. The file system type, creation time, and last access time can not be determined with the Native File System API.</td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Touch </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemDirectoryHandle.getFile("name", {create: true}) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Read </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">Blob.slice().arrayBuffer() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Write </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemWriter.write() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetLength </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemWriter.truncate() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Flush </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial)</td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - Files are flushed when FileSystemWrite.close() is called</td>
<td style="font-size: 11px; padding: 5px;">This is intended by design because the Native File System API files are exposed to the OS, therefore a Safe Browsing check needs to be performed before data is shown to the OS. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Close </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemWriter.close() </td>
<td style="font-size: 11px; padding: 5px;">Does not cancel pending operations, but flushes any data written so far to disk. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">ReadToArray </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">Blob.slice().arrayBuffer() or Blob.arrayBuffer() </td>
<td style="font-size: 11px; padding: 5px;">Allows multiple subrange reads in parallel. </td>
</tr>
</table>
<h3>PPB_FileRef</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemDirectoryHandle.getFile("name", {create: true}) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetFileSystemType </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystem.type </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetName </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">File.name </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetPath </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - With the Native File System API, the relative path of a file can be determined from reference to a directory that contains the file using FileSystemHandle.resolve(FileSystemHandle)</td>
<td style="font-size: 11px; padding: 5px;">The absolute path of a file cannot be determined, and the user has to grant permission to access the directory containing the file. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetParent </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - With the Native File System API, the relative path of a file can be determined from reference to a directory that contains the file using FileSystemHandle.resolve(FileSystemHandle)</td>
<td style="font-size: 11px; padding: 5px;">The user has to grant permission to access the directory containing the file. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">MakeDirectory </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemHandle.getDirectory(..., {createIfNotExists: true}) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Touch </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemDirectoryHandle.getFile("name", {create: true}) </td>
<td style="font-size: 11px; padding: 5px;">Modify time can be bumped by writing. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Delete </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemDirectoryHandle.removeEntry() </td>
<td style="font-size: 11px; padding: 5px;">Unlike the PPAPI, directories do not have to be empty. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Rename </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - With the Native File System API, the file can be written with the new name using a combination of FileSystemFileHandle.getFile() for the new name and FileSystemFileHandle.createWriter().write() with the contents of the old file. Then FileSystemDirectoryHandle.removeEntry() to delete the old file.</td>
<td style="font-size: 11px; padding: 5px;">There is not a direct API that will do this in one step in the Native File System API. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Query </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial)</td>
<td style="font-size: 11px; padding: 5px;">Blob.size, FileSystemHandle.getFile(), FileSystemHandle.getDirectory(), File.lastModified </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - Blob.type can also be used to check the MIME type. The file system type, creation time, and last access time can not be determined with the Native File System API.</td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">ReadDirectoryEntries </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">FileSystemDirectoryHandle.getEntries() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_FileSystem</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">FS (partial) </td>
<td style="font-size: 11px; padding: 5px;">window.requestFileSystem </td>
<td style="font-size: 11px; padding: 5px;">JS API does both in one step </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Open </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">window.requestFileSystem </td>
<td style="font-size: 11px; padding: 5px;">JS API does both in one step </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetType </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">FileSystem.type </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_Fullscreen</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">IsFullScreen </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">html5.h </td>
<td style="font-size: 11px; padding: 5px;">Document.fullscreenEnabled </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetFullscreen </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">html5.h </td>
<td style="font-size: 11px; padding: 5px;">Document.requestFullscreen </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetScreenSize </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">html5.h </td>
<td style="font-size: 11px; padding: 5px;">Document.exitFullscreen </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_Gamepad</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Sample </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Gamepad.* </td>
<td style="font-size: 11px; padding: 5px;">The Gamepad object exposes a timestamp relative to navigationStart. It is updated when data is received from the hardware https://www.w3.org/TR/gamepad/#gamepad-interface </td>
</tr>
</table>
<h3>PPB_Graphics2D</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Canvas.getContext('2d') </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Describe </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Canvas.clientWidth + Canvas.clientHeight </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PaintImageData </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2D.putImageData </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Scroll </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2D.scrollIntoView, CanvasRenderingContext2D.drawImage </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - Can be implemented by drawing the canvas onto itself, with an offset, using drawImage, and then filling in the rest.</td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">ReplaceContents </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2D.drawImage </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Flush </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">No direct equivalent </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) -
There is always an implicit flush at the end of draw code; this is unlikely
to change. However, the combination of
<a href="https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface">
OffscreenCanvas
</a> and
<a href="https://html.spec.whatwg.org/multipage/canvas.html#the-imagebitmap-rendering-context">
ImageBitmapRenderingContext
</a>provide similar functionality.</td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetScale </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2D.scale </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetScale </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2D.currentTransform </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetLayerTransform </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2D.setTransform
CanvasRenderingContext2D.scale
CanvasRenderingContext2D.translate </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_Graphics3D</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetAttribMaxValue </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">OpenGL ES 3.0 </td>
<td style="font-size: 11px; padding: 5px;">WebGL 2.0 </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - WebGL 2.0 and Emscripten's exposure of OpenGL ES 3.0 support user-defined multisampled framebuffers, in which all of the parameters configurable via PPAPI can be set.</td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Canvas.getContext </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetAttribs </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">WebGLRenderingContext.getContextAttributes </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetAttribs </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Canvas.getContext(.., OPTIONS) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetError </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">WebGLRenderingContext.getError </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">ResizeBuffers </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Canvas.width = w; Canvas.height = h; </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SwapBuffers </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">No direct equivalent </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) -
There is always an implicit flush at the end of draw code; this is unlikely
to change. However, the combination of
<a href="https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface">
OffscreenCanvas
</a> and
<a href="https://html.spec.whatwg.org/multipage/canvas.html#the-imagebitmap-rendering-context">
ImageBitmapRenderingContext
</a> provide similar functionality.</td>
</tr>
</table>
<h3>PPB_ImageData</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetNativeImageDataFormat </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">ImageData mandates RGBA order </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">IsImageDataFormatSupported </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">ImageData mandates RGBA order </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">CanvasRenderingContext2d.createImageData </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Describe </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">ImageData never has a stride </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Map </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">ImageData.data </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Unmap </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">ImageData.data </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_InputEvent</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RequestInputEvents </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">No direct equivalent </td>
<td style="font-size: 11px; padding: 5px;">The lack of this feature is probably less relevant as JS / Wasm runs on the main thread and can more cheaply filter events without incurring a cross process round-trip. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RequestFilteringInputEvents </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">mouse* key* wheel* touch* composition* Events </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Element.addEventListener </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">ClearInputEventRequest </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Element.removeEventListener </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetType </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Event class descendants </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTimeStamp </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Event.timeStamp </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetModifiers </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">*Event.altKey/shiftKey/metaKey/ctrlKey </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_MouseInputEvent</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">MouseEvent </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetButton </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">MouseEvent.button </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetPosition </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">MouseEvent.client*/page*/offset* </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetClickCount </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">dblclick' vs 'mousedown' Events </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetMovement </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">MouseEvent.movement* </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_WheelInputEvent</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">WheelEvent </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetDelta </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">WheelEvent.delta* </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTicks </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - deltaMode kind of contains this info, but incompletely.</td>
<td style="font-size: 11px; padding: 5px;">There is discussion on implementing a WheelEvent.deltaMode API: https://github.com/w3c/uievents/issues/181#issuecomment-537811017 </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetScrollByPage </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - deltaMode kind of contains this info, but incompletely.</td>
<td style="font-size: 11px; padding: 5px;">There is discussion on implementing a WheelEvent.deltaMode API: https://github.com/w3c/uievents/issues/181#issuecomment-537811017 </td>
</tr>
</table>
<h3>PPB_KeyboardInputEvent</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">KeyboardEvent </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetKeyCode </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">KeyboardEvent.keyCode </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetCharacterText </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">KeyboardEvent.key </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetCode </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">KeyboardEvent.code </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_TouchInputEvent</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">TouchEvent </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">AddTouchPoint </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">TouchEvent.touches.push </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTouchCount </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">TouchEvent.touches.length </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTouchByIndex </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">TouchEvent.touches[i] </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTouchById </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Touch.indentifer (to figure this out yourself) </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_IMEInputEvent</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">CompositionEvent </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetText </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">CompositionEvent.data </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSegmentNumber </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No direct equivalent</td>
<td style="font-size: 11px; padding: 5px;">This data can potentially be retrieved from CompositionEvent.data. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSegmentOffset </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No direct equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetTargetSegment </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No direct equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetSelection </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No direct equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_Instance</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">BindGraphics </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Canvas.getContext (moot as binding is automatic). </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">IsFullFrame </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent to mime type handlers.</td>
<td style="font-size: 11px; padding: 5px;">NaCl apps can be registered to handle a particular mime type and own the whole document. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">DidCreate </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">&lt;Element&gt;[key] </td>
<td style="font-size: 11px; padding: 5px;">General DOM access lets you fish out tag attributes </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">DidDestroy </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Not triggered for NaCl </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">DidChangeView </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Element 'resize' Event </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">DidChangeFocus </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Element 'focus', 'focusin', 'focusout' Events </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">HandleDocumentLoad </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No way to register as a mime type handler</td>
<td style="font-size: 11px; padding: 5px;">NaCl modules via apps + a manifest entry can be set up to handle particular mime types. </td>
</tr>
</table>
<h3>PPB_MediaStreamAudioTrack</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Configure </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">getUserMedia() </td>
<td style="font-size: 11px; padding: 5px;">The constraints from getUserMedia() can provide the configuration values to use in MediaStreamTrack. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetAttrib </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.getSettings() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetId </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.id </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">HasEnded </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.readyState </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetBuffer </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RecycleBuffer </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Close </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.stop() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_MediaStreamVideoTrack</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">Canvas Capture </td>
<td style="font-size: 11px; padding: 5px;">Canvas Capture provides the ability to introduce video frames programatically. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Configure </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">applyConstraints(), getUserMedia() </td>
<td bgcolor="#ffeecc" style="font-size: 11px; padding: 5px;">GAP (partial) - The extent of configurations available in the Web API may differ from the PPAPI.</td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetAttrib </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamSettings.width </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamSettings.height </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - no equivalent to PP_MEDIASTREAMVIDEOTRACK_ATTRIB_BUFFERED_FRAMES</td>
<td style="font-size: 11px; padding: 5px;">MediaStream cannot be preloaded, so it will never buffer: https://www.w3.org/TR/mediacapture-streams/#mediastreams-in-media-elements </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - no equivalent to PP_MEDIASTREAMVIDEOTRACK_ATTRIB_FORMAT</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetId </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.id </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">HasEnded </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.readyState </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetFrame </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RecycleFrame </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Close </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">MediaStreamTrack.stop() </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetEmptyFrame </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PutFrame </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_MessageLoop</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetForMainThread </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetCurrent </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">AttachToCurrentThread </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Run </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PostWork </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PostQuit </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Mostly moot, workers get an implicit event loop. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_Messaging</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PostMessage </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Window.postMessage </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">RegisterMessageHandler </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Window.addEventListener </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">UnregisterMessageHandler </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">N/A </td>
<td style="font-size: 11px; padding: 5px;">Window.removeEventListener </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_MouseCursor</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetCursor </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Element.style.cursor </td>
<td style="font-size: 11px; padding: 5px;">Same set of stock cursors are supported.
Custom cursors can be done with url(..).
Dynamic custom cursors can be done with data URIs.
CSS3 supports specifying the hotspot. </td>
</tr>
</table>
<h3>PPB_MouseLock</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">LockMouse </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Element.requestPointerLock </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">UnlockMouse </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">SDL </td>
<td style="font-size: 11px; padding: 5px;">Element.exitPointerLock </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_OpenGLES2</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Several Methods </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">OpenGLES </td>
<td style="font-size: 11px; padding: 5px;">Close to WebGL 1.0 in functionality. </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">x </td>
<td style="font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">OffscreenCanvas </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
</table>
<h3>PPB_TextInputController</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">SetTextInputType </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - Potentially filled by Input Method Editor API</td>
<td style="font-size: 11px; padding: 5px;">Some developers would like to either be able to hint in this fashion, or preferrably the ability to intercept and display IME events / output inline inside a canvas. </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">UpdateCaretPosition </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - Potentially filled by Input Method Editor API</td>
<td style="font-size: 11px; padding: 5px;">https://www.w3.org/TR/ime-api/ </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">CancelCompositionText </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - Potentially filled by Input Method Editor API</td>
<td style="font-size: 11px; padding: 5px;">https://www.w3.org/TR/ime-api/ </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">UpdateSurroundingText </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - Potentially filled by Input Method Editor API</td>
<td style="font-size: 11px; padding: 5px;">https://www.w3.org/TR/ime-api/ </td>
</tr>
</table>
<h3>PPB_URLLoader</h3>
<table>
<tr bgcolor="#77ccff" style="color:white; font-weight: bold;">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">PPAPI Method </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;">Assumes Threads </td>
<td style="font-size: 11px; padding: 5px;">Emscripten </td>
<td style="font-size: 11px; padding: 5px;">Web API </td>
<td style="font-size: 11px; padding: 5px;">Limitations </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Create </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">embind </td>
<td style="font-size: 11px; padding: 5px;">new XMLHttpRequest(); </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">Open </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">embind </td>
<td style="font-size: 11px; padding: 5px;">XMLHttpRequest.open </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">FollowRedirect </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">embind </td>
<td style="font-size: 11px; padding: 5px;">Request.redirect </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP - No XMLHTTPRequest equivalent</td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;">GetUploadProgress </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td style="font-size: 11px; padding: 5px;">embind </td>
<td style="font-size: 11px; padding: 5px;">XMLHttpRequest 'progress' Event </td>
<td style="font-size: 11px; padding: 5px;"> </td>
</tr>
<tr bgcolor="#fcfcfc">
<td style="font-weight: bold; font-size: 11px; padding: 5px;"> </td>
<td style="width: 50px; text-align: center; font-size: 11px; padding: 5px;"> </td>
<td bgcolor="#ffcccc" style="font-size: 11px; padding: 5px;">GAP</td>
<td style="font-size: 11px; padding: 5px;">FetchObserver </td>
<td style="font-size: 11px; padding: 5px;">Not s