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()
|