electron获取媒体流（实现屏幕分享）

背景

最近项目需要接入直播系统，在调研了多家平台后，发现部分公司的针对electron的sdk存在一些问题，如适配的electron版本较低或sdk本身存在问题，所以使用了web的sdk，然而web的sdk在进行屏幕分享时存在一个权限问题，直接上教程：

在electron中使用屏幕分享

1.使用electron提供的接口获取桌面窗口信息

import { desktopCapturer } from 'electron' desktopCapturer.getSources({ types: ['window', 'screen'] }).then( sources=>{ consolo.log(sources) // sources就是获取到的窗口和桌面数组 })

2.获取需要的媒体流

2.1 获取指定窗口的媒体流

// 此处的sources是上一步中promise返回的sources const source = sources.find(item => item.name === 'QQ音乐') // 获取指定窗口的媒体流 navigator.mediaDevices.getUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: source.id } } }).then(stream => { console.log(stream) // stream就是媒体流 })

2.2 从整个桌面同时捕获音频和视频

// 从整个桌面同时捕获音频和视频 navigator.mediaDevices.getUserMedia({ audio: { mandatory: { chromeMediaSource: 'desktop' } }, video: { mandatory: { chromeMediaSource: 'desktop' } } }).then(stream => { console.log(stream) // stream就是媒体流 })

2.3 本地预览

function previewStream (stream) { const video = document.querySelector('video') // 使用video标签 // const video = this.$el.querySelector('video') // vue使用这个 video.srcObject = stream video.onloadedmetadata = (e) => video.play() }

3.获取当前媒体流的音视频轨信息

第三方提供的sdk一般存在两种方式获取媒体流信息，这里主要分享第二种方式

第一种 sdk的api，针对这种情况，如果你使用的是electron的sdk，并且它的sdk可以在你的应用上正常使用（怨念颇深！），那么这种方式是最好的第二种 在使用第三方的创建媒体流函数时传递的参数换成音视频轨信息（调研了市面上的8，9家平台，在这一步都是支持使用音视频轨信息的），直接上代码，这里以腾讯的sdk举例！ // 此处的stream是上一步中promise返回的stream this.shareStream = TRTC.createStream({ // 这个函数就是创建媒体流的函数 audioSource: stream.getAudioTracks()[0], // 获取音轨信息 videoSource: stream.getVideoTracks()[0] // 获取视频轨信息 }) // 这个shareStream就是sdk需要的stream

完整代码

import { desktopCapturer } from 'electron' function getScreens() { desktopCapturer.getSources({ types: ['window', 'screen'] }).then( sources => { const source = sources.find(item => item.name === 'QQ音乐') getInitStream(source) }) } function getInitStream(source) { // 获取指定窗口的媒体流 navigator.mediaDevices.getUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: source.id } } }).then(stream => { getSdkStream(stream) }) } function getSdkStream(stream) { this.shareStream = TRTC.createStream({ audioSource: stream.getAudioTracks()[0], videoSource: stream.getVideoTracks()[0] }) }