企业官网建设流程全解析

简介：在Web开发中，实现视频流处理与设备控制是常见的需求，尤其在安防监控、物联网等领域。其核心原理在于利用现代浏览器技术，如Media Source Extensions (MSE) 和 WebSocket，将设备端的音视频流（如RTSP）转换为浏览器可直接播放的格式（如HTTP-FLV）。这项技术的价值在于摆脱了对ActiveX、NPAPI等过时插件的依赖，实现了跨平台、高兼容性的纯前端解决方案。典型的应用场景包括构建安防监控后台、智慧园区管理系统或集成实时视频功能到企业Web应用中。本文聚焦于海康威视摄像头，通过其官方WebVideoCtrl.js库，结合Node.js代理服务，详细拆解了如何实现无插件的视频预览、抓图、本地录像及云台控制（PTZ），并提供了完整的代码示例和关键问题排查指南，为开发者提供了一条清晰、可落地的实践路径。

1. 项目概述：一个真正能用的Web端海康摄像头控制台

如果你正在搜索“Web页面调用海康摄像头”，大概率已经踩过不少坑了。官方的Web开发包（Web3.0/4.0）文档晦涩，示例代码跑不起来，云台控制更是玄学。网上的demo要么功能残缺，要么依赖一堆过时的ActiveX控件，在Chrome、Edge这些现代浏览器里根本没法用。更别提那些“预览失败”、“插件未安装”的报错了。

我花了相当长的时间，把海康威视的Web SDK、设备网络SDK翻了个底朝天，结合最新的浏览器技术，终于捣鼓出了一个真正能在生产环境跑的Demo。这个Demo的核心目标很明确：在一个纯粹的HTML5页面上，实现海康摄像头的视频预览、手动抓图、本地录像，并且最关键的是——完美支持云台控制（PTZ）。整个过程不依赖任何需要手动安装的浏览器插件，利用的是海康官方提供的WebVideoCtrl.js库和WebSocket等现代Web技术。

无论你是想做一个安防监控后台，还是集成摄像头功能到自己的Web应用里，这个拆解都能给你一条清晰的路径。下面，我就把从环境准备、核心原理到代码实现的每一步，连同我踩过的那些“坑”，毫无保留地分享出来。

2. 核心思路与技术选型：为什么是这些技术栈？

在开始写代码之前，搞清楚技术路线至关重要。海康威视为Web端提供了好几套方案，选错了后面全是坑。

2.1 海康Web方案的演进与选择

海康早期的Web方案严重依赖ActiveX控件和NPAPI插件（比如WebComponentsKit.exe）。这套方案需要用户手动下载安装，并且只兼容老版本的IE浏览器。在Chrome 45版本之后，NPAPI被默认禁用，这条路基本就断了。现在你去官网下载的SDK包里，可能还会看到这些，但请直接忽略。

目前主流的、面向现代浏览器的方案是海康威视网络摄像机Web开发包（通常叫Web3.0或Web无插件开发包）。它的核心是一个叫做WebVideoCtrl.js的JavaScript库。这个库的工作原理是：

1. 视频预览：通过浏览器原生支持的MSE（Media Source Extensions）或WebSocket，从摄像头的流媒体服务（通常是RTSP流）获取视频数据，然后转封装成浏览器能播放的格式（如HTTP-FLV、WebSocket-FLV、HLS）。
2. 云台控制：通过向摄像头发送标准的HTTP API请求（GET/POST）来实现PTZ指令的下发。
3. 抓拍与录像：抓拍是客户端行为，直接从视频Canvas元素获取图像数据；录像则可以利用浏览器的MediaRecorderAPI对视频流进行录制并保存到本地。

注意：WebVideoCtrl.js本身不直接解码H.264/H.265码流，这个解码工作是由浏览器或操作系统底层完成的。库的作用是管理流协议、建立连接、渲染视频帧和控制指令的发送。

2.2 为什么不用GB28181/RTMP直接推流？

这是一个常见问题。GB28181是国标协议，更适用于大规模平台级联。对于单点摄像头Web预览，直接调用设备SDK比通过GB28181平台再拉流要简单、延迟更低。RTMP则需要摄像头支持或通过服务器转码，增加了复杂度。本方案直接与摄像头对话，是最直接高效的方式。

