mirror of https://github.com/jitsi/jitsi-meet
- Adds the ability to share video as a "PiP" when screenshare is in progress. - Add a method for creating a local presenter track. - Make sure isLocalVideoTrackMuted returns the correct mute state when only screenshare is present. - Make sure we get the updated window size of the window being shared before painting it on the canvas. - Make sure we check if the shared window has been resizedpull/4897/head jitsi-meet_4112
Jaya Allamsetty
5 years ago
committed by
Saúl Ibarra Corretgé
parent
db6a2673de
commit
0a64bf2068
@ -0,0 +1,161 @@ |
||||
// @flow
|
||||
|
||||
import { |
||||
CLEAR_INTERVAL, |
||||
INTERVAL_TIMEOUT, |
||||
SET_INTERVAL, |
||||
timerWorkerScript |
||||
} from './TimeWorker'; |
||||
|
||||
/** |
||||
* Represents a modified MediaStream that adds video as pip on a desktop stream. |
||||
* <tt>JitsiStreamPresenterEffect</tt> does the processing of the original |
||||
* desktop stream. |
||||
*/ |
||||
export default class JitsiStreamPresenterEffect { |
||||
_canvas: HTMLCanvasElement; |
||||
_ctx: CanvasRenderingContext2D; |
||||
_desktopElement: HTMLVideoElement; |
||||
_desktopStream: MediaStream; |
||||
_frameRate: number; |
||||
_onVideoFrameTimer: Function; |
||||
_onVideoFrameTimerWorker: Function; |
||||
_renderVideo: Function; |
||||
_videoFrameTimerWorker: Worker; |
||||
_videoElement: HTMLVideoElement; |
||||
isEnabled: Function; |
||||
startEffect: Function; |
||||
stopEffect: Function; |
||||
|
||||
/** |
||||
* Represents a modified MediaStream that adds a camera track at the |
||||
* bottom right corner of the desktop track using a HTML canvas. |
||||
* <tt>JitsiStreamPresenterEffect</tt> does the processing of the original |
||||
* video stream. |
||||
* |
||||
* @param {MediaStream} videoStream - The video stream which is user for |
||||
* creating the canvas. |
||||
*/ |
||||
constructor(videoStream: MediaStream) { |
||||
const videoDiv = document.createElement('div'); |
||||
const firstVideoTrack = videoStream.getVideoTracks()[0]; |
||||
const { height, width, frameRate } = firstVideoTrack.getSettings() ?? firstVideoTrack.getConstraints(); |
||||
|
||||
this._canvas = document.createElement('canvas'); |
||||
this._ctx = this._canvas.getContext('2d'); |
||||
|
||||
if (document.body !== null) { |
||||
document.body.appendChild(this._canvas); |
||||
} |
||||
this._desktopElement = document.createElement('video'); |
||||
this._videoElement = document.createElement('video'); |
||||
videoDiv.appendChild(this._videoElement); |
||||
videoDiv.appendChild(this._desktopElement); |
||||
if (document.body !== null) { |
||||
document.body.appendChild(videoDiv); |
||||
} |
||||
|
||||
// Set the video element properties
|
||||
this._frameRate = parseInt(frameRate, 10); |
||||
this._videoElement.width = parseInt(width, 10); |
||||
this._videoElement.height = parseInt(height, 10); |
||||
this._videoElement.autoplay = true; |
||||
this._videoElement.srcObject = videoStream; |
||||
|
||||
// set the style attribute of the div to make it invisible
|
||||
videoDiv.style.display = 'none'; |
||||
|
||||
// Bind event handler so it is only bound once for every instance.
|
||||
this._onVideoFrameTimer = this._onVideoFrameTimer.bind(this); |
||||
this._videoFrameTimerWorker = new Worker(timerWorkerScript); |
||||
this._videoFrameTimerWorker.onmessage = this._onVideoFrameTimer; |
||||
} |
||||
|
||||
/** |
||||
* EventHandler onmessage for the videoFrameTimerWorker WebWorker. |
||||
* |
||||
* @private |
||||
* @param {EventHandler} response - The onmessage EventHandler parameter. |
||||
* @returns {void} |
||||
*/ |
||||
_onVideoFrameTimer(response) { |
||||
if (response.data.id === INTERVAL_TIMEOUT) { |
||||
this._renderVideo(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Loop function to render the video frame input and draw presenter effect. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_renderVideo() { |
||||
// adjust the canvas width/height on every frame incase the window has been resized.
|
||||
const [ track ] = this._desktopStream.getVideoTracks(); |
||||
const { height, width } = track.getSettings() ?? track.getConstraints(); |
||||
|
||||
this._canvas.width = parseInt(width, 10); |
||||
this._canvas.height = parseInt(height, 10); |
||||
this._ctx.drawImage(this._desktopElement, 0, 0, this._canvas.width, this._canvas.height); |
||||
this._ctx.drawImage(this._videoElement, this._canvas.width - this._videoElement.width, this._canvas.height |
||||
- this._videoElement.height, this._videoElement.width, this._videoElement.height); |
||||
|
||||
// draw a border around the video element.
|
||||
this._ctx.beginPath(); |
||||
this._ctx.lineWidth = 2; |
||||
this._ctx.strokeStyle = '#A9A9A9'; // dark grey
|
||||
this._ctx.rect(this._canvas.width - this._videoElement.width, this._canvas.height - this._videoElement.height, |
||||
this._videoElement.width, this._videoElement.height); |
||||
this._ctx.stroke(); |
||||
} |
||||
|
||||
/** |
||||
* Checks if the local track supports this effect. |
||||
* |
||||
* @param {JitsiLocalTrack} jitsiLocalTrack - Track to apply effect. |
||||
* @returns {boolean} - Returns true if this effect can run on the |
||||
* specified track, false otherwise. |
||||
*/ |
||||
isEnabled(jitsiLocalTrack: Object) { |
||||
return jitsiLocalTrack.isVideoTrack() && jitsiLocalTrack.videoType === 'desktop'; |
||||
} |
||||
|
||||
/** |
||||
* Starts loop to capture video frame and render presenter effect. |
||||
* |
||||
* @param {MediaStream} desktopStream - Stream to be used for processing. |
||||
* @returns {MediaStream} - The stream with the applied effect. |
||||
*/ |
||||
startEffect(desktopStream: MediaStream) { |
||||
const firstVideoTrack = desktopStream.getVideoTracks()[0]; |
||||
const { height, width } = firstVideoTrack.getSettings() ?? firstVideoTrack.getConstraints(); |
||||
|
||||
// set the desktop element properties.
|
||||
this._desktopStream = desktopStream; |
||||
this._desktopElement.width = parseInt(width, 10); |
||||
this._desktopElement.height = parseInt(height, 10); |
||||
this._desktopElement.autoplay = true; |
||||
this._desktopElement.srcObject = desktopStream; |
||||
this._canvas.width = parseInt(width, 10); |
||||
this._canvas.height = parseInt(height, 10); |
||||
this._videoFrameTimerWorker.postMessage({ |
||||
id: SET_INTERVAL, |
||||
timeMs: 1000 / this._frameRate |
||||
}); |
||||
|
||||
return this._canvas.captureStream(this._frameRate); |
||||
} |
||||
|
||||
/** |
||||
* Stops the capture and render loop. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
stopEffect() { |
||||
this._videoFrameTimerWorker.postMessage({ |
||||
id: CLEAR_INTERVAL |
||||
}); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,62 @@ |
||||
// @flow
|
||||
|
||||
/** |
||||
* SET_INTERVAL constant is used to set interval and it is set in |
||||
* the id property of the request.data property. timeMs property must |
||||
* also be set. request.data example: |
||||
* |
||||
* { |
||||
* id: SET_INTERVAL, |
||||
* timeMs: 33 |
||||
* } |
||||
*/ |
||||
export const SET_INTERVAL = 1; |
||||
|
||||
/** |
||||
* CLEAR_INTERVAL constant is used to clear the interval and it is set in |
||||
* the id property of the request.data property. |
||||
* |
||||
* { |
||||
* id: CLEAR_INTERVAL |
||||
* } |
||||
*/ |
||||
export const CLEAR_INTERVAL = 2; |
||||
|
||||
/** |
||||
* INTERVAL_TIMEOUT constant is used as response and it is set in the id |
||||
* property. |
||||
* |
||||
* { |
||||
* id: INTERVAL_TIMEOUT |
||||
* } |
||||
*/ |
||||
export const INTERVAL_TIMEOUT = 3; |
||||
|
||||
/** |
||||
* The following code is needed as string to create a URL from a Blob. |
||||
* The URL is then passed to a WebWorker. Reason for this is to enable |
||||
* use of setInterval that is not throttled when tab is inactive. |
||||
*/ |
||||
const code = ` |
||||
var timer; |
||||
|
||||
onmessage = function(request) { |
||||
switch (request.data.id) { |
||||
case ${SET_INTERVAL}: { |
||||
timer = setInterval(() => { |
||||
postMessage({ id: ${INTERVAL_TIMEOUT} }); |
||||
}, request.data.timeMs); |
||||
break; |
||||
} |
||||
case ${CLEAR_INTERVAL}: { |
||||
if (timer) { |
||||
clearInterval(timer); |
||||
} |
||||
break; |
||||
} |
||||
} |
||||
}; |
||||
`;
|
||||
|
||||
export const timerWorkerScript |
||||
= URL.createObjectURL(new Blob([ code ], { type: 'application/javascript' })); |
||||
@ -0,0 +1,19 @@ |
||||
// @flow
|
||||
|
||||
import JitsiStreamPresenterEffect from './JitsiStreamPresenterEffect'; |
||||
|
||||
/** |
||||
* Creates a new instance of JitsiStreamPresenterEffect. |
||||
* |
||||
* @param {MediaStream} stream - The video stream which will be used for |
||||
* creating the presenter effect. |
||||
* @returns {Promise<JitsiStreamPresenterEffect>} |
||||
*/ |
||||
export function createPresenterEffect(stream: MediaStream) { |
||||
if (!MediaStreamTrack.prototype.getSettings |
||||
&& !MediaStreamTrack.prototype.getConstraints) { |
||||
return Promise.reject(new Error('JitsiStreamPresenterEffect not supported!')); |
||||
} |
||||
|
||||
return Promise.resolve(new JitsiStreamPresenterEffect(stream)); |
||||
} |
||||
Loading…
Reference in new issue