StartIT

zoom api 이용하기 - 3

IT스타터 — Tue, 8 Dec 2020 17:04:19 +0900

tobepro.tistory.com/37?category=441528

zoom api 이용하기 - 2

tobepro.tistory.com/36 zoom api 이용하기(1) tobepro.tistory.com/35 zoom iframe 으로 크기 조절하기 tobepro.tistory.com/32?category=441528 zoom sdk 이용하기(web) 코로나의 여파로 인해 zoom같은 비대면..

tobepro.tistory.com

위 포스팅으로 api 이용하여 녹화영상을 다운로드 받는 것 까지 해봤다.

사실 여기까지만 해도 다른 api를 이용함에 있어서 크게 문제되는 것이 없다.

하지만 딱 하나 걸리는 게 있는데, 서버와의 통신이다. CORS정책을 피해서 서버단에서 jsp의 java로 zoom api의 데이터를 가져오는 것 까지는 좋았으나, 이 과정은 해당 페이지가 처음으로 로드될 때, 맨 처음 딱 한 번만 진행된다. 이게 무슨 문제가 생기냐하면 훗날 유저들에게 서비스를 제공했을 때, 해당 유저의 정보들을 가지고 zoom api 데이터를 가지고 와야하는데, 클라이언트단으로 유저들의 정보를 제공받으면 서버단이 먼저 진행되기 때문에 에러가 발생한다.

이를 위해서는

1. 이전페이지에서 클라이언트로 정보를 제공 받은 뒤, 다음 페이지로 넘어갈 때 그 정보를 주고 페이지를 로드한다.

2. 서버와의 통신을 통해 클라이언트로 정보를 받은 뒤 api(jsp의 자바)를 실행한다.

정도의 방법이 있겠다.

하지만 1번같은 경우 만약 이전페이지가 아니라 동일한 페이지에서 미팅에 접속하는 화면이 있다면? 이전페이지, 다음페이지라는 개념이 없는 경우이므로, 유저정보를 받은 뒤에 저장한 뒤 새로고침하여 다시 java를 실행시키고 페이지를 로드해야 될 것이다. 보여지는 화면이 갑자기 새로고침을 하면 유저입장에서는 오류라고 생각할 수도 있고, 화면상으로도 좋은 것이 아니기에 우리는 2번 방법을 해보도록 하겠다.

2번을 하기 위해서는 먼저 ajax에 대해 알아야 한다.

coding-factory.tistory.com/143

[Ajax] Ajax란 무엇인가?

▶ Ajax란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를..

coding-factory.tistory.com

rimkongs.tistory.com/4

Ajax (1) - 데이터 전송받기 (javascript,jQuery,Ajax)

오늘 진행 할 예제 test1.jsp => javascript로만 Ajax를 구현 test2.jsp => JQuery의 Ajax 기능을 통해서 Ajax를 구현 (많이씀) test3.jsp => JQuery로만 Ajax를 구현 test4.jsp => JQuery의 Ajax를 이용하여 get,..

rimkongs.tistory.com

해당 사이트들을 참고하거나, 구글링을 해서 ajax에 대해 공부를 하기를 바란다.

쉽게 이야기 하면 ajax란 자바스크립트를 사용한 비동기 통신, 서버와의 데이터를 송수신하는 기술이다.

비동기 통신임으로 전체 페이지를 다시 로드할 필요가 없이 일부분만을 다시 로드하고, 먼저 요청된 응답들을 기다렸다가 응답을 하는것이 아니라 다른 요청과는 상관없이 응답처리가 가능하다.

그러면 일단 먼저, meeting_iframe.jsp 파일의 수정을 한다.

기존에 있었던 자바 부분은 모두 삭제하고 함수를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<script>
function ajaxZoom(type){
        $.ajax({               
              "type": "POST",
              "url":"zoom_api.jsp",
              "data":{
                meetingId : "*********",
                auth : "***********************************************************************************************************",
                userId : "*******************"
              },
              "dataType":"json",
              success:function(data){
                console.log("ajax success");
                for(var i=0; i<data.meetings.length; i++){
                    if(data.meetings[0].id ==**********){
                        if(type=="none")
                            console.log(data);
                        else{
                             for(var j=0; j<data.meetings[i].recording_count; j++){
                                if(data.meetings[i].recording_files[j].file_type == type)
                                    location.replace(data.meetings[i].recording_files[j].download_url+"?access_token=*************************************************************************************************************************************************");
                            }
                        }
                     }
                }
              }, error:function(error){
                console.log("ajax false");
                console.log(error);
              }
        });
    }
 
function getMeeting(){
        ajaxZoom("none");
    }
 
    function getRec(){
        ajaxZoom("MP4");
    }
 
    function getChatLog(){
        ajaxZoom("CHAT");
    }
 
</script>
Colored by Color Scripter

cs

POST타입으로 전송되며 url은 기존에 지웠던 api 가져오는 jsp 파일이다.

meetingId는 미팅번호, auth는 access_token 값, userId는 유저아이디다.

json 타입으로 데이터를 전송받을 것이며 성공 시에는 ajax succeess log를 남긴다.

만약 none이라는 타입이 아니라면(미팅의 정보를 가져오는 것이 아니면)

location을 이용하여 data로 넘어온 url을 실행하여 다운로드를 받는다.(access_token이라는 파라미터를 넘겨줘야 로그인 없이 이 토큰값을 통해 다운로드가 진행된다)

실패시는 ajax false 메시지와 함께 에러의 내용을 log로 남겨준다.

그러면 이제. 서버에서 이 ajax호출을 받아서 처리하는 zoom_api.jsp파일을 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.*"%>
 
<%@ page import="com.squareup.okhttp.*"%>
<%
 
String meetingId = request.getParameter("meetingId");
String auth = request.getParameter("auth");
String userId = request.getParameter("userId");
String type = request.getParameter("type");
 
OkHttpClient client = new OkHttpClient();
Request zoomRequest = new Request.Builder()
  .url("https://api.zoom.us/v2/users/" + userId+ "/recordings?from=2020-10-24&to=2020-12-08")
  .get()
  .addHeader("authorization", "Bearer "+auth)
  .build();
 
Response zoomResponse = client.newCall(zoomRequest).execute();
String zoomText = zoomResponse.body().string();
%>
<%=zoomText%>
Colored by Color Scripter

cs

헤더값으로 넘겨준 값들을 받아서 이전에 java에서 했던대로 response를 받아 json형식의 string을 보여주게 되어있다.

이제 위에 meeting_iframe.jsp에서 meetingId, userId, auth등등의 값등을 클라이언트에서 받아서 해당 ajax 함수를 호출하면 서버에서 api처리를 하여 값을 전달받을 수 있다.

zoom api 이용하기 - 2

IT스타터 — Tue, 8 Dec 2020 14:28:59 +0900

tobepro.tistory.com/36

zoom api 이용하기(1)

tobepro.tistory.com/35 zoom iframe 으로 크기 조절하기 tobepro.tistory.com/32?category=441528 zoom sdk 이용하기(web) 코로나의 여파로 인해 zoom같은 비대면 화상 회의에 대한 수요가 급증하고 있다. 이번에..

tobepro.tistory.com

우리는 위 포스팅을 통해 zoom api 이용을 시도해봤다.

하지만 CORS 정책에 의해 막히고 말았는데, zoom developer forum사이트에서 찾은 방법을 한 번 적용해서 해결을 해보도록 하자.

tommy 스태프가 답변한 내용을 보면,

"Yes, the Zoom API must be called from the server side / backend. If called from the client side / frontend, you will get CORs errors."

