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一般存在两种方式获取媒体流信息，这里主要分享第二种方式

1. 第一种
   sdk的api，针对这种情况，如果你使用的是electron的sdk，并且它的sdk可以在你的应用上正常使用（怨念颇深！），那么这种方式是最好的
2. 第二种
   在使用第三方的创建媒体流函数时传递的参数换成音视频轨信息（调研了市面上的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]
	})
}