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]
	})
}