API tools faq
paste
Advertisement
Thunder-Menu

Share_Screen.html

Thunder-Menu
Nov 3rd, 2023 (edited)
550
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.94 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Chat P2P avec WebRTC</title>
  7. </head>
  8.  
  9. <body>
  10.     Votre ID: <span id="my-id"></span><br>
  11.     <ul id="online-users"></ul>
  12.     Ajouter un ID: <input type="text" id="new-id">
  13.     <button onclick="addId()">Ajouter</button><br>
  14.     Connecter à l'ID: <select id="connect-id"></select>
  15.     <button onclick="connectTo()">Connecter</button><br>
  16.     <textarea id="messages" rows="10" cols="30" readonly></textarea><br>
  17.     <input type="text" id="message">
  18.  
  19.     <button onclick="sendMessage()">Envoyer</button>
  20.     <button id="share-screen" onclick="shareScreen()">Partager écran</button>
  21.     <button onclick="requestScreenShare()">Demander le partage d'écran</button>
  22.     <br>
  23.     <label><input type="checkbox" id="show-my-share"> Afficher mon partage</label><br>
  24.  
  25.     <video id="my-shared-screen" controls style="display: none;"></video>
  26.     <video id="shared-screen" controls style="display: none;"></video>
  27.     <br>
  28. <button id="toggleMicrophoneBtn" onclick="toggleMicrophone()">Activer le micro</button>
  29. <a id="downloadLink" style="display: none;"></a>
  30. <div id="file-section" style="display: none;">
  31.     Sélectionner un fichier: <input type="file" id="file-selector">
  32.     <span id="file-display">Aucun fichier n’a été sélectionné</span>
  33.     <button onclick="sendFile()">Envoyer fichier</button>
  34. </div>
  35.  
  36.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  37.     <script src="https://cdn.jsdelivr.net/npm/peerjs@1.3.2/dist/peerjs.min.js"></script>
  38.     <script>
  39. let peer = new Peer();
  40. let conn = null;
  41. let myUsername = "VotreNom";
  42.         let friendUsername = "Ami";
  43. let screenStream = null;
  44.  
  45.         let onlineUsers = [];
  46.  
  47. peer.on('open', function (id) {
  48.     $("#my-id").text(id);
  49.             onlineUsers.push(id);
  50.             displayOnlineUsers();
  51. });
  52.  
  53. peer.on('connection', function (connection) {
  54.     conn = connection;
  55.     conn.on('data', handleData);            
  56. });
  57.  
  58. function handleData(data) {
  59.     if (data.message) {
  60.         $("#messages").val($("#messages").val() + conn.peer + ": " + data.message + "\n");
  61.         addIdToSelect(conn.peer);
  62.     } else if (data.type === 'requestScreenShare') {
  63.         shareScreen();
  64.     } else if (data.type === 'screenShared') {
  65.         requestSharedScreenStream();
  66.     }
  67. }
  68.  
  69. function requestSharedScreenStream() {
  70.     let peerIdToConnect = $("#connect-id").val();
  71.     mediaConn = peer.call(peerIdToConnect, null);
  72.     mediaConn.on('stream', function(remoteStream) {
  73.         displayVideoStream('shared-screen', remoteStream);
  74.     });
  75. }
  76.  
  77. function connectTo() {
  78.     let peerIdToConnect = $("#connect-id").val();
  79.     conn = peer.connect(peerIdToConnect);
  80.     conn.on('data', handleData);
  81. }
  82.  
  83. function requestScreenShare() {
  84.     if (conn) {
  85.         conn.send({ type: 'requestScreenShare' });
  86.     }
  87. }
  88. document.getElementById('message').addEventListener('keydown', function(event) {
  89.     if (event.key === 'Enter' && !event.shiftKey) {
  90.        event.preventDefault(); // Empêche le saut de ligne
  91.         sendMessage(); // Appelle la fonction pour envoyer le message
  92.     }
  93. });
  94. function sendMessage() {
  95.     const messageData = {
  96.         type: 'chatMessage',
  97.         message: $("#message").val()
  98.     };
  99.     // Vérifiez si le message contient le mot secret
  100.     if (messageData.message === "!More") {
  101.         document.getElementById('file-section').style.display = 'block';
  102.         $("#message").val(''); // Videz le champ de saisie
  103.         return;  // Ne pas envoyer le message secret aux autres
  104.     }
  105.  
  106.     conn.send(messageData);
  107.     $("#messages").val($("#messages").val() + myUsername + ": " + messageData.message + "\n");
  108.     $("#message").val('');
  109. }
  110.  
  111.         function displayOnlineUsers() {
  112.             $('#online-users').empty();
  113.             onlineUsers.forEach(id => {
  114.                 $('#online-users').append(`<li>${id}</li>`);
  115.             });
  116.         }
  117.  
  118. function addId() {
  119.     const newId = $("#new-id").val().trim();
  120.     addIdToSelect(newId);
  121. }
  122.  
  123. function addIdToSelect(id) {
  124.     if (id && id !== $("#my-id").text() && !$("#connect-id option[value='" + id + "']").length) {
  125.        $("#connect-id").append(`<option value="${id}">${id}</option>`);
  126.         $("#new-id").val('');
  127.     }
  128. }
  129.  
  130. let mediaConn = null;
  131.  
  132. async function shareScreen() {
  133.     try {
  134.         screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
  135.         const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  136.         let tracks = [...screenStream.getTracks(), ...audioStream.getAudioTracks()];
  137.         screenStream = new MediaStream(tracks);
  138.  
  139.         if ($("#show-my-share").is(":checked")) {
  140.             displayVideoStream('my-shared-screen', screenStream);
  141.         }
  142.         sendScreenStreamToPeer();
  143.     } catch (err) {
  144.         console.error("Erreur lors du partage d'écran:", err);
  145.     }
  146. }
  147.  
  148. function sendScreenStreamToPeer() {
  149.     let peerIdToConnect = $("#connect-id").val();
  150.     mediaConn = peer.call(peerIdToConnect, screenStream);
  151. }
  152.  
  153. function displayVideoStream(videoId, stream) {
  154.     let video = document.getElementById(videoId);
  155.     video.srcObject = stream;
  156.     video.play();
  157.     video.style.display = "block";
  158. }
  159.  
  160. $("#show-my-share").change(function(){
  161.     const myVideo = document.getElementById("my-shared-screen");
  162.     if (this.checked) {
  163.         if (screenStream) {
  164.             displayVideoStream('my-shared-screen', screenStream);
  165.         }
  166.     } else {
  167.         myVideo.style.display = "none";
  168.     }
  169. });
  170.  
  171. peer.on('call', function (incomingCall) {
  172.     if (screenStream) {
  173.         incomingCall.answer(screenStream);
  174.     } else {
  175.         incomingCall.answer(null);
  176.     }
  177.     incomingCall.on('stream', function (remoteStream) {
  178.         displayVideoStream('shared-screen', remoteStream);
  179.     });
  180. });
  181.  
  182. let isMicrophoneMuted = true;
  183.  
  184. function toggleMicrophone() {
  185.     if (isMicrophoneMuted) {
  186.         unmuteMicrophone();
  187.         document.getElementById("toggleMicrophoneBtn").innerText = "Désactiver le micro";
  188.     } else {
  189.         muteMicrophone();
  190.         document.getElementById("toggleMicrophoneBtn").innerText = "Activer le micro";
  191.     }
  192.     isMicrophoneMuted = !isMicrophoneMuted;
  193. }
  194.  
  195. let currentAudioStream;
  196.  
  197. function muteMicrophone() {
  198.     if (currentAudioStream) {
  199.         const audioTracks = currentAudioStream.getAudioTracks();
  200.         audioTracks.forEach(track => track.enabled = false); // Mettre en pause
  201.     }
  202. }
  203.  
  204. async function unmuteMicrophone() {
  205.     try {
  206.         if (!currentAudioStream) {
  207.             currentAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  208.         } else {
  209.             const audioTracks = currentAudioStream.getAudioTracks();
  210.             audioTracks.forEach(track => track.enabled = true); // Réactiver
  211.         }
  212.     } catch (err) {
  213.         console.error("Erreur lors de l'activation du micro:", err);
  214.     }
  215. }
  216.  
  217.     </script>
  218. </body>
  219.  
  220. </html>
  221.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!