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 186 Lines • Show Last 20 Lines | |||||