js教程视频哪个好,js教程视频哪个好看 收藏 0

「实操演示」比肩V8的QuickJS入门指南

2019年末的某天,我在某个科技网站的报道中似乎听到了：神级程序员Fabrice Bellard手撸了一个类V8引擎,编译后不到1M,精简后可低至500k。当时马上到搜索引擎中寻找，找到了QuickJS的主页链接 bellard.org/quickjs 。抽空快速看了一下文档,立刻惊为天人,这不就是一个微型NodeJs核心吗？当时就打算入手试试，但手上没时间，就一直拖到了今天。这2天刚好休息,利用空闲时间动手了解了一下，以下做一个简单的实操教程，稍后有空将会制作成视频教程。

注：以下为萧鸣本人全程实操,所有程序调用及编译都正常通过，并且得到最后结果,确保不浪费大家宝贵的时间。

QuickJS是一个小型且可嵌入的Javascript引擎。它支持 ES2020规范，包括模块，异步生成器，代理和BigInt。它可选地支持数学扩展，例如大十进制浮点数（BigDecimal），大二进制浮点数（BigFloat）和运算符重载。

内置标准std的实现、os模块文件与系统操作模块的实现、多线程Worker、正则表达式、完整的模块引入机制，以及自定义动态链接库的引入。

它的qjsc编译器,可以将你的js文件编译成单个可执行文件,通过优化后，体积可以缩小至500k左右,所以它非常适合使用在嵌入式设备，或者嵌入到其他项目中去。

QuickJS是基于MIT协议发布的,大家可以访问它的官网并下载源码进行研究学习

1972年生的FabriceBellard，神级程序员之一。

说说他的作品你就明白为什么称为神级了:

FFmpeg(流媒体和视频制作哪个不是用它做底层,20年前年幼的我看到各种解霸,感觉人家做媒体解码软件的太牛了,结果现在一看,bin文件夹下赫然躺着FFmpeg)

QEMU 最牛的模拟器谁用谁知道

他也是最快圆周率算法贝拉公式、TCCBOOT和TCC（微型C编译器）

好像还抽空搞了一个 TinyOpenGL

还用js写了一个可以运行在浏览器上的jsLinux(请自行查阅)

使用make命令来安装.可以不使用make install,直接在当前文件夹下可以找到编译后的文件

mac下可以直接用homebrew安装

安装成功之后,我们可以直接执行qjs命令，我们可以看到我们进入了一个交互式编程界面,熟悉Chorme控制台或者Python编程的同学,应该理解在里面进行编码实验。

交互式编程界面环境中,默认导入了std和os模块,可以直接使用,在js文件中,则需要导入模块后使用。

编辑一个js文件，保存为test.js

保存文件,我们用qjs来解释执行它

得到如下执行结果

必须将源码中的quickjs.h、quickjs-libc.h、libquickjs.a 三个文件拷贝到test.js同目录下

如果怕麻烦,可以把你的文件拷贝到源码中进行编译

这种编译成单个二进制文件的形式，不依赖任何外部环境与程序，去除一些当前项目不需要的库（比如正则库等）可以极大减小二级制文件的体积，可以精简至500k左右。

而且因为QuickJS里内置了Worker,以及可以通过exec来调用外部程序，我们可以用它来做很多事情，比如文件监听、进程守护等。

std模块：

包含了常用的evalScript、loadScript、loadFile、open、popen、fdopen、tmpfile、puts、printf、sprintf、strerror、gc、getenv、urlGet、parseExtJSON

包装了libc的stdin、stdout、stderr。

Error，包含了常见的枚举对象,并可以自定义其他错误代码：EINVAL、EIO、EACCES、EEXIST、ENOSPC、ENOSYS、EBUSY、ENOENT、EPERM、EPIPE

FILE原型:

close、puts、printf、flush、seek、tell、tello、eof、error、clearerr、read、write、getline、readAsString、getByte、putByte

os模块：提供了操作系统特定的 低级文件访问、信号、计时器、异步IO、线程 方法

open、close、seek、read、write、isatty、ttyGetWinSize、ttySetRaw、remove、rename、realpath、getcwd、chdir、mkdir、stat、lstat、utimes、symlink、readlink、readdir、setReadHandler、setWriteHandler、signal、kill、exec、waitpid、WNOHANG、dup、dup2、pipe、sleep、setTimeout、clearTimeout、platform、Worker

QuickJS实现了特定的Unicode库,不用依赖外部的大型Unicode库（比如ICU）。所有的Unicode表都经过了压缩来提高访问速度（果然神级程序员）。

