JSFiddle示例有效，但不適用於GitHub Pages

Question

此代碼在JSFiddle.net上有效：

的HTML：

<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>

CSS：

video {
  width: 40%;
  border-radius:15px;
  margin: 5px 10px;
}

js：

var connection = new RTCMultiConnection();

// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

// all below lines are optional; however recommended.

connection.session = {
    audio: true,
    video: true
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

connection.onstream = function(event) {
    document.body.appendChild( event.mediaElement );
};

var predefinedRoomId = prompt('Please enter room-id', 'xyzxyzxyz');

connection.openOrJoin(predefinedRoomId);

但是當我將其全部結合並通過添加通知js代碼段將其放到GitHub Pages托管上時，該js根本看不到激活，而僅顯示了基本頁面。

HTML / CSS：

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<title>
 Instant Call
</title>
<style>
video {
  width: 40%;
  border-radius:15px;
  margin: 5px 10px;
}
</style>
<body>
  <p>Instant Conference</p>
  <script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<script src ="notifi.js"></script>
</body>
</html>

notifi.JS：

if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...');
} else {
  // Note that we can't call requestPermission from here as we are in the
  // callback function and not triggered just on user action
  console.log('You have to click on "Set notification permissions for this page" ' + 'first to be able to receive notifications.');
  return;
}



var connection = new RTCMultiConnection();

// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

// all below lines are optional; however recommended.

connection.session = {
    audio: true,
    video: true
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

connection.onstream = function(event) {
    document.body.appendChild( event.mediaElement );
};

var predefinedRoomId = prompt('Please enter room-id', 'xyzxyzxyz');

connection.openOrJoin(predefinedRoomId);

||||||||||||||||||||||||||||||||||||||||||||||| ||||||| \\編輯美國東部時間8 / 17-5：17PM

現在，它僅成功顯示在連接的一端（一個用戶/設備）****

當用戶加入聊天室時，它應該通知所有用戶，並同時顯示他們的兩個實時網絡攝像頭。 在JSfiddle中，此方法有效，但在github頁面上無效。

||||||||||||||||||||||||||||||||| 編輯美國東部時間8/17/18 8:47

得到了該行的所有預期工作，該行應通知參與者新加入的用戶：

if (connection.newParticipant === true) {
  var notification = new Notification("New Call!");
}

這是完整的代碼：

<!DOCTYPE html>
<html>
<style>
video {
  width: 40%;
  border-radius:15px;
  margin: 5px 10px;
}
</style>
<body>

<h1>Instant Call</h1>


<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<script>
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }
  // Let's check whether notification permissions have already been granted
  //else if (Notification.permission === "granted") {

   // var notification = new Notification("Hi there!");
    // If it's okay let's create a notification
  //}
  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let's create a notification
     // if (permission === "granted") {

     // }
    });
  }
  // At last, if the user has denied notifications, and you 
  // want to be respectful there is no need to bother them any more.

var connection = new RTCMultiConnection();
// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
// all below lines are optional; however recommended.
connection.session = {
    audio: true,
    video: true,
    data:   true,
    //screen: true,
    //oneway: true
};
connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};
connection.onstream = function(event) {
    document.body.appendChild( event.mediaElement );
  //var notification = new Notification("New Call!");
};
var predefinedRoomId = prompt('Please enter room-id', 'xyzxyzxyz');

connection.openOrJoin(predefinedRoomId);

if (connection.newParticipant === true) {
  var notification = new Notification("New Call!");
}
</script>



</body>
</html>

Answer 1

問題是如果您將其刪除，則此返回有效，應該在函數內部使用return：

if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...');
} else {
  // Note that we can't call requestPermission from here as we are in the
  // callback function and not triggered just on user action
  console.log('You have to click on "Set notification permissions for this page" ' + 'first to be able to receive notifications.');
  **return;**
}

return語句結束函數執行並指定要返回給函數調用者的值。 MDN

JSFiddle示例有效，但不適用於GitHub Pages

問題描述

1 個解決方案

解決方案1
2 已采納 2018-08-17 20:31:38

JSFiddle示例有效，但不適用於GitHub Pages

問題描述

1 個解決方案

解決方案1 2 已采納 2018-08-17 20:31:38

解決方案1
2 已采納 2018-08-17 20:31:38