Способ 1: конвертировать напрямую в FLV

Способ 2. Используйте вспышку.

Пример кода

Если вы воспроизводите прямую трансляцию RTMP непосредственно на внешнем интерфейсе, вам понадобится флэш-память, а Chrome больше не поддерживает флэш-память, поэтому вам придется использовать плагин флэш-памяти.

1659969197107.png

Как видно из последней документации Electron, Последняя версия Electron больше не поддерживает плагины Flash. Поэтому вам нужно посмотреть журнал изменений, Посмотрите, какая версия Electron наконец поддерживается

image.png

Вы можете видеть, что это Electron12, поэтому просто установите Electron11.

шаг

1. Настройте среду

использовать vue-cli5 + vue-cli-plugin-electron-builderстроить, См. конкретноДокументация плагина

игрокиспользоватьvue-video-playerкомпоненты иvideojs-flashплагин

Уведомление:vue-video-playerкомпоненты иvideojs-flashплагин Все б/уvideo.jsБиблиотека, Однако прямая установка приведет к конфликтам между двумя версиями.(Сообщить об ошибкеERROR: The "flash" tech is undefined. Skipped browser support check for that tech.), Поэтому необходимо унифицировать версии зависимостей video.js двух библиотек. package.json в файлеresolutions Поле используется для разрешения выборочных версий. Зависимые версии можно настроить с помощью этой функции.

 "resolutions": {
    "video.js": "^7.10.0"
  },

Ссылки: https://github.com/surmon-china/vue-video-player/issues/221

2. Установите флэш-плагин.

Вы также можете найти старые версии в Интернете.Электронная документация

① Сначала получите файл подключаемого модуля флэш-памяти, который включен в мой пример, или перейдите на веб-сайт флэш-памяти, чтобы загрузить версию PPAPI, а затем найдите соответствующий файл DLL в каталоге установки.

image.png

② Затем внедрите плагин в основной процесс.

Следует отметить, что пути среды разработки и среды упаковки различны. Так что это должно бытьvue.config.jsРучка средней конфигурацииплагиндокумент Пакет Перейдите в каталог установки

 extraResources: {
  from: 'libs/',
  to: './',
},

Затем вам нужно вынести суждение, когда вы ссылаетесь на него. Если существуют 64-битные и 32-битные библиотеки DLL, вы также можете сделать суждение.

const path = require('path')
  let dllName = 'pepflashplayer64_29_0_0_238.dll'
  if (process.arch === 'ia32') {
    dllName = 'pepflashplayer32_29_0_0_238.dll'
  }

  let libPath = path.resolve(`libs/flash/${dllName}`)
  if (process.env.NODE_ENV !== 'development') {
    libPath = path.resolve(`resources/flash/${dllName}`)
  }
  app.commandLine.appendSwitch('ppapi-flash-path', libPath)

3. Настройте плеер

может пройтиnavigator.pluginsПриходите и посмотритеflashплагин Было ли внедрение успешным?

image.png

Затем представим компоненты и настроим прямую трансляцию.

<template>
  <div class="container">
    <video-player
      class="video-player"
      ref="videoPlayer"
      :options="options"
      :playsinline="true"
    ></video-player>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
  name: 'App',
  components: {
    videoPlayer,
  },
  data() {
    return {
      options: {
        autoplay: true,
        controls: false,
        preload: 'none',
        muted: false,
        // aspectRatio: '16:9',
        language: 'zh-CN',
        sources: [{
          type: 'rtmp/mp4',
          src: 'rtmp://127.0.0.1/live/test',
        }],
        techOrder: ['flash', 'html5'],
        poster: '',
        notSupportedMessage: «Ошибка сервиса», //Позволяет переопределить сообщение по умолчанию, отображаемое, когда Video.js не может воспроизвести источник мультимедиа.
      },
      isMini: false,
    }
  },
}
</script>
<style>
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
body {
  -webkit-app-region: drag;
}
.container {
  background: transparent;
}
.container,
.video-player,
.video-js {
  width: 100%;
  height:100%;
}
</style>

4. Недостатки

① Сегодня может работать нормально, но завтра появится сообщение, что версия слишком низкая.

53e080061ff004ec558e43f80abd24d.jpg

② Последняя версияuse также выдает исключение.

image.png

③ После упаковки Страница должна быть открыта через сервис, Не работаетfile:Способ