C API的设计简单有效,C API在 quickjs.h中进行定义

以下结构定义在quickjs.h文件中

关键点在于定义API函数的入口、定义初始化的回调函数并暴露处理、定义初始化模块方法（系统自动调用，这个函数名称只能遵循qjs的规则）

萧鸣注： 这里会碰到一个坑,可能在编译期间会提示你:

libquickjs.a无法创建动态链接库,要使用 -fPIC进行编译

what？我不是用了 -fPIC参数了吗？实际上这里说的是整个qjs源码make时要加入-fPIC参数

我们找到源码里的makefile,打开找到以下内容

然后在 CFLAGS 这行增加参数 -fPIC, 然后重新make即可

在js脚本中调用这个动态链接库

执行后得到以下结果

经过本人亲手试验, QuickJS可以灵活地使用在一些嵌入式程序之中，因为体积小可以嵌入到单片机中使用，通过自己扩展c方法，提供js对单片机的控制。

同时也可以参考cocos2d-x之类游戏引擎,利用嵌入的Quickjs来操纵底层的图形图像接口，来做一个自己的游戏引擎。

也可以嵌入到一些软件中去,用js来调用软件内部的功能。

也可以嵌入到安卓和苹果app中去,形成自己动态的脚本配置。

总之只有想不到没有做不到。

后续更多对于QuickJS的尝试，比如将QuickJS嵌入到nginx中去,直接在nginx中提供js脚本提供web服务等，将在后续的视频教程中奉献给大家。

在web中播放rtsp视频方案对比

• 需要先准备好一个可播放的rtsp视频地址，可以下载 VLC Media Player测试是否可以播放，下载后点击“媒体”、“打开网络串流”、“输入地址”、“播放”

网上有很多方案都是通过将rtsp转成hls或者rtmp的视频流，这些方法实现起来较为简单，但不符合要求

• 【转hls】延时非常高，甚至几十秒，不适宜这种实时性强的场景
• 【转rtmp】需要借助flash插件才可以使用，而2020年12月谷歌浏览器将不再支持flash，其他浏览器也将逐步淘汰flash，长远来看也不适宜
• 【转图片帧】需要后端借助工具将rtsp视频流每一帧转成图片，再通过websocket协议实时传输到前端，前端用canvas绘制，这种方法对后端转流要求较高，每张图片如果太大会掉帧，延时也不稳定。

这套方案的核心为 bilibili 开源的 flvjs，原理是在后端利用 转流工具 FFmpeg 将 rtsp流 转成 flv流，然后通过 websocket 传输 flv流，在利用 flvjs 解析成可以在浏览器播放的视频。

1. 运行前准备

• 启动后端需要 node 环境，前往node官网下载，建议下载LTS稳定版本
• 前端demo使用的是 Vue，不了解的无影响，想了解的请移步Vue官网
• 电脑需要安装 FFmpeg 转流工具，前往FFmpeg下载页下载，安装教程，注意安装路径不要包含中文

2.安装依赖包

• 在项目根目录终端中运行 npm i 安装后端所需依赖包
• 在 front 目录终端中运行 npm i 安装前端所需依赖包

3.修改代码

• 修改 index.js 文件中的 FFmpeg 安装路径 ffmpeg.setFfmpegPath(\”D:/software/ffmpeg-20200713-7772666-win64-static/bin/ffmpeg\”); 填写本机的安装路径
• 修改 front/src/componets/HelloWorld.vue 中的 rtsp 地址为经测试可用的地址

4.启动

• 在项目根目录终端中运行 node index.js 启动node服务
• 在 front 目录终端中运行 npm run dev 启动前端服务，启动完成后在浏览器中打开前端服务地址即可看到视频

5.效果

• 延时在2秒左右
• FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果

C++音视频开发学习资料：点击领取→

这套方案需要搭载 Kurento 转流服务器，将 rtsp流 转成 webrtc流，直接在video中播放（需要浏览器支持webrtc）

1. 运行前准备

• Ubuntu服务器或虚拟机
• 支持 webrtc 的浏览器（现代主流浏览器基本都支持）

1. 在Ubuntu服务器或虚拟机上安装Kurento，服务器是后端的童鞋安装的，据说按照文章可以一步到位安装成功。
2. clone一份官方的前端代码：kurento-rtsp2webrtc
3. Kurento服务启动之后，启动前端项目，打开页面输入可用的rtsp视频地址，再点击start即可看到画面
4. 效果

