Об авторе: Чжан Ганзе, инженер Agora Web R&D
Для таких сценариев, как онлайн-образование, медицинское обслуживание и видеоконференции, разработка кроссплатформенного клиента для Windows и Mac является важным шагом. В прошлом приложения для каждой операционной системы нужно было писать на определенном языке программирования, а каждый клиент нужно было разрабатывать индивидуально. Теперь мы можем использовать различные инструменты и фреймворки для кроссплатформенной разработки. Электрон — один из самых популярных.
Electron, ранее известный как Atom Shell, представляет собой проект с открытым исходным кодом, основанный на Node.js и Chromium. Он позволяет разработчикам интерфейсов также создавать кроссплатформенные настольные приложения с использованием JavaScript, HTML и CSS.
Электрон совместим с Mac, Windows и Linux. Приложения, созданные с его помощью, могут работать в этих трех операционных системах. Мы можем видеть это во многих известных проектах, таких как Slack, Cocos Creator, Visual Studio Code и более чем в 500 проектах.
В этой статье будет проанализировано несколько идей реализации, а также преимущества и недостатки использования Electron в качестве приложения для видеоконференций.В то же время, в сочетании с демонстрационными примерами, я поделюсь тем, как разработать приложение для видеоконференций на основе Electron и Agora Web SDK.
Несколько идей для проведения видеоконференции
Как использовать Electron для реализации приложения для видеоконференций? В основном это зависит от того, какая технология используется для реализации части RTC, которая является ядром бизнеса.
Первая идея заключается в использовании C++ SDK для реализации. Мы можем использовать подключаемый модуль NodeJS node-gyp для компиляции библиотеки C++ в файл, который NodeJS может использовать напрямую Интерфейсная часть реализуется через Интернет Наконец, бизнес-часть RTC использует скомпилированный подключаемый модуль для прямого вызова Интерфейс С++.
Преимущество этого метода заключается в прямом вызове интерфейса C++, который имеет определенные преимущества в производительности и стабильности. Однако недостатком является то, что взаимодействие между нативным модулем и веб-модулем будет относительно сложным.
Хотя NodeJS может напрямую вызывать интерфейс C++, если C++ хочет передать данные в часть Node через обратный вызов, ему необходимо убедиться, что данные передаются в поток, в котором находится Electron, чтобы Electron мог получить обратный вызов. Другой пример: если C++ SDK использует зависимости динамических библиотек с различиями платформ, то в процессе компиляции с помощью node-gyp разные версии должны быть скомпилированы на разных платформах, прежде чем их можно будет нормально использовать в Electron.
Вторая идея — использовать WebRTC, то есть и интерфейсная часть, и бизнес-часть RTC реализованы через Web.
Преимущество такого подхода в том, что интеграция и отладка очень просты, а большая часть работы может быть перенесена непосредственно в Electron практически без проблем после выполнения в браузере.
Однако, поскольку WebRTC не хватает решений для проектирования и развертывания на стороне сервера, нам сначала нужно объединить WebRTC с проектами с открытым исходным кодом, такими как Janus, для решения таких проблем, как развертывание сервера и проникновение NAT, и реализовать часть RTC, что также является трудностью этого. метод реализации. Но если вы реализуете часть RTC через Agora Web SDK, вам не нужно беспокоиться о вышеперечисленных проблемах, и это самый быстрый и простой способ реализовать ее.
В сочетании с технологией WebRTC Agora Web SDK реализует многостороннюю аудио- и видеосвязь на веб-странице, что позволяет быстро реализовать разработку части RTC. Аудио- и видеоданные пользователей WebRTC передаются через облачную передачу Agora.io SD-RTN в режиме реального времени, что может в наибольшей степени обеспечить качество передачи общедоступной сети. предсказание, динамическая регулировка скорости передачи данных и другие стратегии, может быть достигнуто очень хорошее взаимодействие с пользователем при многостороннем вызове.
Для этой интеграции мы также предоставили демонстрационный проект с открытым исходным кодом на Github. Кратко разберемся, как реализовать основную функцию аудио- и видеовызова в демо.
Аудио- и видеозвонки на основе Agora Web SDK
Нам нужно создать директорию web-app в среде Electron, создать в ней базовую веб-часть и быстро реализовать функцию видеозвонка.
Создайте экземпляр AgoraRTC и присоединитесь к каналу:
let client = AgoraRTC.CreateClient({mode:"interop"})
Инициализируйте приложение и присоединяйтесь к каналу:
client.init(options.key, () => {
console.log("AgoraRTC client initialized")
client.join(options.key, options.channel, options.uid, (uid) => {
console.log("User " + uid + " join channel successfully")
console.log(new Date().toLocaleTimeString())
// create localstream
resolve(uid)
})
})
Создайте локальный поток и нажмите:
let stream = AgoraRTC.creatStream(merge(defaultConfig.config))
localStream.init(() =>{
client.publish(localStream, err => {
console.log("Publish local stream error: " + err);
localStream.play("element_id")
})
},
После выполнения вышеуказанных шагов вы сможете увидеть свой собственный видеоэкран.Далее нам нужно запустить эту часть кода в контейнере приложения Electron.
Создайте экземпляр BrowserWindow и прочитайте содержимое каталога веб-приложения:
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
let mainwindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './web-app/dist/index.html'),
protocol: 'file:',
slashes: true
}))
mainWindow.webContents.openDevTools()
//Open the DevTools
//mainWindow.webContents.openDevTools()
//Emitted when the window is closed.
mainWindow.on('closed',function(){
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
После завершения используйте npm start, чтобы запустить Electron.
наконецкликните сюдаПросмотрите исходный код демо, а также вы можетечерез веб-сайтУзнайте об интерфейсе SDK.
Если вы заинтересованы в нашем решении или столкнулись с проблемами при разработке, посетитеВопросы и ответы SoundNet Agora, пост для общения с инженерами звуковой сети.