2.3 我们的技术栈清单

基于以上分析，我们确定以下核心技术组件：

• 核心库：海康威视WebVideoCtrl.js(从官网SDK获取最新版)
• 视频协议：优先采用HTTP-FLV或WebSocket-FLV，兼容性最好。HLS延迟稍高，作为备选。
• 控制协议：摄像头内置的HTTP API（云台控制、设备信息获取）。
• 前端：纯HTML + JavaScript，可轻松集成到Vue、React等任何前端框架中。
• 关键补充：由于浏览器安全策略（CORS），直接从前端页面访问摄像头IP可能会遇到跨域问题。因此，你需要一个后端服务作为代理。这个代理的作用很简单：转发前端请求到摄像头。可以用任何你熟悉的后端语言实现（Node.js, Python Flask, Java Spring Boot等），代码量很少。

3. 环境准备与SDK获取

磨刀不误砍柴工，先把工具和材料备齐。

3.1 获取官方开发资源

1. 访问海康威视开放平台：搜索“海康威视开放平台”，注册并登录开发者账号。
2. 下载SDK：在资源中心，找到“设备网络SDK”和“网络摄像机Web开发包”进行下载。请务必下载最新版本，老版本可能无法适配新型号摄像头或存在已知问题。
3. 解压并找到关键文件：在“网络摄像机Web开发包”中，你会找到WebVideoCtrl.js这个核心文件。同时，仔细阅读其中的开发指南.pdf，里面包含了API的详细说明，虽然写得有点绕，但是必备参考。

3.2 摄像头基础配置

在写代码之前，确保你的摄像头已经正确接入网络，并完成以下配置（通过摄像头Web管理页面访问，通常地址是http://摄像头IP）：

• 启用并设置管理员密码：新摄像头需要激活并设置强密码。
• 配置网络参数：确保摄像头IP与你的开发电脑在同一局域网段。
• 开启相关服务：
  • RTSP服务：确保已开启。记住RTSP端口号（默认554）。
  • HTTP API服务：确保已开启。记住HTTP端口号（默认80）。
  • ONVIF协议（可选）：如果开启，可以用于设备发现，但本项目主要用HTTP API。
• 获取通道信息：记录下摄像头的IP地址、HTTP端口、用户名、密码。对于多通道设备（如NVR），还需要知道通道号（通常是1开始）。

3.3 搭建简易后端代理（以Node.js为例）

如前所述，为了解决跨域和直接前端访问摄像头IP的安全限制，我们需要一个简单的后端代理。这里用Node.js + Express快速搭建一个。

# 在你的项目目录下 mkdir backend && cd backend npm init -y npm install express express-http-proxy cors

创建一个server.js文件：

const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const cors = require('cors'); const app = express(); const PORT = 3001; // 后端服务端口 // 启用CORS，允许前端页面访问 app.use(cors()); // 静态文件托管（可选，用于存放前端页面） app.use(express.static('public')); // 关键：创建代理中间件，将所有以 `/hikvision` 开头的请求转发到摄像头 const cameraProxy = createProxyMiddleware({ target: 'http://192.168.1.100', // 替换为你的摄像头IP changeOrigin: true, pathRewrite: { '^/hikvision': '/', // 重写路径，移除 `/hikvision` 前缀 }, onProxyReq: (proxyReq, req, res) => { // 可选：添加摄像头认证信息（如果摄像头需要Digest认证，这里处理较复杂，通常SDK会处理） // proxyReq.setHeader('Authorization', 'Basic ' + Buffer.from('admin:your_password').toString('base64')); }, }); // 将 /hikvision/* 的请求交给代理处理 app.use('/hikvision', cameraProxy); // 一个简单的测试接口 app.get('/api/test', (req, res) => { res.json({ message: 'Proxy server is running.' }); }); app.listen(PORT, () => { console.log(`Camera proxy server running at http://localhost:${PORT}`); });

运行node server.js，你的代理服务就启动了。现在，前端访问http://localhost:3001/hikvision/ISAPI/...就等于访问http://摄像头IP/ISAPI/...。

实操心得：在生产环境中，你需要在代理层添加更严格的安全控制，比如请求验证、频率限制、日志记录等。这里仅为开发演示。如果摄像头IP是HTTPS，代理配置也需要相应调整。

