使用 Electron 搭建一个实时视频App

当你使用Weex、ReactNative、Hubuilder构建手机App的时候,你可曾想过桌面应用也应该有一种这样类似Hybrid的方式,让开发者更好的构建桌面应用。

Electron就是使用JavaScript、HTML、CSS等Web技术构建原生程序的框架,Electron是基于Chromium和NodeJS(NodeJS应该是世界上最好的语言),项目完成后封装成一个可以单独运行的NodeJS运行时的应用,这个应用拥有原生的窗口和菜单,并且提供程序崩溃的报告,通过报告可以更好的了解程序运行中的问题和可优化的部分,让困难的部分变得更加便捷。

由于Electron基于Chromiun,所以使用Electron构建的App更像是一个在Chrome浏览器中运行的程序,自然可以顺利的调用设备的摄像头。除摄像头外、麦克风也是可以被顺利调用起来。

使用Electron可以方便快捷的开发出跨平台的各种桌面应用,包含Mac、Windows、Linux等桌面应用程序。在你开发完Web应用程序后的源码还可以『重复再利用』,可以根据需求快速生成Mac、Windows、Linux客户端。

基于Electron这种跨平台的特性,给野狗实时音视频通信产品提供了一种构建桌面程序可能性,:在不用开发C#和Objective-C等原生代码的前提下,构建产品体验和原生开发相同的桌面应用程序。极大的减轻工程师团队的项目压力,加快项目快速交付进度。

现在,野狗实时音视频通信产品完全支持Electron开发模式,整个使用方法和Web开发一样,只需要把野狗的音视频通信Web SDK通过npm install命令安装到Electron开发的开发环境,调用野狗的音视频通信Web SDK的API接口,便可以快速给桌面应用增加音视频能力。代码只需少量修改,便可快速生成相应桌面程序。

注意:

由于一些不可描述的原因,使用NPM安装electron的时候常常会出现Timeout的情况,这时你可以这样做: 把科学上网装置开启全局模式。 更换淘宝镜像源,然后使用CNPM下载Electron。

2017年12月8日更新:

看到评论区说,貌似准备看怎么详细搭建然后突然间戛然而止,很不爽的感觉,这里给大家说一下:Electron搭建WebRTC的实时视频App往往是使用Web的代码『二次利用』,一般是在网页版本的代码之后自己迁移到Electron环境,本质上是一个怎么使用实时通信API的问题,所以这里没有做更多的描述,希望大家看到的朋友们,能够理解。

这并不是一个广告:并没有相应的官网链接,甚至连文档地址都没有,只是希望通过阅读本篇文章, 让大家知道我们在Electron上做的研究,我们确定在Electron上面使用WebRTC完全可以搭建一个实时通信。但是未来避嫌,我们克制的没有上我们官方网站和产品使用链接,希望大家理解。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A:要搭建一个用Vue3框架的Electron项目,可以按照以下步骤进行: 1. 安装Electron和Vue CLI 需要全局安装Electron和Vue CLI,可以使用以下命令进行安装: ``` npm install -g electron npm install -g @vue/cli ``` 2. 创建Vue3项目 使用Vue CLI创建一个新的项目,可以通过以下命令创建: ``` vue create my-electron-project ``` 在创建时选择默认的配置和Babel编译器。 3. 集成Electron 在项目根目录下新建一个`main.js`文件,并在其中引入Electron: ``` const { app, BrowserWindow } = require('electron') function createWindow () { // 创建窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, } }) // 加载Vue应用 win.loadURL('http://localhost:8080/') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这个文件主要用于创建一个Electron窗口,同时在窗口中加载Vue应用。 4. 修改Vue配置 在Vue项目中,需要安装一些插件来支持Electron,同时需要进行一些配置。在`package.json`文件中添加以下内容: ``` { "main": "main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build && electron .", "electron:serve": "vue-cli-service build && electron . --serve", "electron:build": "vue-cli-service build && electron-builder" }, "dependencies": { "electron": "^13.1.2" }, "devDependencies": { "electron-builder": "^22.11.7", "vue-cli-plugin-electron-builder": "^2.0.0-rc.3" }, "electronBuilder": { "builderOptions": { "appId": "com.example.myapp", "productName": "My App", "win": { "target": "nsis" } } } } ``` 其中`dependencies`添加了`electron`,`devDependencies`添加了`electron-builder`和`vue-cli-plugin-electron-builder`,`electronBuilder`中的配置是为了在打包时使用。 还需要在`src`目录下新建一个`background.js`文件: ``` const { app, BrowserWindow } = require('electron') let mainWindow = null app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false, nodeIntegration: true, contextIsolation: false } }) mainWindow.loadURL('http://localhost:8080') }) ``` 这个文件用于创建Electron窗口,同时在窗口中加载Vue应用。 5. 运行程序 现在可以运行程序了,在终端中运行以下命令: ``` npm run electron:serve ``` 这个命令会同时启动Vue开发服务器和Electron程序,用于测试程序。 6. 打包程序 如果需要打包程序,可以运行以下命令: ``` npm run electron:build ``` 这个命令会生成打包文件,可以在`dist_electron`目录下找到打包结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值