PPAPI插件
开场白：
插件一直是浏览器的重要组成部分，丰富浏览器的运行能力，实现一些HTML+JS实现不了本地应用（比如音视频、文件操作等）。早期广为熟知的是IE下的插件ActiveX，这是一项熟悉可能暴露年龄的技术，它基于COM规范，在IE占浏览器市场主流份额的时代，ActiveX可谓出尽了风头，但它并不是浏览器业内的插件标准。由网景发布的NPAPI长久以来是除了IE之外的其他浏览器共同支持的业内标准。ActiveX和NPAPI长久共存，如果某项业务要发布浏览器插件，一般都需要实现这两种插件规范。有个开源的插件开发框架FireBreath 抽象了这两种插件的接口细节，让开发者专注于业务逻辑。早期的银行开发网页安全控件都是使用ActiveX开发，所以他们都要求在IE浏览器或者其他双核浏览器的兼容模式下登录。现在很多银行已经支持NPAPI版本的安全控件，但NPAPI却做为不安全因素被主流浏览器（Chrome、FireFox）抛弃，好在国内的双核浏览器都保留有NPAPI功能的移植，让市面上大量的NPAPI插件得以正常运行。现在，随着IE逐渐退出历史舞台，ActiveX插件的运行范围越来越窄，NPAPI也成为过时的插件标准，虽然HTML5标准也在逐渐完善，很多之前只靠Web技术做不到的功能都能得到很好的支持，但是并不是所有的功能都能通过HTML5实现，本地插件依然是我们这个时代绕不开的功能应用，最典型的比如Flash。于是Chrome提出了名叫PPAPI的全新插件机制，运行在Chrome浏览器的沙箱环境。
基本概念参考：
https://code.google.com/archive/p/ppapi/wikis
常用模型参考：
实战参考：
https://sites.google.com/a/chromium.org/dev/developers/design-documents/pepper-plugin-implementation
前端代码参考：
查看代码
<!DOCTYPE html>
<html>
<head>
<title>Media Stream Video Example</title>
<script type="text/javascript">
var plugin;
var stream;
function handleMessage(message) {
console.log(message);
}
function success(s) {
stream = s;
plugin.postMessage({command: 'init', track: stream.getVideoTracks()[0]});
}
function failure(e) {
console.log(e);
}
function initialize() {
plugin = document.getElementById('plugin');
plugin.addEventListener('message', handleMessage, false);
var constraints = {
audio: false,
video: {
mandatory: {
minWidth: 640,
minHeight: 320,
minFrameRate: 30
},
optional: []
}
};
navigator.webkitGetUserMedia(constraints, success, failure);
}
function changeFormat(format) {
plugin.postMessage({command:'format', format: format});
}
function changeSize(width, height) {
plugin.postMessage({command:'size', width: width, height: height});
}
document.addEventListener('DOMContentLoaded', initialize, false);
</script>
</head>
<body>
<h1>Pepper MediaStream Video API Example</h1><br>
This example demonstrates receiving frames from a video MediaStreamTrack and
rendering them in a plugin.<br>
Left side shows YUV frames. Right side shows BGRA frames.
<embed id="plugin" type="application/x-ppapi-vkcanvas"
width="640" height="240"/>
<h2>Format:</h2><br>
<button onclick="changeFormat('YV12')" >YV12</button>
<button onclick="changeFormat('I420')" >I420</button>
<button onclick="changeFormat('BGRA')" >BGRA</button>
<button onclick="changeFormat('DEFAULT')" >DEFAULT</button>
<h2>Size:</h2><br>
<button onclick="changeSize(72, 72)" >72 x 72</button>
<button onclick="changeSize(640, 360)" >640 x 360</button>
<button onclick="changeSize(1280, 720)" >1280 x 720</button>
<button onclick="changeSize(0, 0)" >DEFAULT</button>
</body>
</html>
