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 = streamvideo.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]})
}

electron获取媒体流（实现屏幕分享）相关推荐

WebRTC音视频采集和播放示例及MediaStream媒体流解析
WebRTC音视频采集和播放示例及MediaStream媒体流解析目录示例代码--同时打开摄像头和麦克风,并在页面显示画面和播放捕获的声音 API解析 mediaDevices MediaStre ...
webrtc janus服务器部署在公网，coturn转发媒体流
janus本身部署在公网时,其内部使用的libnice库已经实现了stun的功能,在配置文件janus.jcfg里面,nat_1_1_mapping配置成公网地址,其位于NAT后面的局域网客户端之间可 ...
WebRTC（三）用屏幕分享录制一段视频
前一章节了解了屏幕分享的API,感觉跟我们常用的"屏幕共享"好像. 那么可不可以用此进行一个屏幕录制呢? "纸上得来终觉浅,觉知此事要躬行."看着挺简单的一个东 ...
LIVE555中RTSP客户端接收媒体流分析及测试代码
LIVE555中testProgs目录下的testRTSPClient.cpp代码用于测试接收RTSP URL指定的媒体流,向服务器端发送的命令包括:DESCRIBE.SETUP.PLAY.TERAD ...
电子白板，控件播放功能，屏幕分享
仿照好视通的电子白板,做了一个小demo,记录一下,将office,pdf等文档转换成图片,然后把图片做成inkcanvas的背景,录放inkcanvas控件达到屏幕分享的目的电子白班前台用到的是I ...
AVFoundation – AVMetadataItem 获取媒体属性元数据
目录一.前言 1.AVAsset 2.AVAssetTrack 3.AVComposition / AVMutableComposition 4.AVMutableVideoComposition ...
【接口调用】EasyCVR获取直播流接口调用过程
EasyCVR作为一款功能完善的视频结构化智能分析平台,支持多种协议的视频流的输出,同时也能够支持语音对讲,只要前端设备带语音功能,用户即可通过EasyCVR来进行隔空喊话.同时EasyCVR开放了很 ...
计算机无法启用媒体流,win10电脑媒体流启动不了怎么办_win10电脑媒体流无法启动解决方法-win7之家...
我们要知道,win10电脑中的流媒体又叫流式媒体,它采用流式传输的方式在Internet播放媒体,有些用户由于一直不知道此功能的存在,因此在启动的时候就容易出现启动不了的问题,那么win10电脑媒体流 ...
LiveNVR配置拉转RTSP传统海康大华安防摄像机直播流输出RTSP/RTMP/HLS/HTTP-FLV如何获取直播流地址
LiveNVR配置拉转RTSP传统海康大华安防摄像机直播流输出RTSP/RTMP/HLS/HTTP-FLV如何获取直播流地址 1. Onvif/RTSP流媒体服务 2.配置拉转直播流 2.1 RTSP ...

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

背景

在electron中使用屏幕分享

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

2.获取需要的媒体流

2.1 获取指定窗口的媒体流

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

2.3 本地预览

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

完整代码

electron获取媒体流（实现屏幕分享）相关推荐

最新文章

热门文章