user-avatar
ماهان ملک جاری
3 سال پیش توسط ماهان ملک جاری مطرح شد
0 پاسخ

مشکل در ساخت پروژه ی Web rtc

سلام.
ببخشید من در حال ساخت یک پروژه ی Webrtc هستم.
که میشه توش چت و ویدیو کال گرفت.

اما یک مشکلی دارم
وقتی که پرسونال آیدی طرف رو میزنی اجرا نمیشه :

سورس کد index.html :

<html>
    <head>
        <title>Meet the strangers</title>
        <link rel='stylesheet' href='./css/style.css'>
    </head>
    <body>
        <div class='main_container'>
        <div class='dashboard_container'>
            <div class='logo_container'>
                <img src='./utils/images/logo.png'></img>
            </div>
            <div>
                <div class='description_container'>
                    <p class='description_container_paragraph'>
                        Talk with other user by passing his personal code or talk with strangers!
                    </p>
                </div>
                <div class='personal_code_container'>
                    <div class='personal_code_title_container'>
                        <p class='personal_code_title_paragraph'>
                            Your personal code
                        </p>
                    </div>
                    <div class="personal_code_value_container">
                        <p class='personal_code_value_paragraph' id='personal_code_paragraph'>DDDDDD</p>
                        <button class='personal_code_copy_button' id='personal_code_copy_button'>
                            <img src='./utils/images/copyButton.png'></img>
                        </button>
                    </div>
                </div>
                </div>
                <div class='personal_code_connecting_container'>
                    <p class='personal_code_connecting_paragraph'>Personal Code</p>
                    <div class='personal_code_connecting_input_container'>
                        <input class='personal_code_input' id='personal_code_input'></input>
                    </div>
                    <div class='personal_code_connecting_buttons_container'>
                        <button class='connecting_button' id='personal_code_chat_button'>
                            <img src='./utils/images/chatButton.png' class='connecting_buttons_image'></img>
                        </button>
                        <button class='connecting_button display_none' id='personal_code_video_button'>
                            <img src='./utils/images/videoButton.png' class='connecting_buttons_image'></img>
                        </button>
                    </div>
                </div>
                <div class='stranger_connecting_container'>
                    <p class='stranger_title_container'>Stranger</p>
                    <div class='stranger_buttons_container'>
                        <button class='connecting_button' id='stranger_chat_button'>
                            <img src='/utils/images/chatButton.png' class='connecting_buttons_image'></img>
                        </button>
                        <button class='connecting_button display_none' id='stranger_video_button'>
                            <img src='/utils/images/videoButton.png' class='connecting_buttons_image'></img>
                        </button>
                    </div>
                </div>
                <div class='checkbox_container'>
                    <div class='checkbox_connection' id='allow_strangers_checkbox'>
                        <img id='allow_strangers_checkbox_image' class='display_none' src='./utils/images/check.png'></img>
                    </div>
                    <p class='checkbox_container_paragraph'>Allow connection from strangers</p>
                </div>
                <div class='dashboard_blur display_none' id='dashboard_blur'></div>
            </div>
        <div class='call_container'>
            <div class='videos_container'>
                <div id='video_placeholder' class='videos_placeholder'>
                    <img src='./utils/images/logo.png'></img>
                </div>
                <video class='remote_video display_none' autoplay id='remote_video'></video>
                <div class='local_video_container'>
                    <video class='local_video' id='local_video'  autoplay></video>
                </div>
                <div class='call_buttons_container display_none' id='call_buttons'>
                    <button class='call_button_small' id='mic_button'>
                        <img src='./utils/images/mic.png' id='mic_button_image'></img>
                    </button>
                    <button class='call_button_small' id='camera_button'>
                        <img src='./utils/images/camera.png' id='camera_button_image'></img>
                    </button>
                    <button class='call_button_large' id='hang_up_button'>
                        <img src='./utils/images/hangUp.png'></img>
                    </button>
                    <button class='call_button_small' id='screen_sharing_button'>
                        <img src='./utils/images/switchCameraScreenSharing.png'></img>
                    </button>
                    <button class='call_button_small' id='start_recording_button'>
                        <img src='./utils/images/recordingStart.png'></img>
                    </button>
                </div>
                <div class='finish_chat_button_container display_none' id='finish_chat_button_container'>
                    <button class='call_button_large' id='finish_chat_call_button'>
                        <img src='./utils/images/hangUp.png'></img>
                    </button>
                </div>
                <div class='video_recording_buttons_container display_none' id='video_recording_buttons'>
                    <button id='pause_recording_button'>
                        <img src='./utils/images/pause.png'></img>
                    </button>
                    <button id='resume_recording_button' class='display_none'>
                        <img src='./utils/images/resume.png'></img>
                    </button>
                    <button id='stop_recording_button'>
                        Stop recording
                    </button>
                </div>
            </div>
        </div>
        <div class='messenger_container'>
            <div class='messages_container' id='messages_container'></div>
            <div class='new_message_container display_none' id='new_message'>
                <input class='new_message_input' id='new_message_input' type='text' placeholder="Type your message..."></input>
                <button class='send_message_button' id='send_message_button'>
                    <img class='send_message_button_image' src='./utils/images/sendMessageButton.png'></image>
                </button>
            </div>
        </div>
        <div id='dialog'></div>    
        </div>
        <script src='/socket.io/socket.io.js'></script>
        <script src='./js/elements.js' type='module'></script>
        <script src='./js/constants.js' type='module'></script>
        <script src='./js/ui.js' type='module'></script>
        <script src='./js/wss.js' type='module'></script>
        <script src='./js/store.js' type='module'></script>
        <script src='./js/webRTCHandler.js' type='module'></script>
        <script src='./js/recordingUtils.js' type='module'></script>
        <script src='./js/strangerUtils.js' type='module'></script>
        <script src='./js/main.js' type='module'></script>
    </body>
