Eclipse Web Project + WebAssembly Sample

개발 이야기/WEB 2020. 5. 12. 15:05

웹 서버에 WebAssembly로 작성한 함수 불러오는 간단한 예제.

용어 설명은 생략.

 

1. 간단한 샘플 코드 작성

 

sample.c 라고 가정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <stdio.h>
#include <emscripten/emscripten.h>
 
EMSCRIPTEN_KEEPALIVE
int square(int n)
{
    return n * n;
}
 
EMSCRIPTEN_KEEPALIVE
int add(int a, int b)
{
    return a + b;
}
 
 cs

 

2. emscripten 설치(우분투 18.04.4 LTS 환경에서 진행)

 

1
2
3
4
5
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
 cs

 

3. 컴파일

 

emsdk 경로에 [1번 과정]에서 작성한 sample.c 복사하고 진행함.

 

1
emcc sample.c -o sample.js -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap']
 cs

 

4. Eclipse 에서 Dynamic Web Project 생성

 

5. [3번 과정]에서 생성된 sample.js / sample.wasm 파일을 js 라는 디렉토리에 복사

6. index.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Wasm Test Page</title>
</head>
<body>
<button id="btn" onclick="OnClickBtn();">click here!</button>
<script>
function OnClickBtn()
{
    //////////
    var square_ccal_result = Module.ccall('square',
            'number',
            ['number'],
            [4]);
    
    console.log('[square] ccall result = ' + square_ccal_result);
    //////////
    
    //////////
    var suqare = Module.cwrap('square',
            'number',
            ['number']);
    
    var suqare_cwrap_result = suqare(5);
    
    console.log('[square] cwrap result = ' + suqare_cwrap_result);
    //////////
    
    //////////
    var add_ccal_result = Module.ccall('add',
            'number',
            ['number', 'number'],
            [2, 3]);
    console.log('[add] ccall result = ' + add_ccal_result);
    //////////
    
    //////////
    var add = Module.cwrap('add',
            'number',
            ['number', 'number']);
    
    var add_cwrap_result = add(7, 9);
    console.log('[add] cwrap result = ' + add_cwrap_result);
    //////////
}
 
</script>
<script type='text/javascript' src='./js/sample.js'></script>
</body>
</html>
 
cs

 

7. 결과

 

'개발 이야기 > WEB' 카테고리의 다른 글

WebAssembly C++ Class Binding  (0) 2020.05.18
WebAssembly + C struct(구조체)  (0) 2020.05.15
,

Window 10 에서 Ubuntu 우분투 설치하기(WSL - Windows Subsystem for Linux)

개발 이야기/LINUX 2019. 9. 18. 10:38

1. 제어판 -> 프로그램 -> 프로그램 및 기능 메뉴 이동

2. Windows 기능 켜기/끄기 선택

3. Linux용 Windows 하위 시스템 체크박스에 체크 후 확인

 

4. Microsoft Store 에서 검색란에 'ubuntu' 입력하면 위 그림처럼 관련 앱들이 나열된다. Windows에서 Linux 실행하기를 선택.

 

5. Ubuntu 앱 선택

 

6. 앱 설치

 

7. 설치가 완료되면, 실행 버튼 선택.(필자는 업무 상의 이유로 최신 버전이 아닌, 16.04를 설치함)

 

8. 실행하면 콘솔이 열리고 몇 분 동안 설치 과정이 진행된다.

 

9. 사용자 이름 및 비밀번호를 설정하면 끝!

,

Android FFmpeg 빌드

개발 이야기/Android 2019. 1. 30. 16:28

구축환경

- android ndk r16b

- ffmpeg 4.0.3


이 블로그를 작성하는 2019년 2월 20일 날짜의 ffmpeg 의 최신버전은 4.1 이다.

그러나... 빌드 오류를... 못잡았다.... ㅜㅜ

나중에 최신버전으로 빌드 하면, 업데이트 하는 것으로...



1. NDK 설치



2. FFmpeg 다운로드 및 설정


1) https://www.ffmpeg.org/download.html 에서 다운로드를 받은 후에 압축을 푼다.

버전은 4.0.3 으로 다운받았다.

깔끔한 환경 설정을 위해 $(Android SDK path)/ndk-bundle/sources/ 경로를 추천한다.




2) 압축을 푼 다음, $(Android SDK path)/ndk-bundle/sources/ffmpeg-4.0.3/ 경로로 이동하여 configure 파일을 텍스트 편집이 가능한 툴로 열어서 아래와 같이 수정 한다.