zoom api는 반드시 서버사이드 즉 백엔드에서 불려져야 한다. 클라이언트단 즉 프론트엔드에서 호출을 하게 되면 너는 CORS에러를 갖게 될 것이다...

우리가 계속 CORS에러를 갖게 된 이유는 프론트엔드에서 계속 호출을 했기 때문에 이런 에러를 갖게 된 것이다.

여기서 클라이언트단과 서버단에서 실행되는 것에 차이를 알아야 하는데, 쉽게 생각하면

유저가 보이는 화면에서 실행된다 - 프론트엔드

유저가 보이지 않는 화면에서 실행이 된다 - 백엔드

로 생각하면 될 것 같다.

예를 들어 자바스크립트나 css, html 같은 경우, 화면에서 바로 보이는 부분들이 수정되는 것이기 때문에 프론트엔드라고 볼 수 있다.

db나 자바 등은 화면에서 보이는 부분들이 수정되는 것이 아니기 때문에 백엔드라고 볼 수 있다.

자바스크립트 같은 경우는 앞서 말했듯이 프론트엔드인데

가장 먼저 해결책으로 나오는 것은 node.js를 통해 js파일을 서버단에서 실행하라는 답변이 가장 많이 나온다. 하지만 우린 이미 tomcat서버를 활용하기로 했으니 이는 통과. 다른 방법을 찾아야 한다.

내가 찾은 방법은 jsp파일을 활용하여 java로 처리를 하는 방법이다.

jsp에서는 쉽게 생각하면 자바를 먼저 서버단으로 실행을 하고, 이후 자바스크립트를 클라이언트단으로 실행을 하기 때문에 자바에서 서버단으로 처리가 가능하다.

다시 zoom api 관련 서류에 get Meeting Recordings부분으로 가서

marketplace.zoom.us/docs/api-reference/zoom-api/cloud-recording/recordingget

Get Meeting Recordings - Cloud Recording - Zoom API - API Reference

Get all the recordings from a meeting or a Webinar. The recording files can be downloaded via the download_url property listed in the response. To acce...

marketplace.zoom.us

Language를 java로 선택하여 코드를 확인하도록 한다. 나는 OkHttp 라이브러리를 사용하기 위해 OkHttp를 선택했다.

이제 이 코드를 복사 후 meeting_iframe.html을 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.squareup.okhttp.*"%>
<%
OkHttpClient client = new OkHttpClient();
String zoomUrl = "https://api.zoom.us/v2/meetings/**********/recordings";
String auth = "*********************************************************************************************************************************";
Request zoomRequest = new Request.Builder()
  .url(zoomUrl)
  .get()
  .addHeader("authorization", "Bearer "+auth)
  .build();
 
Response zoomResponse = client.newCall(zoomRequest).execute();
String zoomText = zoomResponse.body().string();
%>
<scrit>
    function getMeeting(){
        console.log("<%=zoomText%>");
    }
</scrit>
 
Colored by Color Scripter

cs

meeting_iframe.html은 이제 jsp로 바꿔서 사용을 할 것이므로, 확장자를 jsp로 바꾼 뒤 다시 확인을 한다.

에러가 나서 확인을 해보면

값은 제대로 받아오는 것을 알 수 있다.

json object로 받아온 값을 적당한 파싱을 통해 string으로 변환해서 넣은 게 아니라 그냥 ""로 둘러싸여 넣은 형태이기 때문에 에러가 나온 것이다.

제대로 변환을 해서 확인을 해보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<%@ page import="org.json.simple.JSONObject"%>
<%@ page import="org.json.simple.JSONArray"%>
<%@ page import="org.json.simple.parser.JSONParser"%>
<%@ page import="org.json.simple.parser.ParseException"%>
 
<%
    String zoomText = zoomResponse.body().string();
    JSONParser parser = new JSONParser();     
    JSONObject jObj = (JSONObject)parser.parse(zoomText);  
%>
 
<script>
    function getMeeting(){
        var jsonObj = <%=jObj%>;
        console.log(jsonObj);
    }
</script>
 
Colored by Color Scripter

cs

이제 버튼을 누르면 json 형태의 값들을 확인해 볼 수 있다.

우리가 써야 하는 녹화영상에 관한 데이터는 recording_files에 담겨 있다.

이제 download버튼을 2개 만들어서, 이 클라우드에 저장되어 있는 영상과 채팅 로그를 다운로드 받아보도록 하자.

1
2
3
4
5

<script>
    <button onclick="getRec()">getRec</button>        
    <button onclick="getChatLog()">getChatLog</button>
</script>
 
Colored by Color Scripter

cs

버튼을 만들고

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<%
JSONArray jArray = (JSONArray)jObj.get("recording_files");
String recUrl ="";
String chatUrl ="";
JSONObject json = null;
for(int i=0; i<jArray.size(); i++){
    json = (JSONObject)jArray.get(i);
    if(json.get("file_type").equals("MP4"))
        recUrl = (String)json.get("download_url");
    else if(json.get("file_type").equals("CHAT"))
        chatUrl = (String)json.get("download_url");
}
%>
<script>
function getRec(){
        location.replace("<%=recUrl%>?access_token=<%=auth%>");
    }
 
    function getChatLog(){
        location.replace("<%=chatUrl%>?access_token=<%=auth%>");
    }
</script>
Colored by Color Scripter

cs

버튼을 눌렀을 때 각각에 해당되는 download_url을 실행하여 다운로드를 진행하도록 하였다.

여기까지 하면 기본적인 zoom api 이용하는 것에 대해 완성한 거 같다.

이 밖에 다른 api 기능은 zoom api 문서 사이트를 통해 몇 가지를 수정해서 사용하면 될 것이다.

@@@@@@@@추가

이상하게도 Get Meeting Recordings api를 사용하면 가장 마지막 녹화기록만 가져오는 경우가 발생한다. 그래서 List All Recordings를 가져다가 다시 사용했다.

marketplace.zoom.us/docs/api-reference/zoom-api/cloud-recording/recordingslist

List All Recordings - Cloud Recording - Zoom API - API Reference

When a user records a meeting or a webinar by choosing the Record to the Cloud option, the video, audio, and chat text are recorded in the Zoom cloud. ...

marketplace.zoom.us

전체 소스는

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="org.json.simple.JSONObject"%>
<%@ page import="org.json.simple.JSONArray"%>
<%@ page import="org.json.simple.parser.JSONParser"%>
<%@ page import="org.json.simple.parser.ParseException"%>
<%@ page import="com.squareup.okhttp.*"%>
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <style> 
        .zoom_position{
            margin-left:450px;
            margin-top:150px;
        }
    </style>
</head>
<%
OkHttpClient client = new OkHttpClient();
//String zoomUrl = "https://api.zoom.us/v2/meetings/*******/recordings?from=2020-11-24&to=2020-11-24";
String zoomUrl = "https://api.zoom.us/v2/users/*********/recordings?from=2020-11-24&to=2020-11-24";
String auth = "*****************************************************************************************************************************";
Request zoomRequest = new Request.Builder()
  .url(zoomUrl)
  .get()
  .addHeader("authorization", "Bearer "+auth)
  .build();
 
Response zoomResponse = client.newCall(zoomRequest).execute();
String zoomText = zoomResponse.body().string();
JSONParser parser = new JSONParser();     
JSONObject jObj = (JSONObject)parser.parse(zoomText);
 
JSONArray jArray = (JSONArray)jObj.get("meetings");
JSONObject json = null;
for(int i=0; i<jArray.size(); i++){
    json = (JSONObject)jArray.get(i);
    if((Long)json.get("id")==*********){
        json = (JSONObject)jArray.get(i);
        jArray =(JSONArray)json.get("recording_files");
        break;
    }
 
}
String recUrl =null;
String chatUrl =null;
 
