canvas.captureStream到查看器的大小突然从原始大小缩小[webrtc]
我在electron中有两个使用desktopcapturer的扩展模式监视器。这两个屏幕通过canvas.captureStream()组合成一个画布,分辨率为3840x1080。接收器接收到流媒体后,开始播放视频。在几分钟内,视频的分辨率会从原始分辨率降低。我尝试在查看器中使用vp8和h264模式,但视频分辨率与原始大小不同。但视频大小的所有者是罚款 我怎样才能解决这个问题canvas.captureStream到查看器的大小突然从原始大小缩小[webrtc],canvas,electron,webrtc,Canvas,Electron,Webrtc,我在electron中有两个使用desktopcapturer的扩展模式监视器。这两个屏幕通过canvas.captureStream()组合成一个画布,分辨率为3840x1080。接收器接收到流媒体后,开始播放视频。在几分钟内,视频的分辨率会从原始分辨率降低。我尝试在查看器中使用vp8和h264模式,但视频分辨率与原始大小不同。但视频大小的所有者是罚款 我怎样才能解决这个问题 function onGettingStream(stream) { var framerate = 60 v
function onGettingStream(stream) {
var framerate = 60
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')
canvas.width = stream[0].width * stream.length
canvas.height = stream[0].height
stream.forEach(function(monitor, index){
var video = document.createElement('video')
video.muted = true
video.volume = 0
try {
video.setAttributeNode(document.createAttribute('autoplay'))
video.setAttributeNode(document.createAttribute('playsinline'))
video.setAttributeNode(document.createAttribute('controls'))
} catch (e) {
video.setAttribute('autoplay', true)
video.setAttribute('playsinline', true)
video.setAttribute('controls', true)
}
video.srcObject = monitor
video.addEventListener('play', function() {
var $this = this
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.imageSmoothingEnabled = false
ctx.imageSmoothingQuality = 'high'
ctx.drawImage($this, monitor.left, 0, monitor.width, monitor.height)
setTimeout(loop, 1000 / framerate) // drawing at 30fps
}
})();
}, 0);
})
setInterval(function(){
console.log(canvas.width + " x " + canvas.height)
},5000)
videosContainer.insertBefore(canvas, videosContainer.firstChild)
var canvasStream = canvas.captureStream()
config.attachStream = canvasStream
callback && callback()
}
desktopCapturer.getSources({
types: ['screen']
}).then(sources => {
var streamObj = []
var srclength = sources.length
var screenWidth = screen.width
var screenHeight = screen.height
sources.forEach(async function(source, index) {
var screenname = source.name
screenname = screenname.substring(0, 6)
if (screenname == 'Screen' || source.name == 'Entire Screen') {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: screenWidth,
minHeight: screenHeight,
}
}
})
if (source.id == 'screen:0:0') {
stream.width = screenWidth
stream.height = screenHeight
stream.left = 0
streamObj.push(stream)
} else {
stream.width = screenWidth
stream.height = screenHeight
stream.left = screenWidth
streamObj.push(stream)
}
} catch (e) {
getDisplayMediaError(e)
}
}
if (index === srclength - 1) {
onGettingSteam(streamObj)
return
}
})
})
这回答了你的问题吗?Ps:发生这种情况时,您可以收听一个事件。