</html>

سورس کد ui.js :

import * as constants from "./constants.js";
import * as elements from "./elements.js";

export const updatePersonalCode = (personalCode) => {
  const personalCodeParagraph = document.getElementById(
    "personal_code_paragraph"
  );
  personalCodeParagraph.innerHTML = personalCode;
};

export const updateLocalVideo = (stream) => {
  const localVideo = document.getElementById("local_video");
  localVideo.srcObject = stream;

  localVideo.addEventListener("loadedmetadata", () => {
    localVideo.play();
  });
};

export const showVideoCallButtons = () => {
  const personalCodeVideoButton = document.getElementById(
    "personal_code_video_button"
  );
  const strangerVideoButton = document.getElementById("stranger_video_button");

  showElement(personalCodeVideoButton);
  showElement(strangerVideoButton)
}

export const updateRemoteVideo = (stream) => {
  const remoteVideo = document.getElementById("remote_video");
  remoteVideo.srcObject = stream;
};

export const showIncomingCallDialog = (
  callType,
  acceptCallHandler,
  rejectCallHandler
) => {
  const callTypeInfo =
    callType === constants.callType.CHAT_PERSONAL_CODE ? "Chat" : "Video";

  const incomingCallDialog = elements.getIncomingCallDialog(
    callTypeInfo,
    acceptCallHandler,
    rejectCallHandler
  );

  // removing all dialogs inside HTML dialog element
  const dialog = document.getElementById("dialog");
  dialog.querySelectorAll("*").forEach((dialog) => dialog.remove());

  dialog.appendChild(incomingCallDialog);
};

export const showCallingDialog = (rejectCallHandler) => {
  const callingDialog = elements.getCallingDialog(rejectCallHandler);

  // removing all dialogs inside HTML dialog element
  const dialog = document.getElementById("dialog");
  dialog.querySelectorAll("*").forEach((dialog) => dialog.remove());

  dialog.appendChild(callingDialog);
};

