在Electron中使用wasm版

159 次浏览 2026年 6月 1日上午10:25

# 在Electron中使用wasm版

## Electron原生开发方式已发布，请查看最新原生开发方式 ！！！
[https://www.nodemedia.cn/document/?project=11&document=136](https://www.nodemedia.cn/document/?project=11&document=136)

## 以下是使用NodePlayer.js组件的Web开发方式
已知问题是，从electron中加载js，一般是以相对路径直接加载，如
```
<script src="./NodePlayer.min.js"></script>
```
在electron中这样就是以file:///路径格式加载，而浏览器加载wasm必须以web形式加载。否则控制台报错：
![](https://www.nodemedia.cn/doc/server/../Public/Uploads/2022-01-13/61dfcf4aec50b.png)
而使用Electron开发App肯定是希望离线部署的，所以也不能部署到cdn来加载。
解决方法很简单，就是用nodejs创建一个http static file 服务即可。
## 1 安装依赖
```
npm i node-static
```

## 2.在创建窗口之前先创建静态文件服务
```
const { app, BrowserWindow } = require('electron')
const static = require('node-static');
const http = require('http');
const file = new (static.Server)(__dirname+"/js");

app.whenReady().then(() => {
  http.createServer(function (req, res) {
    file.serve(req, res);
  }).listen(8080, "127.0.0.1");
  createWindow()
})
```
说明,
__dirname+"/js 就是指将程序目录下的js目录设为webroot目录。
listen(8080, "127.0.0.1")表示只在本机上监听8080端口提供服务，外部无法访问，提升安全性，端口号随意。

## 3.拷贝程序
将NodePlayer.min.js,NodePlayer.min.wasm 拷贝到js目录下

## 4.在index.html中关闭CSP
首先，如果是按官方步骤的话，需要删除以下两行
```
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
```

## 5.使用播放器
```
<body>
  <canvas id="video" width="640" height="480"></canvas>
  <script type="text/javascript" src="http://localhost:8080/NodePlayer.min.js"></script>
  <script>
    var player;
    NodePlayer.load(() => {
      player = new NodePlayer();
      player.setView("video");
      player.start("http://192.168.0.2:8000/live/bbb.flv");
    });
  </script>
</body>
```
## 运行效果
![](https://www.nodemedia.cn/doc/server/../Public/Uploads/2022-01-13/61dfd8e5d69f8.jpg)

## 硬件解码
最新版Eletron的chromium内核已升级到96，可使用v0.9版之后的wcs进行h264硬件解码。

## 指令集加速解码H265
无法在浏览器环境中使用265硬件解码加速，但使用NodePlayer.js v0.10及之后版本，可以使用SIMD指令集加速解码，流畅播放1080P H265

文档

在Electron中使用wasm版