4. 前端页面核心功能实现

现在进入核心部分，我们将一步步构建前端页面 (index.html)。

4.1 页面骨架与库引入

创建一个基本的HTML文件，引入海康的JS库和必要的样式。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>海康摄像头Web控制Demo</title> <style> body { font-family: sans-serif; margin: 20px; } #videoContainer { width: 800px; height: 450px; border: 1px solid #ccc; margin-bottom: 20px; } .control-panel { margin: 10px 0; padding: 10px; border: 1px solid #eee; } button { margin: 5px; padding: 8px 15px; } .ptz-control { display: grid; grid-template-columns: repeat(3, 60px); grid-gap: 5px; justify-content: center; } .ptz-control button { height: 60px; font-size: 20px; } #up { grid-column: 2; grid-row: 1; } #left { grid-column: 1; grid-row: 2; } #down { grid-column: 2; grid-row: 3; } #right { grid-column: 3; grid-row: 2; } #zoomIn, #zoomOut, #focusNear, #focusFar { width: 100px; } </style> <!-- 引入海康WebVideoCtrl库 --> <script src="lib/WebVideoCtrl.js"></script> </head> <body> <h1>海康摄像头Web控制台</h1> <div>摄像头状态: <span id="status">未初始化</span></div> <!-- 视频播放容器 --> <div id="videoContainer"></div> <div class="control-panel"> <h3>设备连接</h3> <input type="text" id="ip" placeholder="摄像头IP" value="192.168.1.100"> <input type="text" id="port" placeholder="端口" value="80"> <input type="text" id="username" placeholder="用户名" value="admin"> <input type="password" id="password" placeholder="密码"> <button onclick="login()">登录设备</button> <button onclick="startPreview()">开始预览</button> <button onclick="stopPreview()">停止预览</button> <button onclick="logout()">注销</button> </div> <div class="control-panel"> <h3>媒体控制</h3> <button onclick="capturePicture()">抓拍图片</button> <button onclick="startRecord()">开始本地录像</button> <button onclick="stopRecord()">停止录像</button> <div>录像状态: <span id="recordStatus">未开始</span></div> </div> <div class="control-panel"> <h3>云台控制 (PTZ)</h3> <div class="ptz-control"> <button id="up" onclick="ptzControl(0)">↑</button> <button id="left" onclick="ptzControl(2)">←</button> <button id="down" onclick="ptzControl(4)">↓</button> <button id="right" onclick="ptzControl(6)">→</button> </div> <div> <button id="zoomIn" onclick="ptzControl(11)">变倍+</button> <button id="zoomOut" onclick="ptzControl(12)">变倍-</button> <button id="focusNear" onclick="ptzControl(13)">聚焦+</button> <button id="focusFar" onclick="ptzControl(14)">聚焦-</button> </div> <div> 速度: <input type="range" id="ptzSpeed" min="1" max="10" value="5"> <span id="speedValue">5</span> <button onclick="stopPTZ()">停止云台</button> </div> </div> <script src="main.js"></script> <!-- 我们的主要逻辑代码 --> </body> </html>

4.2 JavaScript核心逻辑实现 (main.js)

这是整个Demo的大脑，我们按功能模块来写。