export const showNoStrangerAvailableDiolog = () => {
  const infoDialog = elements.getInfoDialog(
    "No Stranger available", 
    "Please try again later"
  );

  if (infoDialog) {
    const dialog = document.getElementById("dialog");
    dialog.appendChild(infoDialog);

    setTimeout(() => {
      removeAllDialogs();
    }, [4000]);
  }
}

export const showInfoDialog = (preOfferAnswer) => {
  let infoDialog = null;

  if (preOfferAnswer === constants.preOfferAnswer.CALL_REJECTED) {
    infoDialog = elements.getInfoDialog(
      "Call rejected",
      "Callee rejected your call"
    );
  }

  if (preOfferAnswer === constants.preOfferAnswer.CALLEE_NOT_FOUND) {
    infoDialog = elements.getInfoDialog(
      "Callee not found",
      "Please check personal code"
    );
  }

  if (preOfferAnswer === constants.preOfferAnswer.CALL_UNAVAILABLE) {
    infoDialog = elements.getInfoDialog(
      "I dont know why it is starting",
      "Fuc@ you Mahan you should think"
    );
  }

  if (infoDialog) {
    const dialog = document.getElementById("dialog");
    dialog.appendChild(infoDialog);

    setTimeout(() => {
      removeAllDialogs();
    }, [4000]);
  }
};

export const removeAllDialogs = () => {
  const dialog = document.getElementById("dialog");
  dialog.querySelectorAll("*").forEach((dialog) => dialog.remove());
};

export const showCallElements = (callType) => {
  if (
    callType === constants.callType.CHAT_PERSONAL_CODE || 
    callType === constants.callType.CHAT_STRANGER
  ) {
    showChatCallElements();
  }

  if (
    callType === constants.callType.VIDEO_PERSONAL_CODE ||
    callType === constants.callType.VIDEO_STRANGER
  ) {
    showVideoCallElements();
  }
};

const showChatCallElements = () => {
  const finishConnectionChatButtonContainer = document.getElementById(
    "finish_chat_button_container"
  );
  showElement(finishConnectionChatButtonContainer);

  const newMessageInput = document.getElementById("new_message");
  showElement(newMessageInput);
  //block panel
  disableDashboard();
};

const showVideoCallElements = () => {
  const callButtons = document.getElementById("call_buttons");
  showElement(callButtons);

  const placeholder = document.getElementById("video_placeholder");
  hideElement(placeholder);

  const remoteVideo = document.getElementById("remote_video");
  showElement(remoteVideo);

  const newMessageInput = document.getElementById("new_message");
  showElement(newMessageInput);
  //block panel
  disableDashboard();
};

// ui call buttons

const micOnImgSrc = "./utils/images/mic.png";
const micOffImgSrc = "./utils/images/micOff.png";

export const updateMicButton = (micActive) => {
  const micButtonImage = document.getElementById("mic_button_image");
  micButtonImage.src = micActive ? micOffImgSrc : micOnImgSrc;
};

const cameraOnImgSrc = "./utils/images/camera.png";
const cameraOffImgSrc = "./utils/images/cameraOff.png";

export const updateCameraButton = (cameraActive) => {
  const cameraButtonImage = document.getElementById("camera_button_image");
  cameraButtonImage.src = cameraActive ? cameraOffImgSrc : cameraOnImgSrc;
};

// ui messages
export const appendMessage = (message, right = false) => {
  const messagesContainer = document.getElementById("messages_container");
  const messageElement = right
    ? elements.getRightMessage(message)
    : elements.getLeftMessage(message);
  messagesContainer.appendChild(messageElement);
};

export const clearMessenger = () => {
  const messagesContainer = document.getElementById("messages_container");
  messagesContainer.querySelectorAll("*").forEach((n) => n.remove());
};

