Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/meet/media.js
Show First 20 Lines • Show All 69 Lines • ▼ Show 20 Lines | function Media() | ||||
} | } | ||||
this.getDisplayTrack = async (constraints) => { | this.getDisplayTrack = async (constraints) => { | ||||
// Use navigator.mediaDevices.getSupportedConstraints() to see which constraints are supported | // Use navigator.mediaDevices.getSupportedConstraints() to see which constraints are supported | ||||
const stream = await navigator.mediaDevices.getDisplayMedia(constraints) | const stream = await navigator.mediaDevices.getDisplayMedia(constraints) | ||||
return stream.getVideoTracks()[0] | return stream.getVideoTracks()[0] | ||||
} | } | ||||
/** | |||||
* Creates a <video> element with media stream/tracks assigned | |||||
*/ | |||||
this.createVideoElement = (tracks, props) => { | this.createVideoElement = (tracks, props) => { | ||||
const videoElement = document.createElement('video') | const videoElement = document.createElement('video') | ||||
const stream = new MediaStream() | const stream = new MediaStream() | ||||
tracks.forEach(track => stream.addTrack(track)) | tracks.forEach(track => stream.addTrack(track)) | ||||
videoElement.srcObject = stream | videoElement.srcObject = stream | ||||
this.setVideoProps(videoElement, props) | this.setVideoProps(videoElement, props) | ||||
return videoElement | return videoElement | ||||
} | } | ||||
/** | /** | ||||
* Resets a <video> element media streams | |||||
*/ | |||||
this.resetVideoElement = (element, remove) => { | |||||
if (!element) { | |||||
return | |||||
} | |||||
const stream = element.srcObject | |||||
if (stream) { | |||||
stream.getTracks().forEach(track => { | |||||
track.stop() | |||||
stream.removeTrack(track) | |||||
}) | |||||
} | |||||
if (remove) { | |||||
element.remove() | |||||
} | |||||
} | |||||
/** | |||||
* Make a picture from a video element | * Make a picture from a video element | ||||
*/ | */ | ||||
this.makePicture = (videoElement) => { | this.makePicture = (videoElement) => { | ||||
// Skip if video is not "playing" | // Skip if video is not "playing" | ||||
if (!videoElement.videoWidth) { | if (!videoElement.videoWidth) { | ||||
return | return | ||||
} | } | ||||
// we're going to crop a square from the video and resize it | // we're going to crop a square from the video and resize it | ||||
const maxSize = 64 | const maxSize = 64 | ||||
// Calculate sizing | // Calculate sizing | ||||
let sh = Math.floor(videoElement.videoHeight / 1.5) | let sh = Math.floor(videoElement.videoHeight / 1.5) | ||||
let sw = sh | let sw = sh | ||||
let sx = (videoElement.videoWidth - sw) / 2 | let sx = (videoElement.videoWidth - sw) / 2 | ||||
let sy = (videoElement.videoHeight - sh) / 2 | let sy = (videoElement.videoHeight - sh) / 2 | ||||
let dh = Math.min(sh, maxSize) | let dh = Math.min(sh, maxSize) | ||||
let dw = sh < maxSize ? sw : Math.floor(sw * dh/sh) | let dw = sh < maxSize ? sw : Math.floor(sw * dh/sh) | ||||
const canvas = $("<canvas>")[0] | const canvas = document.createElement('canvas') | ||||
canvas.width = dw | canvas.width = dw | ||||
canvas.height = dh | canvas.height = dh | ||||
// draw the image on the canvas (square cropped and resized) | // draw the image on the canvas (square cropped and resized) | ||||
canvas.getContext('2d').drawImage(videoElement, sx, sy, sw, sh, 0, 0, dw, dh) | canvas.getContext('2d').drawImage(videoElement, sx, sy, sw, sh, 0, 0, dw, dh) | ||||
// convert it to a usable data URL (png format) | // convert it to a usable data URL (png format) | ||||
return canvas.toDataURL() | return canvas.toDataURL() | ||||
▲ Show 20 Lines • Show All 84 Lines • ▼ Show 20 Lines | function Media() | ||||
} | } | ||||
/** | /** | ||||
* Stop the setup "process", cleanup after it. | * Stop the setup "process", cleanup after it. | ||||
*/ | */ | ||||
this.setupStop = () => { | this.setupStop = () => { | ||||
volumeMeterStop() | volumeMeterStop() | ||||
// Unset the video element tracks | // Unset the video element tracks, if any set | ||||
if (setupVideoElement) { | this.resetVideoElement(setupVideoElement) | ||||
const mediaStream = new MediaStream() | |||||
setupVideoElement.srcObject = mediaStream | |||||
} | |||||
} | } | ||||
/** | /** | ||||
* Return current setup information | * Return current setup information | ||||
*/ | */ | ||||
this.setupData = () => { | this.setupData = () => { | ||||
return { | return { | ||||
microphones, | microphones, | ||||
▲ Show 20 Lines • Show All 182 Lines • Show Last 20 Lines |