1
2
3
4
5
6
7
8
9
10
11
//해당 부분을
SLIBNAME_WITH_MAJOR='$(SLIBNAME).$(LIBMAJOR)'
LIB_INSTALL_EXTRA_CMD='$$(RANLIB) "$(LIBDIR)/$(LIBNAME)"'
SLIB_INSTALL_NAME='$(SLIBNAME_WITH_VERSION)'
SLIB_INSTALL_LINKS='$(SLIBNAME_WITH_MAJOR) $(SLIBNAME)'
 
//아래와 같이 변경한다.
SLIBNAME_WITH_MAJOR='$(SLIBPREF)$(FULLNAME)-$(LIBMAJOR)$(SLIBSUF)'
LIB_INSTALL_EXTRA_CMD='$$(RANLIB) "$(LIBDIR)/$(LIBNAME)"'
SLIB_INSTALL_NAME='$(SLIBNAME_WITH_MAJOR)'
SLIB_INSTALL_LINKS='$(SLIBNAME)'
cs


3) $(Android SDK path)/ndk-bundle/sources/ 경로에 build_android.sh 파일을 생성하고

아래와 같이 작성한다.



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
#!/bin/bash
 
export NDK=c:/Users/choijaeyong/AppData/Local/Android/sdk/ndk-bundle
export SYSROOT=$NDK/platforms/android-28/arch-arm
export TOOLCHAIN=$NDK/toolchains/arm-linux-androideabi-4.9/prebuilt/windows-x86_64
CPU=armv7-a
 
ISYSROOT=$NDK/sysroot
ASM=$ISYSROOT/usr/include/arm-linux-androideabi
 
export CUR=`cygpath -m $(pwd)`
export PREFIX=$CUR/android/$CPU
 
function build_android
{
./android_configure \
    --target-os=linux \
    --prefix=$PREFIX \
    --enable-cross-compile \
    --enable-shared \
    --disable-static \
    --disable-doc \
    --disable-ffmpeg \
    --disable-ffplay \
    --disable-ffprobe \
    --disable-avdevice \
    --disable-doc \
    --disable-symver \
    --cross-prefix=$TOOLCHAIN/bin/arm-linux-androideabi- \
    --arch=arm \
    --sysroot=$SYSROOT \
    --extra-cflags="-I$ASM -isysroot $ISYSROOT -D__ANDROID_API__=28 -U_FILE_OFFSET_BITS -Os -fPIC -DANDROID -Wno-deprecated -mfloat-abi=softfp -marm" \
    --extra-ldflags="$ADDI_LDFLAGS" \
    $ADDITIONAL_CONFIGURE_FLAG
    
make clean 
make -j16
make install
}
 
build_android
cs


3. Cygwin 설치 및 '2' 항목의 FFmpeg Build 하기



1) https://cygwin.com/install.html 에 가서 cygwin 을 설치한다.

(설치할 때, 추가 dos2unix 및 gcc-core 포함 시킨다.)



2) Cygwin Terminal 을 실행하여 아래와 같이 입력


1
2
3
4
5
cd /cygdrive/c/Users/choijaeyong/AppData/Local/Android/sdk/ndk-bundle/sources/ffmpeg-4.0.3
 
dos2unix android_build.sh
 
./android_build.sh
cs



4. 3번 과정까지 잘 따라왔으면, 빌드는 성공?

아쉽게도... 문제가 발생한다.




1) libavcodec 폴더에서 aaccoder.c 파일을 열어서

B0 -> b0 

변경




2) libavcodec 폴더에서 hevc_mvs.c 파일을 열어서

B0 -> b0

xB0 -> xb0

yB0 -> yb0

변경!



3) libavcodec 폴더에서 opus_pvq.c 파일을 열어서

B0 -> b0

변경!


5. 이제 정말 완료!!!





참고 사이트

1. https://xucanhui.com/2018/07/22/android-ndk-ffmpeg-compile/

2. https://www.jianshu.com/p/484db5ec733f




'개발 이야기 > Android' 카테고리의 다른 글

SMS Retriever API 사용 예제  (0) 2019.01.30
BroadcastReceiver Wifi 상태 및 신호 세기 변화 감지  (0) 2017.06.20
해당 App이 실행하는 동안에 적용되는 밝기 조절  (0) 2017.06.20
,
1 2 3 4 5

티스토리툴바