116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
const displayMediaOptions = {
|
|
video: {
|
|
displaySurface: "browser",
|
|
},
|
|
audio: {
|
|
suppressLocalAudioPlayback: false,
|
|
},
|
|
preferCurrentTab: false,
|
|
selfBrowserSurface: "exclude",
|
|
systemAudio: "include",
|
|
surfaceSwitching: "include",
|
|
monitorTypeSurfaces: "include",
|
|
};
|
|
|
|
const peerConnection = new RTCPeerConnection();
|
|
const broadcast = new BroadcastChannel("screen_sharing");
|
|
|
|
function main() {
|
|
peerConnection.onconnectionstatechange = (evt) => {
|
|
console.log("Connection state changed", evt)
|
|
}
|
|
|
|
peerConnection.oniceconnectionstatechange = () => {
|
|
console.log('ICE state: ',peerConn.iceConnectionState);
|
|
}
|
|
|
|
peerConnection.ontrack = function (e) {
|
|
var vid = document.createElement("video");
|
|
document.body.appendChild(vid);
|
|
vid.srcObject = e.streams[0];
|
|
};
|
|
|
|
broadcast.onmessage = (evt) => {
|
|
const message = JSON.parse(evt.data);
|
|
console.log("Received message", message)
|
|
if (message.type === "answer") {
|
|
peerConnection.setRemoteDescription(
|
|
new RTCSessionDescription(message.payload),
|
|
() => {},
|
|
error,
|
|
);
|
|
}
|
|
};
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const b64Offer = urlParams.get('offer');
|
|
if (!b64Offer) return;
|
|
|
|
const offer = JSON.parse(atob(b64Offer));
|
|
peerConnection.setRemoteDescription(
|
|
new RTCSessionDescription(offer),
|
|
() => {
|
|
peerConnection.createAnswer(function (answer) {
|
|
peerConnection.setLocalDescription(
|
|
answer,
|
|
function () {
|
|
broadcast.postMessage(JSON.stringify({
|
|
type: 'answer',
|
|
payload: answer
|
|
}))
|
|
},
|
|
error,
|
|
);
|
|
}, error);
|
|
},
|
|
error,
|
|
);
|
|
}
|
|
|
|
function shareScreen() {
|
|
return navigator.mediaDevices
|
|
.getDisplayMedia(displayMediaOptions)
|
|
.then(captureStream => {
|
|
peerConnection.addStream(captureStream);
|
|
|
|
peerConnection.createOffer(function (offer) {
|
|
peerConnection.setLocalDescription(
|
|
offer,
|
|
() => {
|
|
const b64Offer = btoa(JSON.stringify(offer))
|
|
const url = "https://127.0.0.1:" + window.location.port + "?offer=" + encodeURIComponent(b64Offer)
|
|
console.log(url)
|
|
fetch("/api/v1/cast", {
|
|
method: 'POST',
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
"url": url,
|
|
})
|
|
})
|
|
},
|
|
error,
|
|
);
|
|
}, error);
|
|
})
|
|
.catch(err => {
|
|
console.error(err)
|
|
})
|
|
}
|
|
|
|
function endCall() {
|
|
var videos = document.getElementsByTagName("video");
|
|
for (var i = 0; i < videos.length; i++) {
|
|
videos[i].pause();
|
|
}
|
|
|
|
peerConnection.close();
|
|
}
|
|
|
|
function error(err) {
|
|
console.error(err);
|
|
endCall();
|
|
}
|
|
|
|
main() |