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

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

ただいまの
回答率

90.84%

  • JavaScript

    14827questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    1680questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • npm

    224questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

  • SDK

    114questions

    SDK(software development kit)は特定のハードウェアのプラットフォーム、開発環境又はソフトウェアパッケージでソフトウェアをつくるのに必要な開発ツールのセットです。SDKはAPI、IDE又は他の開発ツールとフレームワークを組み合わせたもので構成されていることがあります。

npmでダウンロードしたSDKを動かしたい

解決済

回答 1

投稿

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

KSK8000

score 11

 前提・実現したいこと

npmでダウンロードしたSDKを用いて、画面を作りたいと考えております。
本来はファイルをインポートしてIDを発行し、それに応じて画面が作成されるものです。
それをローカルホスト内で行えるようにしたいと考えております。

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

下記のエラーメッセージが検出されて、IDが発行されない。

script.js:22 Uncaught SyntaxError: Identifier 'peer' has already been declared

 該当のソースコード

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SkyWay JS SDK Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<div class="pure-g">

    <!-- Video area -->
    <div class="pure-u-2-3" id="video-container">
        <video id="their-video" autoplay></video>
        <video id="my-video" muted="true" autoplay></video>
    </div>

    <!-- Steps -->
    <div class="pure-u-1-3">
        <h2>SkyWay Video Chat</h2>

        <p>Your id: <span id="my-id">...</span></p>
        <p>Share this id with others so they can call you.</p>
        <h3>Make a call</h3>
        <form id="make-call" class="pure-form">
            <input type="text" placeholder="Call user id..." id="callto-id">
            <button href="#" class="pure-button pure-button-success" type="submit">Call</button>
        </form>
        <form id="end-call" class="pure-form">
            <p>Currently in call with <span id="their-id">...</span></p>
            <button href="#" class="pure-button pure-button-success" type="submit">End Call</button>
        </form>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>

```javascript 'use strict';

let localStream = null; let peer = null; let existingCall = null;

navigator.mediaDevices.getUserMedia({video: true, audio: true})     .then(function (stream) {         // Success         $('#my-video').get(0).srcObject = stream;         localStream = stream;     }).catch(function (error) {     // Error     console.error('mediaDevice.getUserMedia() error:', error);     return; });

// require const Peer = require('skyway-js'); const peer = new Peer({key: '発行したAPIkeyが入ります'});

peer.on('open', function(){     $('#my-id').text(peer.id); });

peer.on('error', function(err){     alert(err.message); });

peer.on('close', function(){ });

peer.on('disconnected', function(){ });

$('#make-call').submit(function(e){     e.preventDefault();     const call = peer.call($('#callto-id').val(), localStream);     setupCallEventHandlers(call); });

$('#end-call').click(function(){     existingCall.close(); });

peer.on('call', function(call){     call.answer(localStream);     setupCallEventHandlers(call); });

function setupCallEventHandlers(call){     if (existingCall) {         existingCall.close();     };

    existingCall = call;

    call.on('stream', function(stream){         addVideo(call,stream);         setupEndCallUI();         $('#their-id').text(call.remoteId);     });     call.on('close', function(){         removeVideo(call.remoteId);         setupMakeCallUI();     }); }

function addVideo(call,stream){     $('#their-video').get(0).srcObject = stream; }

function removeVideo(peerId){     $('#'+peerId).remove(); }

function setupMakeCallUI(){     $('#make-call').show();     $('#end-call').hide(); }

function setupEndCallUI() {     $('#make-call').hide();     $('#end-call').show(); }```

 試したこと

requireと importを用いてファイルをインポートしようとしましたが、失敗いたしました。
scriptの読み込む順番なども修正しております。

 補足情報(FW/ツールのバージョンなど)

こちらのチュートリアルを用いております。
どうぞよろしくお願いいたします。

SKYWAY

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2018/06/19 12:07

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

check解決した方法

0

HTML上に下記を入力することで、一応の解決を見ました。

<script type="text/javascript" src="node_modules/skyway-js/dist/skyway.js"></script>

requireと importを用いる方法については今後も検討していきたいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    14827questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    1680questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • npm

    224questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

  • SDK

    114questions

    SDK(software development kit)は特定のハードウェアのプラットフォーム、開発環境又はソフトウェアパッケージでソフトウェアをつくるのに必要な開発ツールのセットです。SDKはAPI、IDE又は他の開発ツールとフレームワークを組み合わせたもので構成されていることがあります。