for(int i=0; i<jArray.size(); i++){
    json = (JSONObject)jArray.get(i);
    if(json.get("file_type").equals("MP4"))
        recUrl = (String)json.get("download_url");
    else if(json.get("file_type").equals("CHAT"))
        chatUrl = (String)json.get("download_url");
}
 
%>
<script>
    var paramValue = window.location.href;
    paramValue = paramValue.substring(paramValue.indexOf('?'),paramValue.length);
    function join(){
        console.log("clk join");
        document.getElementById("ifrm").src = "./meeting.html" + paramValue;
    }
 
    function getMeeting(){
        var jsonObj = <%=jObj%>;
        console.log(jsonObj);
    }
 
    function getRec(){
        location.replace("<%=recUrl%>?access_token=<%=auth%>");
    }
 
    function getChatLog(){
        location.replace("<%=chatUrl%>?access_token=<%=auth%>");
    }
</script>
<body>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/jquery.min.js"></script>
        <button onclick="join()">join</button> 
        <button onclick="getMeeting()">getMeeting</button> 
        <button onclick="getRec()">getRec</button>
        <button onclick="getChatLog()">getChatLog</button>
    <div id="zoom_ifrm">
  <iframe id="ifrm" class="zoom_position" name="ifrm" src=""  style="width:50%; height:650px;" ><iframe>
</div>
</body>
</html>
Colored by Color Scripter

cs

tobepro.tistory.com/38

zoom api 이용하기 - 3

tobepro.tistory.com/37?category=441528 zoom api 이용하기 - 2 tobepro.tistory.com/36 zoom api 이용하기(1) tobepro.tistory.com/35 zoom iframe 으로 크기 조절하기 tobepro.tistory.com/32?category=441528..

tobepro.tistory.com

에서 마무리...

참고

shlee0882.tistory.com/45

JSONObject, JSONArray, JSONParser 사용해 데이터 만들어 파싱하기

1. 사전작업 JSON을 사용하기 위해선 json-simple-1.1.1.jar 라는 라이브러리 파일이 필요하다. maven이나 구글링을 통해 json사용에 필요한 jar 파일을 다운받고 프로젝트 속성 > java build path > Libraries >..

shlee0882.tistory.com

zoom api 이용하기 - 1

IT스타터 — Wed, 2 Dec 2020 13:51:52 +0900

tobepro.tistory.com/35

zoom iframe 으로 크기 조절하기

tobepro.tistory.com/32?category=441528 zoom sdk 이용하기(web) 코로나의 여파로 인해 zoom같은 비대면 화상 회의에 대한 수요가 급증하고 있다. 이번에는 zoom sdk를 이용하여 화상회의를 웹상에서 할 수 있는..

tobepro.tistory.com

위 포스팅을 통해 zoom을 iframe으로 이용하는 것 까지 마쳤다.

이제부터는 zoom api를 통해 zoom의 녹화 영상, 채팅 기록, room 설정 등등 zoom에서 api로 등록한 서비스들을 활용해볼 시간이다.

먼저 zoom의 녹화영상 개수를 가져올 것인데, zoom에서 영상녹화 기능은 무료 계정에서는 제공되지 않는다.

zoom api를 쓰는 궁극적인 목표중 하나는 zoom에서 회의한 내용들의 영상이나, 채팅 등을 보기 위함이기 때문이라고 생각하기에, api를 쓰고자 하는 사람들은 이미 pro계정을 지니고 있을 거라는 생각이 든다. zoom 개발자 포럼에 의하면 요청을 하면 test용으로 준다고 하는 것 같은데 나는 pro계정을 지니고 있어서 시도를 해보지는 않았다.

그럼 일단 zoom에 api이 어떠한 것들이 있는지, 관련 문서부터 살펴보자.

marketplace.zoom.us/docs/api-reference/zoom-api

Zoom API - API Reference

Zoom API Version: 2.0.0 Host: api.zoom.us/v2 Protocols: https Accepts: application/json, multipart/form-data Responds With: application/json, appli...

marketplace.zoom.us

사이트에 가보면 zoom api에 관련하여 모든것이 나온다.

영어 사이트이지만 크롬 번역등을 활용해서 참고하면 좋을 것 같다.

그 중에서 Cloud Recording 부분에 Get Meeting Recordings 부분을 살펴보자

"The recording files can be downloaded via the download_url property listed in the response."

녹음 파일은 response에 나열된 download_url 속성을 통해 다운로드 할 수 있다고 첫 부분에 나와있다.

그렇기에 이 api를 사용할려면 response을 받아야 한다는 것을 알 수 있다.

"To access a password protected cloud recording, add an “access_token” parameter to the download URL and provide OAuth access token or JWT as the value of the “access_token”."

비밀번호로 보호된 클라우드 기록에 접근할려면 access_token 파라미터를 추가하고, Oauth 토큰이나 JWT 토큰의 값을 추가하라고 되어있다. 이전 단계에서 우린 JWT앱을 생성하여 API키와 API 비밀번호를 받았었다.

이 화면인데 자세히 보면 "View JWT Token" 을 찾아볼 수 있다.

이 옆에 화살표를 누르면 JWT토큰이 표시가 되며 해당 토큰의 만료기간을 정할 수 있다.

이 토큰을 일단 복사해놓고, 다시 zoomApi 관련 문서페이지로 돌아가서 아래로 내리면 Authorization, Requset Parameters, Responses등을 확인할 수 있다.

그리고 맨 밑에 Send A Test Requset창을 살펴보자.

내가 가진 meetingId와 토큰을 통해 api기능을 미리 테스트할 수 있는 기능을 제공을 해준다.

복사해둔 JWT토큰번호를 oauth_access_token값에 넣고, zoom에 로그인하여 meetingId(회의번호)를 복사한뒤 입력을 한다.

그 후 Send를 누르면

위와 같이 뜨면 일단은 meetingId와 JWT 토큰은 정상적으로 동작을 한 것이다!

현재 녹화를 실시한 적이 없기 때문에, 녹화 기록이 없다고 나오는 것뿐이다. 만약 녹화를 사전에 진행한 상태에서 Send를 눌렀다면

이와 같이 json형식으로 값을 얻을 수 있을 것이다. 위에서 봤던 download_url에는 실제 url주소가 들어가 있어서, 이 url주소를 들어가면 해당 mp4파일이 다운로드가 진행이 된다.

테스트는 성공적으로 되었으니 이제는 실제 내 프로젝트에서 해당 api를 가져가다 사용을 해보도록 하겠다.

그러면 일단 우리가 meetingId와 JWT토큰값을 입력했던 창에서의 3가지 탭(Seetings, Headers, Code Generation)중에서 Code Generation 탭을 눌러보자.

Language를 통해 사용하는 언어를 고를 수 있고, Library를 선택하여 http통신을 통한 값을 받아오는 라이브러리를 선택할 수 있다.

@@@@@@@@@여기서 만약 성공한 결과만 보고 싶다면 다음 zoom api이용하기(2)를 읽기를 권장한다@@@@@@@@@@@@@

우리는 일단 html을 사용하여 톰캣서버에서 진행하니 Language를 눌러 javascrit를 선택.

XMLHttpRequest와 JQuery 두가지의 Library가 나오고, 본인이 사용중인 라이브러리를 선택하여 해당 코드를 복사를 한다.

그 후 전에 저번에 작성한 meeting_iframe.html 파일을 열어서 해당 코드를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script>
function getMeeting(){
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://api.zoom.us/v2/meetings/********/recordings",
            "method": "GET",
            "headers": {
                "authorization": "Bearer ***********************************************************************************************************************************"
            }
        }
        $.ajax(settings).done(function (response) {
          console.log(response);
        });
    }
</script>
Colored by Color Scripter

cs

버튼 하나를 생성하여 버튼 클릭시 위에 함수가 호출되도록 하자.

1
2
3
4

<body>
<script src="https://source.zoom.us/1.8.3/lib/vendor/jquery.min.js"></script>
<button onclick="getMeeting()">getMeeting</button> 
</body>
Colored by Color Scripter

cs

이제 브라우저를 통해 meeting_iframe.html파일을 열고, getMeeting 버튼을 눌러서 데이터를 가지고 오는지 확인을 해본다.

console.log로 아까 test했을 때 받은 json 데이터가 아닌 에러가 발생을 한다.

Access to XMLHttpRequest at 'https://api.zoom.us/v2/meetings/**********/recordings' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

해당 에러는 CORS(Cross Origin Resource Sharing) 에러로 쉽게 말해서 도메인이 다른 출처의 리소스를 사용할 수 없다는 에러다. 즉 현재 내가 사용중인 도메인은 localhost인데 여기서 'https://api.zoom.us/.....' 로 시작하는 다른 도메인의 리소스(json 데이터)를 사용을 하려고 하면, 보안상의 문제로 브라우저 자체에서 차단하는 정책이다.

이를 해결하기 위해서는 요청을 받은 서버쪽에서 헤더에 Access-Control-Allow-Origin 속성에 해당 url이나 *를 줘서 '이 url에서는 이 정책을 무시하고 허용하라)라는 값을 설정을 해야한다고 한다.

하지만 우리는 api를 통해 값을 가져오는 거라 이 api서버의 접속ip도, id , password 등등 하나도 모르는 상황에서 해당 속성을 바꿔줄 수있는 방법은 없다.

여기서 구글링을 통해 다른 방법이 없을까 찾아봤더니 크롬에서는 확장프로그램을 설치하면 사용할 수 있다고 되어있다. 그럼 확장프로그램을 설치 후 다시 시도해보도록 하겠다.

해당 확장프로그램을 설치 후 다시 시도를 해봤다.

비슷하면서 다른 에러가 다시 발생했다.

해당 확장프로그램에서 제공되는 테스트사이트를 이용해서 테스트를 해봐도, 다른 사이트를 이용해서 확인을 해봐도

확장프로그램은 정상작동하는데 또 CORS 정책 에러가 발생을 한다. 구글에 검색을 해봐도 헤더에 값을 세팅하는 것 외에는 다른 해결방안을 찾기가 힘들어서 이번엔 zoom developer forum을 통해 검색을 해봤다.

devforum.zoom.us/

Zoom Developer Forum

Post your questions on the Forum and get help from Zoom Developer Support.

devforum.zoom.us

해당 사이트에서는 zoom 개발자들의 질문들을 확인할 수 있고, 궁금한 문의사항들도 질문해서 답변을 받을 수 있다.

tobepro.tistory.com/37

zoom api 이용하기(2)

tobepro.tistory.com

에서 계속...

zoom iframe 으로 크기 조절하기

IT스타터 — Thu, 26 Nov 2020 17:50:12 +0900

tobepro.tistory.com/32?category=441528

zoom sdk 이용하기(web)

코로나의 여파로 인해 zoom 같은 비대면 화상 회의에 대한 수요가 급증하고 있다. 이번에는 zoom sdk를 이용하여 화상회의를 웹상에서 할 수 있는 sample 개발을 진행해보도록 하자. 먼저 marketplace.zoom

tobepro.tistory.com

윗글을 통해 web버전용 sdk를 설치하고, local 또는 https환경 세팅까지 마무리했으면

이제 zoom을 좀 더 커스텀을 해보도록 하자.

일단 meeting.html을 보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
 
<head>
    <title>Zoom WebSDK</title>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.3/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.3/css/react-select.css" />
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="origin-trial" content="">
</head>
 
<body>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/jquery.min.js"></script>
    <script src="https://source.zoom.us/1.8.3/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/zoom-meeting-1.8.3.min.js"></script>
    <script src="js/tool.js"></script>
    <script src="js/vconsole.min.js"></script>
    <script src="js/meeting.js"></script>
 
    <script>
        const simd = async () => WebAssembly.validate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 4, 1, 96, 0, 0, 3, 2, 1, 0, 10, 9, 1, 7, 0, 65, 0, 253, 15, 26, 11]))
        simd().then((res) => {
          console.log("simd check", res);
        });
    </script>
</body>
 
</html>
Colored by Color Scripter
cs

매우 간단하게 되어있다!?

버튼 크기라든가 화면 크기, 텍스트 크기 등 UI에 대해 수정을 하고 싶지만 css나 html, js파일을 다 네트워크를 통해 불러와서 직접적인 수정을 할 수가 없다.

가장 기본적인 zoom 화면을 항상 화면에 꽉 차게 사용하게 된다는 점이다.

devforum.zoom.us/

Zoom Developer Forum

Post your questions on the Forum and get help from Zoom Developer Support.

devforum.zoom.us

에 의하면 아직 UI를 컨트롤하는 부분에 대한 개발은 진행되지 않은 듯하다.

css를 통해서 크기를 컨트롤할 수는 있다고 한다.

하지만 우린 css가 아닌 iframe을 통해 iframe의 사이즈를 조절하는 방식으로 줌의 크기 조절을 할 생각이다.

먼저 간단하게 zoom이 iframe으로 들어갈 html 파일 하나를 만들어 보자.

파일명은 meeting_iframe.html로 하여 하나 만든다.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
<body>
        <button>join</button> 
    <div id="zoom_ifrm">
  <iframe id="ifrm" name="ifrm" src=""  style="width:50%; height:600px;" ><iframe>
</div>
</body>
</html>
Colored by Color Scripter
cs

호스팅 또는 조인을 컨트롤 할 버튼과 zoom 화면이 채워질 iframe을 생성했다.

이제 이 화면에서 iframe영역을 가운데로 옮기기 위해 style을 추가하고

1
2
3
4
5
6
    <style> 
        .zoom_position{
            margin-left:450px;
            margin-top:150px;
        }
    </style>
cs

ifrm에 해당 style class를 추가해준다.

1
<iframe id="ifrm" class="zoom_position" name="ifrm" src=""  style="width:50%; height:650px;" ><iframe>
cs

굳이 이렇게 안 하고, style에 바로 #으로 id값을 주고 margin을 줘서 띄워도 된다.

이제 index.html에서 join버튼을 눌렀을 때 이 화면으로 넘어오게 되는데, 이때 index.html에서 설정한 값들을 parameter 값으로 가져오게 된다. 이 값들을 추출해서 이 화면에서 join버튼을 눌렀을 때 이전에 있던 meeting.html 파일로 넘겨줘서 이 html 파일을 저 가운데 iframe 화면으로 뛰우게 될 것이다.

그럼 먼저

1
2
3
4
<script>
    var paramValue = window.location.href;
    paramValue = paramValue.substring(paramValue.indexOf('?'),paramValue.length);
</script>
Colored by Color Scripter
cs

해당 스크립트를 통해 paramValue 변수에 url로 넘어온 ?이후의 parameter값을 저장한다.

1
2
3
4
5
6
<script>
    function join(){        
        console.log("clk join");
        document.getElementById("ifrm").src = "./meeting.html" + paramValue;
    }
</script>
Colored by Color Scripter
cs

그 후 함수 하나를 작성하여, 이 함수를 누르면 콘솔 로그로 clk join 메시지가 나오고,

iframe에 비어있던 src 속성을 paramValue를 함께 넘겨줘서 html 파일을 실행한다.

최종 소스는 아래와 같이 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
 
<head>
    <meta charset="utf-8" />
    <style> 
        .zoom_position{
            margin-left:450px;
            margin-top:150px;
        }
    </style>
</head>
<script>
    var paramValue = window.location.href;
    paramValue = paramValue.substring(paramValue.indexOf('?'),paramValue.length);
 
    function join(){
        console.log("clk join");
        document.getElementById("ifrm").src = "./meeting.html" + paramValue;
    }
</script>
<body>
        <td><button onclick="join()">join</button> 
    <div id="zoom_ifrm">
  <iframe id="ifrm" class="zoom_position" name="ifrm" src=""  style="width:50%; height:650px;" ><iframe>
</div>
</body>
 
</html>
Colored by Color Scripter
cs

이제 여기서 바로 index.html을 바로 실행하여 join을 누르면 이전에 meeting.html이 실행될 것이다.

index.js파일을 실행하여 join버튼을 눌렀을 때 실행되는 html파일 url을 수정하도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// click join meeting button
  document
    .getElementById("join_meeting")
    .addEventListener("click", function (e) {
      e.preventDefault();
      var meetingConfig = testTool.getMeetingConfig();
      if (!meetingConfig.mn || !meetingConfig.name) {
        alert("Meeting number or username is empty");
        return false;
      }
 
      
      testTool.setCookie("meeting_number", meetingConfig.mn);
      testTool.setCookie("meeting_pwd", meetingConfig.pwd);
 
      var signature = ZoomMtg.generateSignature({
        meetingNumber: meetingConfig.mn,
        apiKey: API_KEY,
        apiSecret: API_SECRET,
        role: meetingConfig.role,
        success: function (res) {
          console.log(res.result);
          meetingConfig.signature = res.result;
          meetingConfig.apiKey = API_KEY;
          var joinUrl = "./meeting_iframe.html?" + testTool.serialize(meetingConfig);
          console.log(joinUrl);
          window.open(joinUrl, "_blank");
        },
      });
    });
Colored by Color Scripter
cs

mysql 계정 생성 및 권한 부여

IT스타터 — Thu, 26 Nov 2020 16:14:49 +0900

use mysql;
select user, host from user;                                     //유저 정보 확인

create user 'id'@'localhost' identified by 'password';      //로컬 접속 유저
create user 'id'@'%' identified by 'password';              //모든ip 허용 유저
create user 'id'@'ip주소' identified by 'password';        //특정ip 허용 유저

drop user 'id'@'%';                                     //유저 삭제

grant all privileges on *.* to 'id'@'%';                 //유저에게 모든db 권한 부여
grant all privileges on db명.* to 'id'@'%';           //유저에게 특정db 권한 부여
flush privileges;                                                   //권한 적용

권한 부여 에러가 날 시
GRANT ALL PRIVILEGES ON db명.* TO 'id'@'%' WITH GRANT OPTION; 로 확인

show grants for 'id'@'%'; //해당 유저의 권한 확인
revoke all privileges on db명.* from 'id'@'%'; //유저의 특정db 권한 삭제

grant select on db명.* to 'id'@'%'; // 유저에게 해당 DB select 권한 부여

ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'password'; //8.0 에러날 시

Let's Encrypt window톰캣 인증서 받기(https)

IT스타터 — Thu, 26 Nov 2020 14:28:53 +0900

http로 서버를 운영하면 보안 관련해서 문제가 많이 생긴다. 큰 예시로는 카메라나 오디오 기능을 사용할 수가 없다. 따라서 https 프로토콜로 바꿔서 운영을 하려면 프로토콜 인증서를 받고, 톰캣에 적용해야 한다. 그렇기 위해서는 먼저 인증서를 발급받아야 한다.

letsencrypt.org/docs/client-options/

ACME Client Implementations - Let's Encrypt - Free SSL/TLS Certificates

Auf Deutsch ansehen Ver en español Voir en Français לעבור לעברית 日本語で表示する 한국어로 보기 Ver em Português (do brasil) Просмотреть на русском Visa på svenska 使用简体中文阅读本网页。使用

letsencrypt.org

사이트에 들어가서

window 톰캣의 프로토콜을 바꿀 것이므로

windows 의 win-acme를 눌러서 나오는 사이트에서 해당 프로그램을 다운로드한다.

zip 파일의 압축을 해제한 뒤 cmd를 활용하여 wacs.exe 파일을 실행한다.

m을 입력하여 증명서 생성 옵션을 선택한다.

Manual input 옵션인 2번을 선택한다.

가지고 있는 서버의 도메인을 입력한다. 포트번호를 입력하면 X 해당 프로그램은 자동으로 80 포트만 가지고 도메인의 소유권을 파악하게 되어있다.

도메인 확인 후 enter를 입력한다.

도메인의 소유권을 증명하는 방식을 고르는 옵션이다.

network의 pasth를 통해 증명할 것이므로 1번을 선택한다.

가지고 있는 서버의 root path를 입력한다. index페이지가 나오는 그 path를 입력하면 된다.

변경 전 web.config를 먼저 복사해둘 것이냐고 묻는 것 같은데 default 값이 n이기도 하고 해서 n을 입력했다.

RSA key 타입으로 받을 것이므로 2번을 선택

일단 apache, nginx 등의 서버용인 PEM파일로 받기 위해 2번을 선택한다.

해당 파일이 저장될 경로를 지정한다.

다른 방식으로 또 저장을 할 건지 묻는다. 필요 없으니 5번을 누른다.

먼저 install 할 단계가 있는지 묻는 거 같다. 필요 없으니 4번을 누른다.

일정 시간이 지나면 4개의 pem 파일이 생성된다.

이제 생성된 key파일과 chain파일을 이용해 이제 톰캣용 인증서 파일인 .p12 파일로 변환을 시켜야 한다.

openssl을 다운로드하고 bin폴더에 해당 4개의 파일을 이동시킨다.

관리자 권한으로 openssl을 실행시킨 뒤

pkcs12 -export -in 파일명-crt.pem -inkey 파일명-key.pem -out keystore.p12 -name tomcat -CAfile 파일명-crt.pem -caname root를 입력한다.(보통 파일명이 도메인명으로 되어있다.)

그 후 인증서 파일의 비밀번호를 입력하면 인증서가 톰캣용 인증서인 .p12 파일로 변환이 된다.

해당 keystore파일이 생성되는지 확인한다.

1
2
3
4
5
6
7
8

<Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
  maxThreads="150" SSLEnabled="true">
    <SSLHostConfig>
      <Certificate certificateKeystoreFile="file Path"
                   certificateKeystorePassword="password"
                   certificateKeystoreType ="pkcs12" type="RSA" />
    </SSLHostConfig>
</Connector>
Colored by Color Scripter

cs

톰캣의 conf 폴더에 server.xml를 열고 해당 keystore파일의 패스와 비밀번호를 입력한다.

이후 톰캣을 재시작 후 8443 포트를 활용하여 https 프로토콜로 접속을 하면 접속이 된다.

만약 파일 path에 관련된 에러가 나온다면 앞에 file:///를 입력하여 file경로임을 명시해준다.

ex..) certificateKeystoreFile="file:///C:/Tomcat9/keystore/keystore.p12"

참고

jimnong.tistory.com/845

[윈도우10 64bit] APM : Let's Encrypt SSL 인증서 수동 발급과 아파치(Apache)에 적용하기

2~3년 전, https 설정을 위한 Let's Encrypt 무료 SSL 인증서 발급/관리 프로그램이 (윈도우 기준) 아파치 용으로는 깔끔치 못해서 부득이하게 홈서버 OS를 우분투로 교체했었습니다. 그런데 시간이

jimnong.tistory.com

namjackson.tistory.com/24

[SSL]HTTPS통신을 위한 SSL인증서 발급하기(OpenSSL)

먼저 HTTPS통신을 구현 하기 하기전, SSL 이란? Secure Socket Layer의 약자로 SSL 프로토콜은 간단하게 웹서버와 브라우저 사이의 보안을 위해 만들어졌다. 간단하게 요약하자면 대칭키를 이용하여 암호

namjackson.tistory.com

bigboss.io/2019/05/install-letsencrypt-ssl-certificate-for-windows-tomcat/

영혼 없이 Windows용 Tomcat에 Let's Encrypt SSL 인증서 설치하기 - bigboss.io

Let’s Encrypt 인증서를 설치하려고 검색을 해보니 리눅스 환경에서 certbot을 활용하는 방법이 주로 나왔습니다. 윈도 환경에서는 IIS에 적용하는 방법은 종종 찾을 수 있었지만 Tomcat에 적용하는 방

bigboss.io

zoom sdk 이용하기(web)

IT스타터 — Thu, 26 Nov 2020 11:27:16 +0900

코로나의 여파로 인해 zoom 같은 비대면 화상 회의에 대한 수요가 급증하고 있다.

이번에는 zoom sdk를 이용하여 화상회의를 웹상에서 할 수 있는 sample 개발을 진행해보도록 하자.

먼저

marketplace.zoom.us/docs/sdk/native-sdks/web

Web - Client SDKs - Zoom Software Development Kit (Zoom SDK)

Zoom Web SDK The Web SDK enables the development of video applications powered by Zoom's core framework inside an HTML5 web client through a highly opt...

marketplace.zoom.us

링크를 통해 zoom marketplace에 등록된 web sdk 영역으로 이동을 한다.

sdk

sample app을 누르면 github 사이트로 이동이 된다.

해당 사이트에서 소스코드를 다운 받고, 본인의 서버로 이동하여 압축을 해제해준다.

현재 tomcat을 이용 중이므로, tomcat기준으로 설명을 진행.

압축을 풀면 위에 화면처럼 크게 CDN 폴더와 Local 폴더가 보인다.

CDN은 Content Delivery Network의 약자로 서버의 분산 네트워크로서 서버에 캐시 된 콘텐츠를 저장하여 대기 시간을 최소화하는 네트워크라고 한다. 자세한 건 인터넷에 검색해보시길..

local은 말 그대로 local 환경에서의 sdk를 설치 및 실행을 하는 것이다.

단 여기서 local로 진행하게 된다면 module를 따로 설치를 해야 원활한 진행이 되고 CDN은 module설치가 필요 없이 네트워크를 통해 필요한 js파일 등을 받기 때문에 CDN을 통해 진행을 하겠다.

CDN폴더를 가서 sample용 html과 js 파일들을 확인해보자.

먼저 index.html은 말 그대로 초기화면을 보여주는 html 파일이고, meeting.html은 zoom을 통한 화상회의를 진행이 되는 html 파일로 보인다.

그럼 일단 서버(톰캣)를 통해 index.html 파일을 실행해보자.

빨간색으로 지워진 부분에는 PC명을 자동으로 검색해서 입력해주고, 나머지 부분은 직접 채워야 한다.

Meeting Number는 zoom에서 받은 개인 회의 ID를 입력하고, Meeting Password는 회의 비밀번호, Email option에는 eail 주소 Attendee에서는 먼저 host로 회의를 개설할 거니 host로 설정, English 대신 한국어로 설정을 바꾼 뒤 join을 눌러준다.

만약 meeting Number가 없다면 먼저 zoom에 회원가입을 하여 회의 id, password 등을 받도록 하자.

버튼을 누르면 404 에러가 발생을 한다. url을 자세히 보면 도메인 뒤에 바로 meeting.html 파일을 찾는 것이 보인다.

하지만 내가 가지고 있는 meeting.html은 현재 서버 루트 폴더 아래 /sample-app-web-master/CDN/에 존재하기 때문에 404 에러가 발생하는 것이다. 그러면 저 버튼의 액션이 이뤄졌을 때, 발생하는 함수가 찾는 url을 살짝 수정하면 정상 동작할 거 같으니 index.html에서 버튼 관련된 함수를 찾아보자.

아마도 보이지 않을 것이다. 하지만 밑에 보면 등록된 js파일들이 보일 텐데, 이 버튼과 관련된 함수가 있는 js는 index.js파일이다. 해당 파일을 실행하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// click join meeting button
  document
    .getElementById("join_meeting")
    .addEventListener("click", function (e) {
      e.preventDefault();
      var meetingConfig = testTool.getMeetingConfig();
      if (!meetingConfig.mn || !meetingConfig.name) {
        alert("Meeting number or username is empty");
        return false;
      }
 
      
      testTool.setCookie("meeting_number", meetingConfig.mn);
      testTool.setCookie("meeting_pwd", meetingConfig.pwd);
 
      var signature = ZoomMtg.generateSignature({
        meetingNumber: meetingConfig.mn,
        apiKey: API_KEY,
        apiSecret: API_SECRET,
        role: meetingConfig.role,
        success: function (res) {
          console.log(res.result);
          meetingConfig.signature = res.result;
          meetingConfig.apiKey = API_KEY;
          var joinUrl = "/meeting.html?" + testTool.serialize(meetingConfig);
          console.log(joinUrl);
          window.open(joinUrl, "_blank");
        },
      });
    });
Colored by Color Scripter

cs

자세히 보면 joinUrl에 "/meeting.html?"으로 시작하는 것이 보인다.

앞부분에 해당 웹 루트 이후 url을 작성하거나. meeting.html을 index.html과 같은 폴더에 놓고(이미 놓여져있음) .하나를 붙여 상대 경로로 지정을 해준 뒤 실행을 다시 한다.

잘못된 매개변수라고 나온다. 주소창을 자세히 보니 apiKey부분에 YOUR_API_KEY라고 되어있는 것을 볼 수 있다.

눈이 좋은 사람들은 index.js를 편집했을 때 윗부분에서 해당 부분과 같은 변수를 이전에 봤을 것이다.

1
2
3
4
5
6
7
8

  var API_KEY = "YOUR_API_KEY";
 
  /**
   * NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
   * The below generateSignature should be done server side as not to expose your api secret in public
   * You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
   */
  var API_SECRET = "YOUR_API_SECRET";
Colored by Color Scripter

cs

이 부분에 api 키를 입력해줘야 한다.

zoom으로 api 키를 발급받았으면, 키와 비밀번호를 입력하면 되지만 아직 받지 않았다면 zoom 사이트를 들어가서 로그인을 하자.

marketplace.zoom.us/

로그인하여 우측 상단에 build app을 통해 앱을 생성한다.

sdk에서 요구하는 건 api key와 api secret인데, sdk앱은 sdk key, 와 sdk secret을 제공하여 sdk앱을 만들어 봤자 앞으로 진행이 안된다....

차후 어차피 api서비스를 이용할 것이므로 JWT앱을 생성하자.

나는 이미 만들어서 과정을 찍지 못했다..

생성이 되면 해당 부분에 api key와 secret을 복사하여 index.js에 key와 secret부분에 입력해준다.

그 후 다시 index.html을 통해 join을 시도해보자.

회의 참가 중 메시지 이후

해당 창이 뜬다면 정상적으로 host가 되었다.

같은 방식으로 하여 Attendee를 host가 아닌 Assistant로 하여 join버튼을 누르면 호스트가 아닌 참가자로서 미팅에 참석할 수 있다.

이후 오디오 참가나 비디오 시작을 누르면 왼쪽 상단으로 요청이 올 것이다.(크롬기준)

해당 요청을 수락하면, 오디오나 비디오를 시작할 수 있다.

보안 쪽 문제 때문에 카메라 등이 http에서는 지원하지 않아서 직접 web 서버를 운영하고 있다면

브라우저가 카메라 등의 기능을 지원하지 않으니 최신 버전으로 업데이트하라는 문구가 뜰 것이다.

local 같은 경우엔 http이긴 해도 카메라 등의 기능을 사용할 수 있지만 그 외 http만 있는 서버인 경우에는 https 프로토콜로 설정을 해줘야지만 카메라 공유가 가능하다.

아파치 오픈미팅(openmeetings) 무료 웹 화상 회의 - 2

IT스타터 — Mon, 20 Jul 2020 15:53:05 +0900

https://tobepro.tistory.com/30

아파치 오픈미팅(openmeetings) 무료 웹 화상 회의 - 1

코로나로 직접 대면이 껄끄러운 지금 화상 회의에 대해 알아보도록 하자.(사실 회사에서 시켜서 하는거ㅎㅎ) 많은 화상 회의 프로그램이 있지만 그 중에서도 아파치에서 만든 웹 기반에 오픈미�

tobepro.tistory.com

1부는 위 링크로(오픈미팅 설치 전 기타 프로그램 설치)

MariaDB까지 설치가 완료되었으면 이제 openmeetings을 다운로드 받는다.

archive.apache.org/dist/openmeetings/4.0.10/bin/apache-openmeetings-4.0.10.zip

Openmeetings을 다운받아 C밑에 압축 해제한다.

폴더명을 red54010으로 변경하고, mysql connector.jar파일을 다운로드 하여 C:\red54010\webapps\openmeetings\WEB-INF\lib폴더에 저장한다.

cmd를 열고 C:\WINDOWS\system32/services.msc 명령어를 입력하여 서비스 관리 실행

mysql을 찾아서 재시작을 한다.

이후 C:\red54010\red5.bat을 실행한다.

그 후 브라우저를 실행하고 http://localhost:5080/openmeetings/install을 입력한다.

위와 같은 화면이 뜨면 일단 설치는 완료된 것이다. 이제 openmeeting 셋팅을 시작하도록 하자. 먼저 >버튼을 누른다.

data서버를 위해 설치한 DB의 값대로 설정을 한다. 우리는 1부에서 Tutorial 메뉴얼대로 MariaDB(mysql)를 설치했으므로 mysql를 선택한다.

서버를 가지고 운영을 한다면 해당 서버의 host가 들어가겠지만, 일단은 우린 local로 설치하고, 실행하는 tutorial단계임으로 localhost를 입력한다.

mysql의 기본 포트인 3306를 입력하고 생성한 Database 명(open4010), DB User(hola), password을 차례로 입력한뒤 Check를 하고, 이상이 없으면 >버튼을 누른다.

username, password email timezone등을 설정하고 >버튼을 누른다.

username (최소 8자이상) - ********
userpass (대문자 1개 이상, 특수문자포함) - *********
Email - *******@*****.com

User Time Zone - Asia-Seoul(선택하기)
Group Name - **************
최소 입력값에 못미치면 빨간색 에러가 발생한다.

설정 후 >버튼을 누른다.

Mail-Referer - ********@naver.com

SMTP-Server - localhost
SMTP-Server Port - 25
SMTP - Username - ********@naver.com

SMTP -Userpass - *********
Language - 한국어

설정 후 >버튼을 누른다.

설치한 프로그램들의 경로 지정한다.

ImageMagick Path = C:\ImageMagick-7.0.7-17-portable-Q16-x64

FFMPEG Path = C:\ffmpeg

SoX Path = C:\Program Files (x86)\sox-14-4-2

LibreOffice = C:\Program Files\LibreOffice

Check를 눌렀을 때 에러가 발생하지 않으면 제대로 설정된 것이다.

>버튼을 누른다.

Finish를 누르면 설정이 완료된다.

Finish가 끝나면 해당 창으로 넘어간다. 아무것도 누르지 말고 openmeetings 서버를 재시작을 한다.

아까 실행한 red5.bat 프로그램을 열고 Ctrl + C 입력 후 ‘일괄 작업을 끝내시겠습니까 (Y/N)? 이 문구가 뜨면 y 입력 후 enter를 누른다. 그 후 다시 red5.bat을 실행한다.

그리고 enter the application을 누르거나, 주소창에 http://localhost:5080/openmeetings을 입력한다.

유저(설정한 username 또는 이메일주소)

패스(password)를 입력하고 로긴을 눌러 login을 한다.

해당 화면으로 login 되면 openmeeting 환경설정 셋팅까지 완료가 되었다.

이제 화상회의를 할 room을 생성해보자

1. calendar

메뉴에 home - calendar를 누르면 해당 화면이 나온다.(new Event가 없어야 합니다! 이건 미리 생성해서 만들어져 있어요)

회의를 열고자 하는 날짜를 클릭을 하면 아래와 같은 화면이 나온다.

General 탭에서 시작일, 종료일 등등을 설정하고 Room 탭으로 이동한다.

Room type등을 설정하고 Advanced설정을 해도 되지만 일단은 Save를 눌러 방을 생성한다.

해당 화면에 생성된 New event(general 탭에서 설정한 title)로 room이 생성 되었는지 확인이 가능하다.

생성된 event를 누르면 해당 event의 상세정보를 확인할 수 있고, enter room을 통해 room에 입장할 수 있다.

2. Conference rooms

Administration - Conference rooms 을 누른다.

우측에 생성할 room의 name, type등등을 설정한 뒤 save버튼을 누르면 room이 생성이 된다.

이후 Rooms - public room 을 누르면 public으로 설정한 room의 list가 보이고, 해당 룸을 선택하여 enter를 누르면 room에 입장 할 수 있다.

room에 입장하면 파일과 화면등을 공유할 수 있고, cam의 옵션으로 마이크를 끄거나, 화면을 끄는등 화상회의에 기본 화상회의에 필요한 요소들이 동작을 한다.

아파치 오픈미팅(openmeetings) 무료 웹 화상 회의 - 1

IT스타터 — Mon, 20 Jul 2020 14:44:07 +0900

코로나로 직접 대면이 껄끄러운 지금 화상 회의에 대해 알아보도록 하자.

많은 화상 회의 프로그램이 있지만 그 중에서도 아파치에서 만든 웹 기반에 오픈미팅(oepnmeetings)을 설치해 보도록 하겠다.

https://openmeetings.apache.org/

Apache OpenMeetings Project – Home

Openmeetings provides video conferencing, instant messaging, white board, collaborative document editing and other groupware tools. It uses API functions of Media Server for Remoting and Streaming (Red5 or Kurento). OpenMeetings is a project of the Apache,

openmeetings.apache.org

해당 홈페이지에서 다운로드 받을 수 있으며, installation - Tutorials 에서 설치방법을 볼 수 있는데 이를 토대로 설치를 진행하였다.

https://cwiki.apache.org/confluence/display/OPENMEETINGS/Tutorials+for+installing+OpenMeetings+and+Tools

Tutorials for installing OpenMeetings and Tools - Apache OpenMeetings - Apache Software Foundation

페이지 Index 배너의 맨 끝으로 배너의 맨 처음으로 메타 데이터의 끝으로 건너뛰기 작성자 : Alvaro Bustos, 최근 변경 : Alvaro Bustos - 7월 09, 2020 메타 데이터의 시작으로 이동 Tutoriales en español relacionad

cwiki.apache.org

해당 사이트에서 본인의 os를 선택하여 메뉴얼을 보고 진행하기를 권장한다.

오픈미팅 프로그램에서 서로의 화면을 보고, 파일 등을 공유하기 위해서 몇가지 프로그램이 먼저 설치가 되어 있어야 한다.

1.Ghostscript, 7-zip

고스트스크립트(Ghostscript)는 어도비(Adobe Systems)의 포스트스크립트(PostScript) 및 PDF ( Portable Document Format ) 페이지 기술 언어에 대한 인터프리터를 기반으로 한 소프트웨어이다. 주요 목적은 포스트스크립트(PostScript)와 PDF 파일에서 변환 및 완전한 호환을 가능하게 하는 페이지 기술 언어, 파일의 래스터화 또는 렌더링, 문서 페이지의 표시 또는 인쇄이다 - 위키백과

7-zip은 알집과 같은 파일 압축 프로그램이다.

각각의 링크를 클릭하면 다운로드가 진행이 된다.

Ghostscript같은 경우 해당 링크로 접속하면 에러가 발생해서 구글링을 통해 다운로드 받았다.

2. JDK

JDK는 이미 PC에 다운로드 되어 있어서 따로 다운로드 받지 않았다.

아 그리고 계속 진행하면서 사진을 보면 알겠지만, Please, install it by default으로 기본 설정을 바꾸지 말고 다운로드 해달라는 문구가 자주 나온다. 이 문구대로 특정한 상황이 아닌이상 기본 설정으로 다운로드 받기로 하자.

3.LibreOffice

LibreOffice는 Micro Office 프로그램(엑셀, ppt 등)과 호환되는 오피스 프로그램이다.

4.imageMagick, sox

imageMagick는 png, jpg, gif 등의 이미지 파일을 활용하기 위한 프로그램이다.

해당 링크로 다운로드 후 압축을 풀고 C:\ImageMagick-7.0.7-17-portable-Q16-x64로 이동한다.

sox는 영상 소리 관련한 프로그램이다.

5. Adobe Flash

cam 재생을 위한 Adobe Flash프로그램이다.

6.FFmpeg

영상(녹화, 재생, 변환, 스트림 등) 관련한 프로그램이다.

먼저 C밑에 ffb 폴더 생성(C:\ffb)을 한다.

다운받고 압축 해제 후 MSYS 폴더를 ffb 밑으로 이동 후 msys.bat 실행한다.

msys.bat을 실행하면 cmd같은 창이 하나 뜬다.

그 후 4개의 파일을 링크를 통해 다운로드하고 C:\ffb\MSYS\home\PCuser명 아래에 이동(없으면 폴더 생성)

msys.bat 프로그램에 아래 명령어 입력

==================================Lame===============================

tar xvfz lame-3.100.tar.gz

cd ~/lame-3.100

./configure --prefix=/usr/local/x86_64-w64-mingw32 --host=x86_64-w64-mingw32 --enable-static --disable-shared --disable-decoder --enable-nasm

make clean && make

make install

cd ~

tar xvfz lame-3.100.tar.gz

cd ~/lame-3.100

./configure --prefix=/usr/local/x86_64-w64-mingw32 --host=x86_64-w64-mingw32 --enable-static --disable-shared --disable-decoder --enable-nasm

make clean && make

make install

cd ~

아까 다운받은 총 4개의 파일에 대해 여기까지의 명령어 수행을 반복하여 해준다.

==================================Fdk-aac===============================

tar xvfz fdk-aac-0.1.6.tar.gz

cd ~/fdk-aac-0.1.6

./configure --prefix=/usr/local/x86_64-w64-mingw32 --host=x86_64-w64-mingw32 --enable-shared=no
make clean && make

make install

cd ~

==================================X-264===============================

tar xvjf x264-snapshot-20180613-2245.tar.bz2

cd ~/x264-snapshot-20180613-2245
./configure --prefix=/usr/local/x86_64-w64-mingw32 --cross-prefix=x86_64-w64-mingw32- --host=x86_64-w64-mingw32 --enable-static --bit-depth=8 --enable-win32thread
make clean && make
make install
cd ~

==================================FFmpeg===============================

tar xvjf ffmpeg-4.0.tar.bz2

cd ~/ffmpeg-4.0
CPPFLAGS="$CPPFLAGS -I/usr/local/x86_64-w64-mingw32/include" ./configure --extra-ldflags='-L/usr/local/x86_64-w64-mingw32/lib' --prefix=/usr/local/x86_64-w64-mingw32 --cross-prefix=x86_64-w64-mingw32- --target-os=mingw32 --enable-w32threads --arch=x86_64 --enable-runtime-cpudetect --disable-debug --enable-static --disable-shared --disable-ffplay --enable-gpl --enable-version3 --enable-nonfree --enable-libmp3lame --enable-libfdk-aac --enable-libx264
※※※※※※ffmpeg같은 경우 위 명령어 입력 하여 Enter를 누르면 멈춘 것처럼 보이지만 컴파일 중이므로 다른 키 입력하지 말고 기다리기※※※※※※※※※※※※※※※
make clean && make
make install
cd ~

컴파일이 끝나면 C:\ffb\MSYS\local\x86_64-w64-mingw32\bin 폴더에

ffmpeg.exe, ffprobe.exe, lame.exe, x264.exe

이렇게 총 4개의 파일이 생성된다. C:\ffmpeg 폴더를 생성 후 이 폴더로 이동시킨다.

7. MariaDB(mysql)

data 서버를 위한 MariaDB를 다운로드 한다.

이 후 openmeeting 을 셋팅할 때 MariaDB의 root password등을 설정해야하니 까먹지 말고 기억할 것!

설치 후 시작메뉴 - MaraDB 10.2 (x64)폴더 - Command Prompt(MariaDB 10.2)를 실행하여 터미널을 열고

mysql -u root -p

명령어를 입력하여 MariaDB 실행

MariaDB 설치 시 입력했던 root계정의 password를 입력하면 root계정으로 로그인
이 후 명령어를 입력하여 사용할 Database 생성

CREATE DATABASE open4010 DEFAULT CHARACTER SET 'utf8);

생성한 database에 웹으로 접근 가능하도록 권한 부여

GRANT ALL PRIVILEGES open4010.* TO 'hola'@'localhost' IDENTIFIED BY '1234' WITH GRANT OPTION;

그리고 JDK 와 MariaDB 환경변수가 제대로 설정되었는지 확인한다.

https://tobepro.tistory.com/31?category=410332

아파치 오픈미팅(openmeetings) 무료 웹 화상 회의 - 2

https://tobepro.tistory.com/30 아파치 오픈미팅(openmeetings) 무료 웹 화상 회의 - 1 코로나로 직접 대면이 껄끄러운 지금 화상 회의에 대해 알아보도록 하자.(사실 회사에서 시켜서 하는거ㅎㅎ) 많은 화상

tobepro.tistory.com

에 이어서 계속...

톰캣 로그 확인하기

IT스타터 — Tue, 30 Jun 2020 17:21:35 +0900

리눅스 서버에서 tail -f /usr/local/tomcat/logs/catalina.out 를 입력하면 실시간으로 톰캣 로그 확인 가능