开场白:
插件一直是浏览器的重要组成部分,丰富浏览器的运行能力,实现一些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
前端代码参考:
查看代码
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);
Pepper MediaStream Video API Example
This example demonstrates receiving frames from a video MediaStreamTrack and
rendering them in a plugin.
Left side shows YUV frames. Right side shows BGRA frames.