• 延时非常低，几乎是实时的，满足要求
• 只能在局域网内播放，如果你想在公网上使用，还要学习网络穿透打洞，服务器部署能力，流量消耗等等
• Kurento服务有很多配置，学习成本相对较高，需要专门去研究这个东西，而且是很久以前的项目，资料不是特别多，慎用

这种方案实现起来简单，但是性能堪忧，可以试一下体验一下，大多数业务场景都使用

1. 运行前准备

• VLC播放器 VLC Media Player

1. VLC播放器操作步骤

• 点击媒体菜单，选择“流”

选择“网络”，输入可使用的rtsp地址，再选择“串流”

选择“下一个”

下拉选择“HTTP”，再点击右边的“添加”按钮

输入ip和路径（将组成写入video标签src的路径），点击“下一个”

选中“激活转码”，下拉选择“OGG”，点击“下一个”

选中“串流所有基本流”，再点击“流”

C++音视频开发学习资料：点击领取→

这时候看到窗口顶部显示“converting”，底部的时间也开始动起来了，就是已经在转http流了

3.前端实现

• 只需要填写video的src为 http://127.0.0.1:8889/123 (刚刚输入的端口和路径)并设置type为 video.ogg打开页面即可播放

4.效果

• 直接用 VLC 播放器播放本来就有一定的延迟，大概在3s左右，稳定的时候也有1-2s，在经过转流延时更高
• 占用大量CPU，转流一个视频占用了大概15%-18%的CPU，多路播放需谨慎，使用辅码流可减少CPU消耗
• 极少的情况会出现卡顿
• 第一帧画面是绿色的影响观感

这种方案是我见过免费方案中效果最好的，原理是在后端利用 转流工具 FFmpeg 将 rtsp流 转成 图片流，然后通过 websocket 传输 图片，在利用 jsmpeg.js 绘制到canvas上显示

1. 运行前准备

• 启动后端需要 node 环境，前往node官网下载，建议下载LTS稳定版本
• 电脑需要安装 FFmpeg 转流工具，前往FFmpeg下载页下载，安装教程，注意安装路径不要包含中文

2.安装依赖包

• 在项目根目录终端中运行 npm i 安装后端所需依赖包

3.修改代码

• rtsp-video-node 中的代码无需更改，node服务默认端口为8088，如出现端口占用，更改 app.js 中的 app.listen(8088, () => {})
• rtsp-video-canvas 中修改 rtspData.url 为可用的rtsp地址，修改rtspData.port 为没有被占用的端口给websocket

4.启动

• 在项目根目录终端中运行 node app.js 启动node服务
• 在浏览器中打开 index.html

5.效果

• 延时在500ms左右
• FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果（辅码流每个ffmpeg进程占用3%的CPU），demo中有运行shell脚本的代码用于杀掉无用的FFmpeg进程，未测试效果。

C++音视频开发学习资料：点击领取→

由零视技术提供的一种解决方案，有收费版，可发送公司相关信息获取测试licence，无licence会受到每隔一小时转流服务会自动断开的限制，一小时后需要重新启动服务，且最多同时播放 9路 视频

1. 使用方法

• 根据系统不同下载对用版本 官方下载地址，注意最新版本在最下面，使用r11版本

2.注意事项

• 安装路径不能有中文
• token 是每个视频的唯一标识，可以使用url作为token
• 处理直接修改 conf 配置文件，还可以动态添加视频，h5stream api 手册，这里提供一个动态添加视频的demo供参考，直接放到 demo.html 同级的目录用浏览器打开即可
• 从 demo.html 文件中可以看出有两种播放器实例 H5sPlayerCreate 和 H5sPlayerRTC，前者基于websocket，后者基于webRTC，webRtc实时性更强且更稳定，本地调试只要浏览器支持webrtc基本不会有问题，如果h5stream服务和前端文件不再一个网络下，还需要更改配置文件 h5ss.conf，将bCloudMode置为true，strRelatedPublicIp填写h5stream 服务所在服务器的的ip地址 ：

有些电脑没有GPU加速，但浏览器开启了GPU加速选项，这会导致播放出来的视频帧数变低（播放稳定但是会感觉卡顿），解决办法是关闭掉浏览器的GPU加速：如谷歌浏览器 -> 设置 -> 高级 -> 系统 -> 使用硬件加速模式（如果可用）

另外，检查电脑是否带GPU，打开任务管理器 -> 性能，能看到GPU项那就是有

• 每隔一小时服务会自动断开，先杀掉h5ss进程在重启，懂shell的可以写定时查杀重启，但不知道h5stream会不会有什么机制防止这种操作。

3.效果

• 延时400ms左右
• 一个页面同时播放9路无压力

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com