// recording 
export const showRecordingPanel = () => {
  const recordingButtons = document.getElementById("video_recording_buttons");
  showElement(recordingButtons);

  // hide start recording button if it is active
  const startRecordingButton = document.getElementById(
    "start_recording_button"
  );
  hideElement(startRecordingButton);
};

export const resetRecordingButtons = () => {
  const startRecordingButton = document.getElementById(
    "start_recording_button"
  );
  const recordingButtons = document.getElementById("video_recording_buttons");

  hideElement(recordingButtons);
  showElement(startRecordingButton);
};

export const switchRecordingButton = (switchResumeButton = false) => {
  const resumeButton = document.getElementById('resume_recording_button');
  const pauseButton = document.getElementById('pause_recording_button');

  if (switchResumeButton) {
    hideElement(pauseButton);
    showElement(resumeButton);
  } else {
    hideElement(resumeButton);
    showElement(pauseButton);
  }
}

// ui after hanged up
export const updateUIAfterHangUp = (callType) => {
  enableDashboard();

  //hide the call buttons
  if (
    callType === constants.callType.VIDEO_PERSONAL_CODE || 
    callType === constants.callType.VIDEO_STRANGER
  ) {
      const callButtons = document.getElementById('call_buttons');
      hideElement(callButtons);
  } else {
    const chatCallButtons = document.getElementById(
      "finish_chat_button_container"
    );
    hideElement(chatCallButtons);
  }

  const newMessageInput = document.getElementById("new_message");
  hideElement(newMessageInput);
  clearMessenger();

  updateMicButton(false);
  updateCameraButton(false);

  // hide remote video and show placeholder
  const remoteVideo = document.getElementById("remote_video");
  hideElement(remoteVideo);

  const placeholder = document.getElementById("video_placeholder");
  showElement(placeholder);

  removeAllDialogs();
};

// changing status of checkbox
export const updateStrangerCheckbox = (allowConnections) => {
  const checkboxCheckImg = document.getElementById("allow_strangers_checkbox_image");

  allowConnections 
    ? showElement(checkboxCheckImg) 
    : hideElement(checkboxCheckImg);
};

// ui helper functions

const enableDashboard = () => {
  const dashboardBlocker = document.getElementById("dashboard_blur");
  if (!dashboardBlocker.classList.contains("display_none")) {
    dashboardBlocker.classList.add("display_none");
  }
};

const disableDashboard = () => {
  const dashboardBlocker = document.getElementById("dashboard_blur");
  if (dashboardBlocker.classList.contains("display_none")) {
    dashboardBlocker.classList.remove("display_none");
  }
};

const hideElement = (element) => {
  if (!element.classList.contains("display_none")) {
    element.classList.add("display_none");
  }
};

const showElement = (element) => {
  if (element.classList.contains("display_none")) {
    element.classList.remove("display_none");
  }
};

وقتی که روی چت یا ویدیو کال میزنم این دستور if (preOfferAnswer === constants.preOfferAnswer.CALL_UNAVAILABLE) { infoDialog = elements.getInfoDialog( "I dont know why it is starting", "Fuc@ you Mahan you should think" ); }
که توی ui.js هست اجرا میشه.
لطفا اگه چیزی میدونید کمک کنید

ببخشید بابت تگ @Arshiamohammadei @Raymond @MortezaVaezi @Pouyab @ossvahid

گزینش سوالات
همه سوالات حل شده حل نشده بدون پاسخ
دسته ‌بندی سوالات
لاراول طراحی_وب جاوااسکریپت فریمورک_ها وردپرس امنیت Html_Css جاوا PHP فیدبک_سایت جی_کوئری تجربه_کاربری رابط_کاربری متفرقه اندروید پایتون nodejs vuejs آنگولار reactjs فلاتر سیستم__عامل_ها شبکه سخت_افزار عمومی سئو
تگ‌های محبوب
ثبت پرسش جدید

به همدیگه کمک کنیم

به ماهان ملک جاری کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام