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

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

新規登録して質問してみよう
ただいま回答率
85.48%
npm

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

Node.js

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

SDK

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

JavaScript

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

Q&A

解決済

1回答

275閲覧

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

KSK8000

総合スコア17

npm

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

Node.js

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

SDK

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

JavaScript

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

0グッド

0クリップ

投稿2018/06/18 11:15

前提・実現したいこと

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

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

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

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



該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head lang="ja"> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>SkyWay JS SDK Tutorial</title> 6 <link rel="stylesheet" href="style.css"> 7</head> 8<div class="pure-g"> 9 10 <!-- Video area --> 11 <div class="pure-u-2-3" id="video-container"> 12 <video id="their-video" autoplay></video> 13 <video id="my-video" muted="true" autoplay></video> 14 </div> 15 16 <!-- Steps --> 17 <div class="pure-u-1-3"> 18 <h2>SkyWay Video Chat</h2> 19 20 <p>Your id: <span id="my-id">...</span></p> 21 <p>Share this id with others so they can call you.</p> 22 <h3>Make a call</h3> 23 <form id="make-call" class="pure-form"> 24 <input type="text" placeholder="Call user id..." id="callto-id"> 25 <button href="#" class="pure-button pure-button-success" type="submit">Call</button> 26 </form> 27 <form id="end-call" class="pure-form"> 28 <p>Currently in call with <span id="their-id">...</span></p> 29 <button href="#" class="pure-button pure-button-success" type="submit">End Call</button> 30 </form> 31 </div> 32</div> 33<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 34<script type="text/javascript" src="script.js"></script> 35</html>

javascript

1'use strict'; 2 3let localStream = null; 4let peer = null; 5let existingCall = null; 6 7navigator.mediaDevices.getUserMedia({video: true, audio: true}) 8 .then(function (stream) { 9 // Success 10 $('#my-video').get(0).srcObject = stream; 11 localStream = stream; 12 }).catch(function (error) { 13 // Error 14 console.error('mediaDevice.getUserMedia() error:', error); 15 return; 16}); 17 18// require 19const Peer = require('skyway-js'); 20const peer = new Peer({key: '発行したAPIkeyが入ります'}); 21 22peer.on('open', function(){ 23 $('#my-id').text(peer.id); 24}); 25 26peer.on('error', function(err){ 27 alert(err.message); 28}); 29 30peer.on('close', function(){ 31}); 32 33peer.on('disconnected', function(){ 34}); 35 36$('#make-call').submit(function(e){ 37 e.preventDefault(); 38 const call = peer.call($('#callto-id').val(), localStream); 39 setupCallEventHandlers(call); 40}); 41 42$('#end-call').click(function(){ 43 existingCall.close(); 44}); 45 46peer.on('call', function(call){ 47 call.answer(localStream); 48 setupCallEventHandlers(call); 49}); 50 51function setupCallEventHandlers(call){ 52 if (existingCall) { 53 existingCall.close(); 54 }; 55 56 existingCall = call; 57 58 call.on('stream', function(stream){ 59 addVideo(call,stream); 60 setupEndCallUI(); 61 $('#their-id').text(call.remoteId); 62 }); 63 call.on('close', function(){ 64 removeVideo(call.remoteId); 65 setupMakeCallUI(); 66 }); 67} 68 69function addVideo(call,stream){ 70 $('#their-video').get(0).srcObject = stream; 71} 72 73function removeVideo(peerId){ 74 $('#'+peerId).remove(); 75} 76 77function setupMakeCallUI(){ 78 $('#make-call').show(); 79 $('#end-call').hide(); 80} 81 82function setupEndCallUI() { 83 $('#make-call').hide(); 84 $('#end-call').show(); 85}``` 86 87### 試したこと 88 89requireと importを用いてファイルをインポートしようとしましたが、失敗いたしました。 90scriptの読み込む順番なども修正しております。 91 92### 補足情報(FW/ツールのバージョンなど) 93こちらのチュートリアルを用いております。 94どうぞよろしくお願いいたします。 95 96[SKYWAY](https://webrtc.ecl.ntt.com/js-tutorial.html)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

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

投稿2018/06/21 02:03

KSK8000

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問