// main.js // 全局变量 let g_iWndIndex = 0; // 播放窗口索引 let g_oWebVideoCtrl = null; // WebVideoCtrl对象 let g_recordStream = null; // 用于录像的MediaRecorder对象 let g_recordedChunks = []; // 录像数据块 let g_deviceInfo = {}; // 设备登录后返回的信息 // 1. 初始化SDK function initPlugin() { // 检查库是否加载 if (typeof WebVideoCtrl === 'undefined') { document.getElementById('status').textContent = '错误：WebVideoCtrl.js 未加载！'; console.error('WebVideoCtrl.js not loaded. Check the script path.'); return false; } g_oWebVideoCtrl = new WebVideoCtrl.IWebVideoCtrl({ bWndFull: true, // 窗口是否支持全屏 iPackageSize: 2 * 1024, // 数据包大小 cbInitComplete: function() { document.getElementById('status').textContent = 'SDK初始化完成'; console.log('WebVideoCtrl SDK 初始化完成。'); // 初始化播放窗口 const oWndInfo = g_oWebVideoCtrl.initWindow(1, { iWidth: 800, iHeight: 450, container: document.getElementById('videoContainer') }); if (oWndInfo) { g_iWndIndex = oWndInfo.iIndex; console.log(`播放窗口初始化成功，索引: ${g_iWndIndex}`); } }, cbError: function (oError) { console.error('SDK错误:', oError); document.getElementById('status').textContent = 'SDK错误: ' + oError.ErrMsg; } }); // 设置代理服务器地址（我们之前搭建的Node.js代理） g_oWebVideoCtrl.setServerLoc(`http://localhost:3001/hikvision`); return true; } // 页面加载完成后初始化 window.onload = function() { if (initPlugin()) { console.log('初始化流程开始...'); } // 绑定PTZ速度滑块显示 document.getElementById('ptzSpeed').oninput = function() { document.getElementById('speedValue').textContent = this.value; }; }; // 2. 登录设备 function login() { const ip = document.getElementById('ip').value; const port = parseInt(document.getElementById('port').value); const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (!ip || !port || !username) { alert('请填写完整的设备信息！'); return; } document.getElementById('status').textContent = '正在登录...'; // 注意：这里登录的IP和端口是给SDK内部组包用的，实际请求会被我们的代理转发。 g_oWebVideoCtrl.login(ip, port, username, password, { success: function (xmlDoc) { console.log('登录成功:', xmlDoc); g_deviceInfo = { ip, port, username }; document.getElementById('status').textContent = '登录成功'; // 可以解析xmlDoc获取设备能力集，比如是否支持云台 alert('设备登录成功！'); }, error: function (status, statusText) { console.error('登录失败:', status, statusText); document.getElementById('status').textContent = `登录失败: ${statusText}`; alert(`登录失败: ${statusText}。请检查IP、端口、密码及网络连通性。`); } }); } // 3. 开始预览 function startPreview() { if (!g_deviceInfo.ip) { alert('请先登录设备！'); return; } const iChannelID = 1; // 通道号，默认1。对于NVR，需要指定正确的通道。 const iStreamType = 1; // 1-主码流（高清），2-子码流（流畅） const iLinkMode = 0; // 0-TCP，1-UDP，2-多播 const bZeroChannel = false; // 是否零通道预览 document.getElementById('status').textContent = '正在启动预览...'; g_oWebVideoCtrl.startPreview(g_deviceInfo.ip, g_deviceInfo.port, iChannelID, iStreamType, g_iWndIndex, iLinkMode, bZeroChannel, { success: function () { console.log('预览启动成功'); document.getElementById('status').textContent = '预览中...'; }, error: function (status, statusText) { console.error('预览启动失败:', status, statusText); document.getElementById('status').textContent = `预览失败: ${statusText}`; // 常见错误：端口不对、流地址错误、编码格式浏览器不支持。 // 可以尝试切换 iStreamType 或检查摄像头是否生成了对应的码流。 alert(`预览失败: ${statusText}。尝试切换主/子码流，或检查摄像头RTSP服务。`); } }); } // 4. 停止预览 function stopPreview() { g_oWebVideoCtrl.stopPreview(g_iWndIndex); document.getElementById('status').textContent = '预览已停止'; } // 5. 抓拍图片 function capturePicture() { const sFileName = `capture_${new Date().getTime()}.jpg`; // 参数：窗口索引，文件名，图片格式（0-JPEG，1-BMP），质量（1-100） const bSuccess = g_oWebVideoCtrl.capturePicture(g_iWndIndex, sFileName, 0, 90); if (bSuccess) { console.log(`抓拍指令已发送，图片将保存为: ${sFileName}`); alert(`抓拍成功！文件名为: ${sFileName}。请注意，保存位置取决于浏览器设置。`); } else { alert('抓拍失败，请确保正在预览视频。'); } } // 6. 开始本地录像 function startRecord() { // 首先获取播放窗口的视频元素（这是SDK内部创建的） const videoElement = document.querySelector(`#WndID_${g_iWndIndex} video`); if (!videoElement || !videoElement.srcObject) { alert('请先开始视频预览！'); return; } const stream = videoElement.srcObject; // 这是MediaStream对象 g_recordedChunks = []; // 使用 MediaRecorder API g_recordStream = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' }); g_recordStream.ondataavailable = function(event) { if (event.data.size > 0) { g_recordedChunks.push(event.data); } }; g_recordStream.onstop = function() { const blob = new Blob(g_recordedChunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `record_${new Date().getTime()}.webm`; a.click(); URL.revokeObjectURL(url); document.getElementById('recordStatus').textContent = '录像已保存'; }; g_recordStream.start(1000); // 每1秒收集一次数据 document.getElementById('recordStatus').textContent = '录像中...'; console.log('本地录像开始'); } // 7. 停止本地录像 function stopRecord() { if (g_recordStream && g_recordStream.state === 'recording') { g_recordStream.stop(); g_recordStream = null; document.getElementById('recordStatus').textContent = '正在生成文件...'; } } // 8. 云台控制 function ptzControl(iPTZCommand) { if (!g_deviceInfo.ip) { alert('请先登录设备！'); return; } const iSpeed = parseInt(document.getElementById('ptzSpeed').value); // iPTZCommand: 0-上，2-左，4-下，6-右，11-变倍+，12-变倍-，13-聚焦+，14-聚焦- 等等 // 参数：IP， 端口， 通道号， PTZ命令， 水平速度， 垂直速度， 变倍速度 // 对于方向控制，水平和垂直速度有效；对于变倍/聚焦，只有第三个速度参数有效。 let iHorSpeed = 0, iVerSpeed = 0, iZoomSpeed = 0; if (iPTZCommand <= 8) { // 方向控制 iHorSpeed = (iPTZCommand === 2 || iPTZCommand === 6) ? iSpeed : 0; iVerSpeed = (iPTZCommand === 0 || iPTZCommand === 4) ? iSpeed : 0; } else { // 变倍/聚焦控制 iZoomSpeed = iSpeed; } g_oWebVideoCtrl.ptzControl(g_deviceInfo.ip, g_deviceInfo.port, 1, iPTZCommand, iHorSpeed, iVerSpeed, iZoomSpeed, { success: function () { console.log(`PTZ指令 ${iPTZCommand} 发送成功`); }, error: function (status, statusText) { console.error('PTZ控制失败:', status, statusText); alert(`云台控制失败: ${statusText}。请确认该摄像头支持云台功能，且已开启。`); } }); } // 9. 停止云台运动 function stopPTZ() { if (!g_deviceInfo.ip) return; // PTZ命令 1 通常代表停止所有运动 g_oWebVideoCtrl.ptzControl(g_deviceInfo.ip, g_deviceInfo.port, 1, 1, 0, 0, 0, { success: function () { console.log('云台停止'); }, error: function (s, t) { console.error('停止PTZ失败:', t); } }); } // 10. 注销设备 function logout() { if (g_deviceInfo.ip) { g_oWebVideoCtrl.logout(g_deviceInfo.ip, g_deviceInfo.port, { success: function () { g_deviceInfo = {}; stopPreview(); document.getElementById('status').textContent = '已注销'; console.log('设备注销成功'); } }); } }

