سلام.
ببخشید من در حال ساخت یک پروژه ی 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
به ماهان ملک جاری کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