45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { Button } from 'UI'
|
|
|
|
function ScreenSharing() {
|
|
const videoRef = React.createRef<HTMLVideoElement>()
|
|
|
|
function handleSuccess(stream) {
|
|
// startButton.disabled = true;
|
|
//videoRef.current?.srcObject = stream;
|
|
// @ts-ignore
|
|
window.stream = stream; // make variable available to browser console
|
|
|
|
stream.getVideoTracks()[0].addEventListener('ended', () => {
|
|
console.log('The user has ended sharing the screen');
|
|
});
|
|
}
|
|
|
|
function handleError(error) {
|
|
console.log(`getDisplayMedia error: ${error.name}`, error);
|
|
}
|
|
|
|
const startScreenSharing = () => {
|
|
// @ts-ignore
|
|
navigator.mediaDevices.getDisplayMedia({video: true})
|
|
.then(handleSuccess, handleError);
|
|
}
|
|
|
|
const stopScreenSharing = () => {
|
|
// @ts-ignore
|
|
window.stream.stop()
|
|
console.log('Stop screen sharing')
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-red">
|
|
<video ref={ videoRef } id="screen-share" autoPlay loop muted></video>
|
|
<div className="absolute left-0 right-0 bottom-0">
|
|
<Button onClick={startScreenSharing}>Start</Button>
|
|
<Button onClick={stopScreenSharing}>Stop</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ScreenSharing
|