5. 关键问题排查与调试心得

代码写完了，能跑起来才是关键。以下是你在联调过程中几乎一定会遇到的问题和解决方法。

5.1 视频无法预览，黑屏或报错

这是最常见的问题，可以从以下方面排查：

5.2 云台控制无反应

云台控制依赖HTTP API，问题通常出在请求链路上。

1. 确认摄像头支持云台：登录摄像头Web界面，看是否有云台控制面板，并能手动操作。
2. 检查API地址：云台控制命令最终是通过类似http://摄像头IP/ISAPI/PTZCtrl/channels/1/continuous的API发送的。你可以在浏览器中手动构造一个GET请求测试（需要认证）：http://admin:password@192.168.1.100/ISAPI/PTZCtrl/channels/1/continuous?pan=10&tilt=10观察摄像头是否转动。这能帮你确认是API问题还是前端代码问题。
3. 查看代理日志：在Node.js代理服务器控制台，查看是否有转发PTZ请求，以及摄像头的响应是什么。常见的错误码如403 Forbidden（认证失败）、404 Not Found（API路径错误）。
4. 速度参数：速度值（iSpeed）太小可能看不出移动，尝试调到5-8。同时，云台控制是“按下持续运动”，需要发送“停止”命令才会停。我们的Demo中，方向按钮是点按触发，松开不会自动发停止，所以需要手动点击“停止云台”按钮。要实现“按着动，松开停”，需要监听按钮的onmousedown和onmouseup事件。

