質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

デプロイするとAPIが読み込まれない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 150

mamiduka

score 11

初めまして。
いつもありがとうございます。

railsを勉強し初めて約2ヶ月が経ち、本日初めてデプロイまですることができました。

ただ、デプロイしてみたアプリの動作確認を行っていたのですがAPIを使って実装した部分がうまく動作できなくて解決できないのでみなさんのお力を貸していただけたらと思い、質問させていただきます。
よろしくお願いします
私は、ビデオ通話機能をSky WayのAPIを使って実装したのですが、その部分が動作しません。

ローカルの環境ではきちんと動作していました。

APIキーを叩くと

API key "null" is invalid.

とアラートが出てきます。

おそらくAPIキーの格納場所が違うと思うのですがどこにどのように格納すれば良いのかわかりません。

よろしくお願いします。

追記

用語が分からず的外れな追記であればおっしゃってください、申し訳ございません。

作成したアプリです
↑適当に新規登録をしていただき、こちらに入っていただきますとサイトの下部にビデオ通話が開始するボタンがあります。
コンソールでエラーが出ていますので確認をしていただきたいです。申し訳ありません。

  document.getElementById("call-media-contents").style.display ="none";
  document.getElementById("before-call").addEventListener("click", function() {
    alert("カメラがオンになります");
    alert("IDが発行されます。相手に教えることでビデオ通話ができます");
    const contents = document.getElementById("call-media-contents");
    const button = document.getElementById("before-call-contents");
    if(contents.style.display=="block"){
      contents.style.display ="none";
      button.style.display ="block";
    }else{
      contents.style.display ="block";
      button.style.display ="none";
    }

    let localStream;

    navigator.mediaDevices.getUserMedia({video: true, audio: true})
      .then( stream => {
      const videoElm = document.getElementById('my-video')
      videoElm.srcObject = stream;
      videoElm.play();
      localStream = stream;
    }).catch( error => {
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });

    const peer = new Peer({
      key: gon.api_key,
      debug: 3
    });
    peer.on('open', () => {
      document.getElementById('my-id').textContent = peer.id;
    });
    peer.on('error', err => {
      alert(err.message);
    });
    peer.on('close', () => {
    alert('通信が切断しました。');
    });

    document.getElementById('make-call').onclick = () => {
      const theirID = document.getElementById('their-id').value;
      const mediaConnection = peer.call(theirID, localStream);
      setEventListener(mediaConnection);
    };

    document.getElementById('stop-button').addEventListener("click", function() {
      location.reload();
    });

    const setEventListener = mediaConnection => {
      mediaConnection.on('stream', stream => {
        const videoElm = document.getElementById('their-video')
        videoElm.srcObject = stream;
        videoElm.play();
      });
    }
    peer.on('call', mediaConnection => {
      mediaConnection.answer(localStream);
      setEventListener(mediaConnection);
    });
  });

上記のコードの真ん中あたりの

  const peer = new Peer({
    key: gon.api_key,
    debug: 3
  });


これがビデオ通話するときに必要なAPIキーを記述しているところです。
ローカル環境では.envファイルにAPIキーを記述しており、ローカル環境ではきちんと動作しました。

デプロイはherokuで行っております。

APIキーの格納方法

gem 'dotenv-rails'
gem 'gon'
def show
  gon.api_key = ENV['API_KEY']
API_KEY =xxxxxxxxxxxxxxxxxx
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2020/07/17 23:01

    > APIキーを叩くと

    何をどう叩いているんでしょうか?
    該当箇所のソースコードを提示いただかないと、回答は得られないと思います。

    また、デプロイ前にローカルで動作確認する環境にて、動作確認は行ってなかったのですか?

    キャンセル

回答 1

checkベストアンサー

+1

heroku なら、Configuration and Config Vars にあるように heroku cli で環境変数を設定してみてください。

heroku config:set API_KEY=value

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/18 09:06

    ありがとうございます!
    設定できました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る