質問編集履歴

2

APIキーの格納方法

2020/07/17 14:34

投稿

mamiduka
mamiduka

スコア11

test CHANGED
File without changes
test CHANGED
@@ -211,3 +211,31 @@
211
211
 
212
212
 
213
213
  デプロイはherokuで行っております。
214
+
215
+
216
+
217
+ APIキーの格納方法
218
+
219
+ ```
220
+
221
+ gem 'dotenv-rails'
222
+
223
+ gem 'gon'
224
+
225
+ ```
226
+
227
+
228
+
229
+ ```
230
+
231
+ def show
232
+
233
+ gon.api_key = ENV['API_KEY']
234
+
235
+ ```
236
+
237
+ ```env
238
+
239
+ API_KEY =xxxxxxxxxxxxxxxxxx
240
+
241
+ ```

1

JavaScriptの内容追記

2020/07/17 14:34

投稿

mamiduka
mamiduka

スコア11

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,175 @@
39
39
 
40
40
 
41
41
  よろしくお願いします。
42
+
43
+
44
+
45
+
46
+
47
+ # 追記
48
+
49
+ 用語が分からず的外れな追記であればおっしゃってください、申し訳ございません。
50
+
51
+
52
+
53
+ [作成したアプリです](https://myquestionapp.herokuapp.com/)
54
+
55
+ ↑適当に新規登録をしていただき、[こちら](https://myquestionapp.herokuapp.com/users/1)に入っていただきますとサイトの下部にビデオ通話が開始するボタンがあります。
56
+
57
+ コンソールでエラーが出ていますので確認をしていただきたいです。申し訳ありません。
58
+
59
+
60
+
61
+ ```javascript
62
+
63
+ document.getElementById("call-media-contents").style.display ="none";
64
+
65
+ document.getElementById("before-call").addEventListener("click", function() {
66
+
67
+ alert("カメラがオンになります");
68
+
69
+ alert("IDが発行されます。相手に教えることでビデオ通話ができます");
70
+
71
+ const contents = document.getElementById("call-media-contents");
72
+
73
+ const button = document.getElementById("before-call-contents");
74
+
75
+ if(contents.style.display=="block"){
76
+
77
+ contents.style.display ="none";
78
+
79
+ button.style.display ="block";
80
+
81
+ }else{
82
+
83
+ contents.style.display ="block";
84
+
85
+ button.style.display ="none";
86
+
87
+ }
88
+
89
+
90
+
91
+ let localStream;
92
+
93
+
94
+
95
+ navigator.mediaDevices.getUserMedia({video: true, audio: true})
96
+
97
+ .then( stream => {
98
+
99
+ const videoElm = document.getElementById('my-video')
100
+
101
+ videoElm.srcObject = stream;
102
+
103
+ videoElm.play();
104
+
105
+ localStream = stream;
106
+
107
+ }).catch( error => {
108
+
109
+ console.error('mediaDevice.getUserMedia() error:', error);
110
+
111
+ return;
112
+
113
+ });
114
+
115
+
116
+
117
+ const peer = new Peer({
118
+
119
+ key: gon.api_key,
120
+
121
+ debug: 3
122
+
123
+ });
124
+
125
+ peer.on('open', () => {
126
+
127
+ document.getElementById('my-id').textContent = peer.id;
128
+
129
+ });
130
+
131
+ peer.on('error', err => {
132
+
133
+ alert(err.message);
134
+
135
+ });
136
+
137
+ peer.on('close', () => {
138
+
139
+ alert('通信が切断しました。');
140
+
141
+ });
142
+
143
+
144
+
145
+ document.getElementById('make-call').onclick = () => {
146
+
147
+ const theirID = document.getElementById('their-id').value;
148
+
149
+ const mediaConnection = peer.call(theirID, localStream);
150
+
151
+ setEventListener(mediaConnection);
152
+
153
+ };
154
+
155
+
156
+
157
+ document.getElementById('stop-button').addEventListener("click", function() {
158
+
159
+ location.reload();
160
+
161
+ });
162
+
163
+
164
+
165
+ const setEventListener = mediaConnection => {
166
+
167
+ mediaConnection.on('stream', stream => {
168
+
169
+ const videoElm = document.getElementById('their-video')
170
+
171
+ videoElm.srcObject = stream;
172
+
173
+ videoElm.play();
174
+
175
+ });
176
+
177
+ }
178
+
179
+ peer.on('call', mediaConnection => {
180
+
181
+ mediaConnection.answer(localStream);
182
+
183
+ setEventListener(mediaConnection);
184
+
185
+ });
186
+
187
+ });
188
+
189
+ ```
190
+
191
+
192
+
193
+ 上記のコードの真ん中あたりの
194
+
195
+ ```
196
+
197
+ const peer = new Peer({
198
+
199
+ key: gon.api_key,
200
+
201
+ debug: 3
202
+
203
+ });
204
+
205
+ ```
206
+
207
+ これがビデオ通話するときに必要なAPIキーを記述しているところです。
208
+
209
+ ローカル環境では.envファイルにAPIキーを記述しており、ローカル環境ではきちんと動作しました。
210
+
211
+
212
+
213
+ デプロイはherokuで行っております。