ビデオチャットと位置情報共有を一画面で行いたいが、どちらか片方した動かない

Question

前提・実現したいこと

初心者です。
温かい目で見ていただけると嬉しいです...

「地図とビデオチャットを同一画面に表示したい」

firebaseとjquery、skywayを使って位置情報を共有しながらビデオチャットができるサービスを開発しております。

発生している問題・エラーメッセージ

<script>の記載順序を変えると(具体的にはfirebase-app(-auth、-datebase含め).jsとjquery.jsの順番) 位置共有は出来るがビデオチャット出来ず ビデオチャット出来るが位置共有出来ず といった感じです。 検証してみましたが、エラー見当たらず...   ### 該当のソースコード 文字数制限の為、スクショで失礼します。 index.html   ```firebaseJs var firebaseConfig = { apiKey: "AIzaSyDJXB4r9XuNH1IWamz_at7e8pq7eJG6BiY", authDomain: "hyoi-1221.firebaseapp.com", databaseURL: "https://hyoi-1221.firebaseio.com", projectId: "hyoi-1221", storageBucket: "hyoi-1221.appspot.com", messagingSenderId: "697230382722", appId: "1:697230382722:web:82298504fbba3c715c469b" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // データベースの参照を得る var db = firebase.database(); var user_db = db.ref("/users"); var map = null; var watchID; var users = {}; // Google Mapsの初期化 function initMap() { map = new google.maps.Map($('map'), { center: {"lat":35.65862127808128, "lng":139.74542051553726}, scrollwheel: false, zoom: 12 }); // ログインボタンのイベント $("login_btn").onclick = login_btn_onclick; // ユーザー認証イベントの設定 firebase.auth().onAuthStateChanged(authStateChange); } // ログインボタンを押した時 function login_btn_onclick() { var cur = firebase.auth().currentUser; if (!cur) { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } else { firebase.auth().signOut(); } } // 認証状態が変化したとき function authStateChange(user) { if (user) { //ログインした $("login_btn").innerHTML = user.displayName + "のログアウト"; setEvent(); } else { // ログアウトした $("login_btn").innerHTML = "ログイン"; } } // イベントの設定 function setEvent() { // 追加されたとき user_db.limitToLast(20).on("child_added", checkValue); // 変更があったとき user_db.limitToLast(20).on("child_changed", checkValue); // 位置情報を監視する if (!"geolocation" in navigator) { alert("位置情報を利用できません。"); } else { watchID = navigator.geolocation.watchPosition(updatePosition); } } // 位置情報を取得できたとき function updatePosition(p) { var lat = p.coords.latitude; var lng = p.coords.longitude; var user = firebase.auth().currentUser; if (!user) return; // データベースに値を記録する user_db.child(user.uid).set({ username: user.displayName || '', photo: user.photoURL || '', latitude: lat || 0, longitude: lng || 0, timestamp: (new Date()).getTime() }); if (map == null) return; // 自分のいる位置を中心にする map.setCenter({"lat":lat, "lng":lng}); console.log("map=", lat, lng); } // データベースの値に応じて地図上にマークをつける function checkValue(data) { v = data.val(); var lat = v.latitude; var lng = v.longitude; var key = data.key; var photo = v.photo || ''; var bar = '<img width=30 height=30 src="' + photo + '">' + ' ' + v.username + '<p><b>ルーム名</b>は<b>ユーザー名</b>を入力して下さい。</p>'+ '<a href="https://hyoiweb.github.io/hyoiOnline/" target="_blank">'+ '<img src="images/視聴ボタン.png" alt="視聴ボタン"></a> '; if (map == null) return; // 地図上にマークをつける if (!(key in users)) { var marker = new google.maps.Marker({ position: {"lat": lat, "lng": lng}, draggable: true }); var info = new google.maps.InfoWindow({ content: bar}); marker.setMap(map); marker.addListener('click', function() { info.open(map, marker); }); users[key] = { "marker": marker, "info": info }; } else { var marker = users[key].marker; marker.setPosition({"lat":lat, "lng":lng}); } } function $(id) { return document.getElementById(id); } ``` ```skywayJs /* eslint-disable require-jsdoc */ 'use strict' $(function() { // Peer object const peer = new Peer({ key: "bc3292a3-35bd-4289-ac50-359c8100377c", debug: 3, }); let localStream; let room; peer.on('open', () => { $('#my-id').text(peer.id); // Get things started step1(); }); peer.on('error', err => { alert(err.message); // Return to step 2 if error occurs step2(); }); $('#make-call').on('submit', e => { e.preventDefault(); // Initiate a call! const roomName = $('#join-room').val(); if (!roomName) { return; } room = peer.joinRoom('mesh_multi_' + roomName, {stream: localStream}); $('#room-id').text(roomName); step3(room); }); $('#end-call').on('click', () => { $('#chatbox-'+room.name).hide() // 切断時にチャットボックスを隠す room.close(); step2(); }); // Retry if getUserMedia fails $('#step1-retry').on('click', () => { $('#step1-error').hide(); step1(); }); // set up audio and video input selectors const audioSelect = $('#audioSource'); const videoSelect = $('#videoSource'); const selectors = [audioSelect, videoSelect]; navigator.mediaDevices.enumerateDevices() .then(deviceInfos => { const values = selectors.map(select => select.val() || ''); selectors.forEach(select => { const children = select.children(':first'); while (children.length) { select.remove(children); } }); for (let i = 0; i !== deviceInfos.length; ++i) { const deviceInfo = deviceInfos[i]; const option = $('<option>').val(deviceInfo.deviceId); if (deviceInfo.kind === 'audioinput') { option.text(deviceInfo.label || 'Microphone ' + (audioSelect.children().length + 1)); audioSelect.append(option); } else if (deviceInfo.kind === 'videoinput') { option.text(deviceInfo.label || 'Camera ' + (videoSelect.children().length + 1)); videoSelect.append(option); } } selectors.forEach((select, selectorIndex) => { if (Array.prototype.slice.call(select.children()).some(n => { return n.value === values[selectorIndex]; })) { select.val(values[selectorIndex]); } }); videoSelect.on('change', step1); audioSelect.on('change', step1); }); function step1() { // Get audio/video stream const audioSource = $('#audioSource').val(); const videoSource = $('#videoSource').val(); const constraints = { audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, video: {deviceId: videoSource ? {exact: videoSource} : undefined, facingMode: "environment"} }; navigator.mediaDevices.getUserMedia(constraints).then(stream => { $('#my-video').get(0).srcObject = stream; localStream = stream; if (room) { room.replaceStream(stream); return; } step2(); }).catch(err => { $('#step1-error').show(); console.error(err); }); } function step2() { $('#their-videos').empty(); $('#step1, #step3').hide(); $('#step2').show(); $('#join-room').focus(); } function step3(room) { // chatboxを追加する const chatbox = $('<div></div>').addClass('chatbox').attr('id', 'chatbox-'+room.name); const header = $('<h4></h4>').html('Room: <strong>' + room.name + '</strong>'); const messages = $('<div><em>Peer connected.</em></div>').addClass('messages'); chatbox.append(header); chatbox.append(messages); $('#chatframe').append(chatbox); // メッセージ送信部分 $('#sendtextform').on('submit', e => { e.preventDefault(); // form送信を抑制 const msg = $('#mymessage').val(); // ルームに送って自分のところにも反映 room.send(msg); messages.prepend('<div><span class="you">You: </span>' + msg + '</div>'); $('#mymessage').val(''); }); // チャットとかファイルが飛んできたらdataでonになる // ここではファイルは使わないのでもとのサンプルのif文はけしておく room.on('data', message => { messages.prepend('<div><span class="peer">' + message.src.substr(0,8) + '</span>: ' + message.data + '</div>'); }); room.on('peerJoin', peerId => { messages.prepend('<div><span class="peer">' + peerId.substr(0,8) + '</span>: has joined the room </div>'); }); room.on('peerLeave', peerId => { messages.prepend('<div><span class="peer">' + peerId.substr(0,8) + '</span>: has left the room </div>'); }); // streamが飛んできたら相手の画面を追加する room.on('stream', stream => { const peerId = stream.peerId; const id = 'video_' + peerId + '_' + stream.id.replace('{', '').replace('}', ''); $('#their-videos').append($( '<div class="video_' + peerId +'" id="' + id + '">' + '<label>' + stream.peerId + ':' + stream.id + '</label>' + '<video class="remoteVideos" autoplay playsinline>' + '</div>')); const el = $('#' + id).find('video').get(0); el.srcObject = stream; el.play(); }); room.on('removeStream', function(stream) { const peerId = stream.peerId; $('#video_' + peerId + '_' + stream.id.replace('{', '').replace('}', '')).remove(); }); // UI stuff room.on('close', step2); room.on('peerLeave', peerId => { $('.video_' + peerId).remove(); }); $('#step1, #step2').hide(); $('#step3').show(); } }); ``` ### 試したこと <script>の順番変えたり、HTML内に直接javascript記載したり、地図とビデオチャットの上下逆にしてみたりしましたが、結果は同様。(初心者感) ### 補足 consoleの警告は出たり出なかったりします。 cookeisの安全性関係と捉えており、とりあえずは無視して良いかなと思っておりました。  ###最後に 「ここ見てみれば？」等簡単で構いません。 お心当たりのある方、何卒ご連絡の程よろしくお願い致します。

Comments

[t_obara]

consoleに表示されているメッセージについてはどのような見解をお持ちなのですか？まずはこれを確認してみるのが1番のように思います。

[ShotaMiura]

Cookiesの安全性が低いみたいなニュアンスで捉えておりました。
この警告は出たり出なかったりするので、動作にあまり関係ないのかなと思っておりましたが...