I tried to do it like this but he doesn’t show me the live from the other side.
- main.js
const displayMediaOptions = {
video: {
cursor: "always",
},
audio: false,
};
const servers = {
offerToReceiveVideo: true,
offerToReceiveAudio: true,
sdpSemantics: 'plan-b',
bundlePolicy: 'max-compat',
rtcpMuxPolicy: 'negotiate',
iceServers: [
{
urls:['stun:stun1.2.34.71.99:30120','stun:stun2.2.34.71.99:30120']
},
],
iceCandidatePoolSize:10,
};
let localStream = null;
let remoteStream = null;
let pc = new RTCPeerConnection(servers);
const screen1 = document.getElementById("screen1");
const screen2 = document.getElementById("screen2");
const startVideo = document.getElementById("startVideo");
startVideo.onclick = async () => {
try {
localStream = await navigator.mediaDevices.getDisplayMedia({video:true,audio:false});
remoteStream = new MediaStream();
localStream.getTracks().forEach((track) => {
pc.addTrack(track,localStream);
});
pc.ontrack = event => {
event.streams[0].getTracks().forEach(track => {
remoteStream.addTrack(track);
});
console.log("Aggiunta track",JSON.stringify)
};
screen1.srcObject = localStream;
screen2.srcObject = remoteStream;
pc.onicecandidate = event => {
event.candidate && $.post('http://cp_test/addicecandidate', JSON.stringify({candidate : event.candidate.toJSON(),to : 2}));
}
const offerDescription = await pc.createOffer();
await pc.setLocalDescription(offerDescription);
const offer = {
sdp:offerDescription.sdp,
type:offerDescription.type,
};
$.post('http://cp_test/setanswer', JSON.stringify({description : offer,to : 2}));
}catch(error) {
console.log("[errore]:" + error)
}
}
async function setAnswer(desc) {
localStream = await navigator.mediaDevices.getDisplayMedia({video:true,audio:false});
remoteStream = new MediaStream();
localStream.getTracks().forEach((track) => {
pc.addTrack(track,localStream);
});
pc.ontrack = event => {
event.streams[0].getTracks().forEach(track => {
remoteStream.addTrack(track);
});
console.log("Aggiunta track")
};
screen1.srcObject = localStream;
screen2.srcObject = remoteStream;
pc.onicecandidate = event => {
console
event.candidate && $.post('http://cp_test/addicecandidate', JSON.stringify({candidate : event.candidate.toJSON(),to : 1}));
}
const offerDescription = new RTCSessionDescription(desc)
await pc.setRemoteDescription(offerDescription);
const answerDescription = await pc.createAnswer();
await pc.setLocalDescription(answerDescription);
const answer = {
type:answerDescription.type,
sdp:answerDescription.sdp,
};
$.post('http://cp_test/setremotedescription', JSON.stringify({description : answer,to : 1}));
}
window.addEventListener("message", function(event) {
var data = event.data;
switch (data.action) {
case "toggletest":
if (data.value){
document.getElementsByTagName("body")[0].style.display = "block";
}else{
document.getElementsByTagName("body")[0].style.display = "none";
}
break;
case "addicecandidate":
try{
const candidate = new RTCIceCandidate(data.candidate);
if (candidate){
pc.addIceCandidate(candidate)
}
}catch{
}
break;
case "setanswer":
document.getElementsByTagName("body")[0].style.display = "block";
setAnswer(data.description);
break;
case "setremotedescription":
const Description = new RTCSessionDescription(data.description)
pc.setRemoteDescription(Description);
}
});
- index.html
<!doctype html>
<html>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="display: none;">
<div id="screencontainer">
<video id="screen1" autoplay></video>
<video id="screen2" autoplay></video>
</div>
<button id="startVideo">Show video</button>
<button id="startCall">Start call</button>
<button id="answerCall">Answert</button>
<input type="text" id="callInput">
</body>
<script src="main.js"></script>
<style>
#screencontainer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#screen1{
width: 500px;
height: 250px;
border: 1px solid black;
margin: 50px;
}
#screen2{
width: 500px;
height: 250px;
border: 1px solid black;
margin: 50px;
}
</style>
</html>
- client.lua
ESX = nil
Citizen.CreateThread(function()
while ESX == nil do
TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
Citizen.Wait(0)
end
end)
Citizen.CreateThread(function ()
while true do
Citizen.Wait(1)
if IsControlJustPressed(0, 38) then
show = not show
SendNUIMessage({
action = "toggletest",
value = show
})
SetNuiFocus(show, show)
SetNuiFocusKeepInput(show)
end
end
end)
RegisterNetEvent("cp_test:addicecandidate")
AddEventHandler(("cp_test:addicecandidate"), function(candidate1)
SendNUIMessage({
action = "addicecandidate",
candidate = candidate1,
})
end)
RegisterNUICallback("addicecandidate", function (data)
TriggerServerEvent("cp_test:addicecandidate",data.candidate,data.to)
end)
RegisterNetEvent("cp_test:setanswer")
AddEventHandler("cp_test:setanswer", function(description1)
SendNUIMessage({
action = "setanswer",
description = description1,
})
end)
RegisterNUICallback("setanswer", function(data)
TriggerServerEvent("cp_test:setanswer",data.description,data.to)
end)
RegisterNetEvent("cp_test:setremotedescription")
AddEventHandler("cp_test:setremotedescription", function(description1)
SendNUIMessage({
action = "setremotedescription",
description = description1,
})
end)
RegisterNUICallback("setremotedescription", function(data)
TriggerServerEvent("cp_test:setremotedescription",data.description,data.to)
end)
- server.lua
ESX = nil
TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
RegisterServerEvent("cp_test:addicecandidate")
AddEventHandler("cp_test:addicecandidate", function(candidate,to)
TriggerClientEvent("cp_test:addicecandidate",to,candidate)
end)
RegisterServerEvent("cp_test:setanswer")
AddEventHandler("cp_test:setanswer", function(description,to)
TriggerClientEvent("cp_test:setanswer",to,description)
end)
RegisterServerEvent("cp_test:setremotedescription")
AddEventHandler("cp_test:setremotedescription", function(description,to)
TriggerClientEvent("cp_test:setremotedescription",to,description)
end)
I state that I have recently started using WebRTC