背景
最近項目需要接入直播系統,在調研了多家平臺後,發現部分公司的針對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]
})
}