5.3 抓拍或录像保存问题

• 抓拍保存位置不明确：capturePicture方法触发的下载，其保存路径由浏览器的下载设置决定。在Chrome中，可能会在底部栏提示，或者直接保存到“下载”文件夹。无法通过代码指定绝对路径，这是浏览器安全策略限制。
• 录像文件无法播放：MediaRecorder默认生成的webm格式，虽然兼容性较好，但某些播放器可能不支持。可以尝试更改mimeType为'video/mp4;codecs=avc1.424028'（如果浏览器支持的话）。如果录像文件损坏，检查是否在stopRecord后正确触发了onstop事件并生成了Blob。

5.4 关于延迟

通过Web无插件方案预览，延迟通常在1-3秒，取决于网络状况和码流大小。这是由“摄像头编码 -> 网络传输 -> 服务器/浏览器转封装 -> 解码渲染”这个链条决定的。对于实时性要求极高的场景，这个方案可能不适用。可以尝试以下优化：

• 使用子码流（iStreamType=2）。
• 确保网络环境良好，避免WiFi。
• 在摄像头配置中，降低视频的帧率和码率。

6. 进阶优化与扩展思路

一个基础Demo跑通后，可以考虑以下方向进行增强，使其更接近一个可用的产品模块。

6.1 多窗口与多摄像头支持

WebVideoCtrl支持初始化多个播放窗口。你可以创建一个窗口列表，动态管理。

// 初始化多个窗口 let wndIndices = []; function createVideoWindow(containerId, width, height) { const info = g_oWebVideoCtrl.initWindow(wndIndices.length + 1, { iWidth: width, iHeight: height, container: document.getElementById(containerId) }); if(info) wndIndices.push(info.iIndex); return info.iIndex; } // 对不同窗口索引调用 startPreview

6.2 实现真正的“按住转动，松开停止”

给云台方向按钮绑定onmousedown和onmouseup(或ontouchstart/ontouchend用于移动端) 事件。

// 以向上按钮为例 const upBtn = document.getElementById('up'); upBtn.onmousedown = function() { ptzControl(0); }; // 开始向上 upBtn.onmouseup = function() { stopPTZ(); }; // 停止 // 注意：这样需要为每个方向按钮都绑定，并且要处理好鼠标移出按钮范围的情况。

6.3 集成到现代前端框架（Vue/React）

核心思路是将g_oWebVideoCtrl实例及其状态管理（登录状态、播放状态等）放入框架的响应式系统（如Vue的data、React的state）或全局状态管理库（如Vuex、Pinia、Redux）中。将SDK的回调函数与框架的生命周期钩子（mounted,componentDidMount,onUnmounted,componentWillUnmount）结合，确保资源正确初始化和销毁。

6.4 添加视频质量切换与音频控制

在startPreview的参数中切换主/子码流来实现清晰度切换。音频控制则需要在初始化SDK时检查设备音频能力，并通过openSound/closeSound等方法控制。

6.5 安全性增强

目前的代理非常简单。在生产环境中，你必须：

1. 对代理接口进行鉴权：只有登录了你的Web应用的用户才能使用代理。
2. 限制代理目标：防止代理被滥用去访问内网其他设备。
3. 使用HTTPS：前端页面和代理服务器都应使用HTTPS，防止视频流和密码被窃听。
4. 摄像头密码管理：不应在前端硬编码或明文传输。最佳实践是后端代理持有摄像头凭据，前端只传递操作指令。

这个Demo提供了一个坚实的起点。海康的SDK功能非常庞大，还包括回放、语音对讲、报警订阅等。当你掌握了预览、云台、抓拍录像这几个核心流程后，再去查阅官方开发文档研究其他功能，就会顺利得多。最关键的是，你不再需要依赖那些古老的、不可靠的浏览器插件了。

本文还有配套的精品资源，点击获取