ffmpeg electron-vue项目

Satori

2022-02-17 358d29535fd9e0ab56a68acf5c72c82330fe52e1

ffmpeg electron-vue项目

 .gitignore

@@ -21,3 +21,6 @@
*.njsproj
*.sln
*.sw?

#Electron-builder output
/dist_electron

 package-lock.json

Diff too large

 package.json

@@ -4,10 +4,19 @@
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@electron/remote": "^2.0.1",
    "core-js": "^3.6.5",
    "electron": "^16.0.6",
    "fluent-ffmpeg": "git+https://gitee.com/suniv/node-fluent-ffmpeg.git",
    "node-sass": "^7.0.1",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
@@ -19,6 +28,9 @@
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.11"
  }
}

 src/assets/ffmpeg.exe

Binary files differ

 src/assets/js/vueElectron.js

New file
@@ -0,0 +1,13 @@
const electron = require('electron')

module.exports = {
    install: function (Vue) {
        Object.defineProperties(Vue.prototype, {
            $remote: {
                get () {
                    return electron.ipcRenderer
                },
            },
        })
    },
}

 src/background.js

New file
@@ -0,0 +1,134 @@
'use strict'

import {app, protocol, BrowserWindow,ipcMain} from 'electron'
import {createProtocol} from 'vue-cli-plugin-electron-builder/lib'

import ffmpeg from 'fluent-ffmpeg'


const path         = require('path')
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
    {scheme: 'app', privileges: {secure: true, standard: true}}
])

async function createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
        // fullscreen:true,
        // frame:false,
        webPreferences: {
            enableRemoteModule: true,
            nodeIntegration: true,
            contextIsolation: false  //  把这一项加上错误就会消失
        }
    })

    win.setMenu(null);

    ipcMain.on('pushStream',()=>{

        let outputPath = 'rtmp://127.0.0.1:1935/live/home';

        let ffmpegPath = "D:/ffmpeg.exe"



        ffmpeg()
            .input('desktop') // 推送桌面配置
            .setFfmpegPath(ffmpegPath)
            .inputFormat('gdigrab')
            .inputOptions('-offset_x 0')
            .inputOptions('-offset_y 0')
            .inputOptions('-video_size 1920x1080')
            .addOptions([
                "-vcodec libx264",
                "-preset ultrafast",
                "-acodec aac",
                "-pix_fmt yuv420p",
                "-tune zerolatency",
                "-vb 400k",
            ])
            .on('start', function(cmd) {
                console.log('Started ' + cmd);
            })
            .on('error', function(err) {
                console.log('An error occurred: ' + err.message);
            })
            .on('end', function() {
                console.log('Finished encoding');
            })
            .output(outputPath, {
                end: true
            })
            .format("flv")
            .run();
        //
        //


    })


    if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        if (!process.env.IS_TEST) win.webContents.openDevTools()
        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    } else {
        createProtocol('app')
        // Load the index.html when not in development
        win.loadURL('app://./index.html')

    }
}


// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
    createWindow()
})

ipcMain.on('close-all',((event, args) => {


    event.returnValue = 123;
    // app.quit();
}))


// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
    if (process.platform === 'win32') {
        process.on('message', (data) => {
            if (data === 'graceful-exit') {
                app.quit()
            }
        })
    } else {
        process.on('SIGTERM', () => {
            app.quit()
        })
    }
}



 src/main.js

@@ -3,9 +3,13 @@
import './registerServiceWorker'
import router from './router'
import store from './store'
import VueElectron from './assets/js/vueElectron'




Vue.use(VueElectron);
Vue.config.productionTip = false

new Vue({
  router,
  store,

 src/views/Home.vue

@@ -1,18 +1,35 @@
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
    <div>
        <video></video>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}



    export default {
        name: 'Home',
        methods: {
            close() {
                console.log(this.$remote.sendSync('close-all', 12));
            },

            async getMedias(){
                (await navigator.mediaDevices.enumerateDevices()).forEach(item=>{
                    console.log(item)
                })
            }

        },

        async mounted() {
            await this.getMedias();

            this.$remote.send('pushStream');
        }


    }
</script>

 vue.config.js

New file
@@ -0,0 +1,35 @@
module.exports = {
    /** 区分打包环境与开发环境
     * process.env.NODE_ENV==='production'  (打包环境)
     * process.env.NODE_ENV==='development' (开发环境)
     * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
     */
    // 项目部署的基础路径
    // 我们默认假设你的应用将会部署在域名的根部,
    // 例如 https://www.my-app.com/
    // 如果你的应用部署在一个子路径下，那么你需要在这里
    // 指定子路径。比如将你的应用部署在
    // https://www.foobar.com/my-app/
    // 那么将这个值改为 '/my-app/'

    outputDir: "E:/tianyi/ClassBoardManager/www", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败
    lintOnSave: false, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
    transpileDependencies: [
        /* string or regex */
    ], // 是否为生产环境构建生成sourceMap?

    productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {}, // CSS 相关选项
    publicPath: './',
    parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

    pwa: {}, // configure webpack-dev-server behavior

    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
};