精华内容
下载资源
问答
  • 2021-12-01 09:39:42

       

    目录

    一、环境概况

    二、环境准备

    2.1 Git软件

    2.1.1 Windows安装

    2.2.2 linux安装

    2.2 Python软件

    2.2.1 Windows安装

    2.2.2 linux安装

    三、emsdk安装

    3.1 Windows添加环境变量

    3.2 Linux添加环境变量

    四、简单测试

    参考资料


            由于项目需要,需要在浏览器(Firefox、chrome系列浏览器、Edge浏览器)中运行c/c++代码,查了相关的资料,有两种方式:1、使用浏览器扩展WebExtensions; 2、使用Emscripten中的wasm。

          该系列文章主要记录Emscripten中的开发与测试过程中遇到的bug。

          该篇文章主要记录Emscripten开发环境的搭建,包括windows、linux(ubuntu14);一些关于WebAssembly的介绍,网上资料很多,以及官网上也有,这里就不需要多叙述了。

          如果要把一个C/C++程序编译成一个.wasm文件,是需要编译工具来完成的。WebAssembly 社区推荐常用工具的工具为:

    • Emscripten:能把 C、C++代码转换成 wasm、asm.js;

    • Binaryen:提供更简洁的 IR,把 IR 转换成 wasm,并且提供 wasm 的编译时优化、wasm 虚拟机,wasm 压缩等功能。

    一、环境概况

          我目前windows的版本是Win10。 如下图所示:

           linux下的环境,目前使用的是虚拟机中安装ubuntu系统,我的VMWare的版本是:VMWare Workstation 16 pro。如下图所示:

            我安装的虚拟机环境是:ubuntu 14-04 LTS版本。如下图所示:

    二、环境准备

            无论windows环境还是linux上都需要提前安装Git软件以及Python软件。建议配置一个VPN,连接外网进行对应的下载操作。

    2.1 Git软件

            Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。相关详细介绍请看参考资料。

    2.1.1 Windows安装

           首先进入git下载页面:Git - Downloading Package (git-scm.com),进行下载,下载完成后,双击,进行下一步的操作即可。安装完成后,检查一下环境变量是否配置成功,即打开命令提示符,输入查看版本信息的命令,若能正常显示出版本信息则表示安装成功。若提示" 'git' 不是内部或外部命令,也不是可运行的程序或批处理文件。"的错误时,则去检查系统的环境变量是否设置成功。如下图所示:

    2.2.2 linux安装

            打开终端,输入以下命令进行Git软件包的安装,安装过程中一直按Enter键即可:

    sudo apt-get install git

            输入查看版本信息的命令,若能正常显示出版本信息则表示安装成功。如下图所示:

    2.2 Python软件

            Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。

    2.2.1 Windows安装

            首先进入Python下载页面:Git - Downloading Package (git-scm.com)Download Python | Python.orgGit - Downloading Package (git-scm.com),选择最新的版本进行下载(建议下载64的安装程序),下载完成后,双击,进行下一步的操作即可。安装完成后,检查一下环境变量是否配置成功,即打开命令提示符,输入查看版本信息的命令,若能正常显示出版本信息则表示安装成功。若提示" 'python 不是内部或外部命令,也不是可运行的程序或批处理文件。"的错误时,则去检查系统的环境变量是否设置成功。如下图所示:

    2.2.2 linux安装

            由于ubuntu系统自带的有python软件包,则直接输入查看版本信息的命令,若能正常显示出版本信息则表示安装成功。如果提示没有安装且为ubuntu 20的系统时,可以使用sudo apt-get install python3命令进行安装。ubuntu14下的截图如下图所示:

           

    三、emsdk安装

             首先打开终端或者命令提示符,通过git下载emsdk的驱动程序(是一个python脚本)。

    # Get the emsdk repo
    git clone https://github.com/emscripten-core/emsdk.git
    
    # Enter that directory
    cd emsdk
    
    # Fetch the latest version of the emsdk (not needed the first time you clone)
    git pull

             git操作有可能会报下面的错误:

           如果出现上述错误,建议使用VPN或者进入GitHub - emscripten-core/emsdk: Emscripten SDK 网页中,点击Code菜单下的Download ZIP按钮下载,将下载后的包解压到指定目录即可。

           执行以下命令,进行源码安装以及SDK激活。这里需要注意的是:Windows平台下,要用emsdk代替./emsdk ,要用emsdk_env.bat代替source ./emsdk_env.sh:

    # Download and install the latest SDK tools.
    ./emsdk install latest
    
    # Make the "latest" SDK "active" for the current user. (writes .emscripten file)
    ./emsdk activate latest
    
    # Activate PATH and other environment variables in the current terminal
    source ./emsdk_env.sh

            还需要注意的是,执行完上面的代码后,只能激活当前命令提示符或者终端的环境变量,需要将下面的相关的环境变量添加到系统或者用户的环境变量中。

    3.1 Windows添加环境变量

           Windows中就直接打开系统环境框进行添加。Windows下需要添加的环境变量如下图:

    # 单独设置的环境变量,我这里是windows环境
    EMSDK=D:\workspace\emsdk\emsdk
    EMSDK_NODE=%EMSDK%\node\14.15.5_64bit\bin\node.exe
    EMSDK_PYTHON=%EMSDK%\python\3.9.2-1_64bit\python.exe
    
    # PATH中也要添加环境变量
    %EMSDK%
    %EMSDK%\upstream\emscripten
    %EMSDK%\node\14.15.5_64bit\bin

           添加后的截图如下:

            双击系统变量中的PATH变量,结果如下图所示: 

           添加完成后,关闭所有的命令提示符,重新打开命令提示符,输入相应的命令(如图片所示),检查环境变量是否设置成功。  

    3.2 Linux添加环境变量

            linux下,打开终端,将下面的变量值添加到最后即可。

    export EMSDK="/home/luyp/emsdk/emsdk"
    export EM_CONFIG="$EMSDK/.emscripten"
    export EMSDK_NODE="$EMSDK/node/14.15.5_64bit/bin/node"
    export PATH="$PATH:$EMSDK/upstream/bin/:$EMSDK/upstream/emscripten/:$EMSDK/node/14.15.5_64bit/bin/"
    

          使用下面的命令后,环境变量添加成功。

    # 使用VIM打开用户的环境变量文件
    vim ~/.bashrc
    
    # 将环境变量添加完成后,保存并退出vim
    
    
    # 使用下面命令使环境变量生效
    source ~/.bashrc

           执行source命令完成后输入相应的命令(如图片所示),检查环境变量是否设置成功。  如果提示下面的错误:

           该错误的原因是ubuntu系统中自带的python版本太低(经过测试,ubuntu 14、ubuntu 16下系统自带的python版本太低)。则去官网下载最新的python3的源码,自己直接进行编译,然后查看了emcc的源码,则发现去读取了一个EMSDK_PYTHON的环境变量,则将编译的pyhon路径加入到环境变量即可。

            ubuntu 14系统中执行下面的命令:

    # 使用wget命令下载python3.6.14的版本
    wget https://www.python.org/ftp/python/3.6.14/Python-3.6.14.tgz
    
    # 进行解压缩操作
    tar xzf Python-3.6.14.tgz 
    
    # 进入目录
    cd ./Python-3.6.14
    
    # 进行配置,并通过--prefix指定install后的目录
    ./configure --prefix="$EMSDK/python3"
    
    # 进行编译
    make
    
    # 进行安装
    make install
    

            将下面的环境变量值添加到.bashrc的最后即可。

    export EMSDK_PYTHON="$EMSDK/python3/bin/python3.6"
    

           执行source ~/.bashrc 命令完成后,环境变量设置成功。结果如下图所示:

    四、简单测试

           前面环境配置成功,使用官方自带的demo进行简单的测试。在指定的目录中,创建一个hello.c的文件,代码如下:

    #include <stdio.h>
    
    int main() {
      printf("hello, world!\n");
      return 0;
    }

           打开命令提示符或者终端,进入hello.c所在目录,执行以下命令,来生成对应的文件。命令详解查看另外的博客:Emscripten 编译器(emcc) 命令总结_wngzhem的博客-CSDN博客 。

    emcc ./hello.c -s WASM=1 -o ./hello.html

          执行后会产生三个新文件,如下图所示:

          hello.wasm:二进制的wasm模块代码。
          hello.js 一个包含了用来在原生C函数和JavaScript/wasm之间转换的JavaScript文件
          hello.html 一个用来加载,编译,实例化的一个HTML文件

           将该文件夹部署到自己搭建的web服务器中,通过浏览器来查看。我通过启动http服务命令( emrun --no_browser --port 8080 ./hello_world.html ),没有启动成功,没有去查询具体原因。结果如图所示:

          可以查看到hello.c中本应该输入到终端中的hello world输入到了浏览器中。说明环境搭建成功。

         下一篇文章来简单分析一下wasm与js中的内容,以及编译c/c++程序的多种方式。 

    参考资料

              1、 Git 教程 | 菜鸟教程 (runoob.com)

              2、Python 基础教程 | 菜鸟教程 (runoob.com)

              3、Getting Started — Emscripten 3.0.1-git (dev) documentation

              4、Download and install — Emscripten 3.0.1-git (dev) documentation

              5、Emscripten Tutorial — Emscripten 3.0.1-git (dev) documentation

              6、Emscripten 编译器(emcc) 命令总结_wngzhem的博客-CSDN博客

    更多相关内容
  • 使用 CMake 进行 Emscripten SDL2 测试 使用 emscripten 和本机构建 SDL2 程序的小型测试项目。 建造 本国的 要构建本机,您必须安装 SDL2 和 SDL2_image。 mkdir build cd build cmake .. make 恩脚本 要使用 ...
  • Emscripten CMake极小 一个使用CMake构建应用程序的极简示例。 在Windows上构建 1.安装先决条件 您必须安装以下软件: (需要至少3.6版本)。 2.安装Emscripten SDK 您可以在页面上找到详细说明。 您必须使用以下...
  • 欢迎使用emscripten Wiki!该项目将指导新手玩家如何将一个opus音频库,编译为js,并运行在浏览器中。 emscripten环境建设 由于emscripten的环境构建需要很多安装包下载速度极慢,在这里介绍大家使用docker合并来...
  • emscripten-build-tool 帮助您使用 emscripten 构建大型项目的工具。
  • 尽管Emscripten主要致力于使用编译C和C ++,但是它可以与其他使用LLVM的编译器集成(例如,Rust具有Emscripten集成,并且具有wasm32-unknown-emscripten和asmjs-unknown-emscripten目标)。 执照 Emscripten有2个...
  • 获取(并编译)Emscripten工具链 git clone https://github.com/juj/emsdk.git cd emsdk 这可能需要一段时间: ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit ./emsdk ac
  • ffmpeg.js 该库提供了使用将FFmpeg构建移植到JavaScript的功能。 生成针对浏览器内部使用进行了优化:最小的大小可加快加载速度,asm.js,性能调整等。尽管它们也可在Node中使用。 建物 当前可用的版本(将来可能会...
  • libopus 1.3.1的JS绑定,随Emscripten一起移植。 用法 var OpusScript = require ( "opusscript" ) ; // 48kHz sampling rate, 20ms frame duration, stereo audio (2 channels) var samplingRate = 48000 ; var ...
  • 这是使用标准的Python实现(CPython)来完成的,该实现通过emscripten进行编译以生成Web Assembly库。 这种方法的好处是: 这样就可以访问完整的Python实现。 Wasm可以非常快,因此解释器仍然非常有用。 它支持...
  • LLVM 通过使用 Emscripten 编译 Rust 代码。 代码可以使用一些清理,但它或多或少是有效的。 当前,在使用编译时,似乎只需要-break-struct-arguments 。 编译: make BreakStructArguments.so \ LLVM_PREFIX=.....
  • Getting started with WebAssembly & Emscripten March 5, 2019 Video Getting started with WebAssembly & Emscripten English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 2.5 Hours | 687 MB A complete guide...
  • ##建造 ###本国的 mkdir build cd build CXX=`which clang++` cmake .. make ./main ### Web mkdir build cd build emcmake cmake .. make open main.html ##注意切换构建时,您需要破坏build目录。
  • Emscripten RelooperJavaScript胶水。 用于访问Emscripten Relooper算法的简单API。 参考 参见和
  • emscripten-fastcomp.7z

    2019-09-25 17:28:00
    Low Level Virtual Machine (LLVM) ================================ This directory and its subdirectories contain source code for LLVM, a toolkit for the construction of highly optimized compilers, ...
  • emscripten-1.38.31.tar.gz

    2021-03-12 18:03:33
    emscripten
  • 游戏音乐鸸鹋的 Emscripten 风味 这可以被认为是一个临时分支,同时我制定了向 CMake 构建系统添加选项的详细信息,以启用库的可选 Emscripten 构建。 历史有望被改写。 目前,可以通过以下方式完成非常粗略的构建...
  • WebAssembly 可以把 c/c++ 预研编译为 Jscript 在 web 端运行,安装编译环境比较麻烦。参考 https://blog.csdn.net/y601500359/article/details/93862831 这个链接还需要上传的压缩包
  • emscripten-fastcomp-incoming 安装包,方便无法使用外网的同学使用
  • cppwasm-book:使用CC ++进行WebAssembly友好编程-Emscripten实践
  • WebAssembly是新一代的Web虚拟机标准,C/C 程序可以通过Emscripten工具链编译为WebAssembly二进制格式.wasm,进而导入网页中供JavaScript调用——这意味着使用C/C 编写的程序将可以直接运行在网页中。
  • Emscripten加密

    2022-04-29 14:50:32
    Emscripten加密
  • emscripten-1.38.30

    2019-05-06 09:13:32
    官网下载太慢,下载了好久才下载下来
  • emsdk:Emscripten SDK

    2021-02-03 04:03:27
    Emscripten SDK Emscripten工具链作为独立的Emscripten SDK分发。 该SDK提供了所有必需的工具(例如Clang,Python和Node.js)以及一种更新机制,该机制可在发行时迁移到较新的Emscripten版本。 您也可以从源代码...
  • Emzinten emzinten是流行的Zint条码库的脚本编译版本。 该模块提供了WASM代码的包装,该包装公开了Zint库的功能,这对javascript开发人员最有用。 该代码可在现代浏览器和现代Node.js中运行。 ...
  • 介绍 这是样例代码示例,该样例代码说明如何使用C ++编写使用make和mingw32-make编译的代码,然后如何将其转换为javascript。 最后,它提供了两个示例测试项目,一个用于javascript输出,一个用于C ++输出。...
  • C++ 代码直接渲染到 uint8 缓冲区(没有 OpenGL 或类似的东西)。... 与 GPU 渲染相比,性能相当低,但如果目标分辨率不是很大,仍然非常有用。 对于“复古”风格的像素艺术作品,它应该可以很好地工作。
  • Windows的Nim Emscripten教程。 步骤0:确保Emscripten可以编译C: 假定Windows 10 64位。 首先,如果尚未安装Python,请安装它。 如果您尚未安装Python,请 。 注意:请确保选中将Python添加到PATH的复选框。 ...
  • Xash3D-Emscripten 引擎的mittorn的端口的重新上传,可以在您的Web浏览器中立即运行Half-Life:上行链路,Half-Life:死亡竞赛,Half-Life:第一天和危险课程。 现在,您可以分叉代码并进行自己的更改,而无需使用...
  • emscripten-1.38.13

    2018-10-24 11:48:58
    opencv编译所需。Emscripten作为一款编译工具链,轻松将C/C++编译成JavaScript,为Web编程提供了很多C/C++所使用使用的库,固定5积分。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,938
精华内容 1,175
关键字:

Emscripten