用JavaScript动态提取视频中的文字

现阶段整个社会短视频,中视频为王,文字传播虽然被弱化,但在业务中还是有一定的传播价值,今天就来讲一讲如何使用js动态提取视频中的字幕。

先来看看效果: 

屏幕录制2024-02-29 15.40.18

  

一,tesseract.js介绍

tesseract.js使用webassembly端口把Tesseract OCR 引擎包装了起来,可以让js开发者在浏览器端和node端都能方便的进行使用。

浏览器端使用webpack,esm或者script标签进行引入。安装成功之后既可以用来提取图片中的文字也可以动态提取视频字幕。

提取图片文字的小栗子:

import { createWorker } from 'tesseract.js';(async () => {const worker = await createWorker('eng');const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');console.log(ret.data.text);await worker.terminate();
})();

二,搭建项目

下面来一步一步来看看如何提取视频中的文字

项目结构如下:

package.json文件如下

三、编写html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Tesseract.js Video Streaming Recognition</title><link rel="stylesheet" href="./css/style.css"><script src='https://unpkg.com/tesseract.js@v2.0.0-beta.1/dist/tesseract.min.js'></script>
</head>
<body><div id="root"><video id="poem-video" width="640" height="360" crossorigin="anonymous"><source src="./do-not-go-gentle.mp4" type="video/mp4"></video><div id="sep"></div><div id="messages"></div></div><script>const { createWorker, createScheduler } = Tesseract;const scheduler = createScheduler();const video = document.getElementById('poem-video');const messages = document.getElementById('messages');let timerId = null;const addMessage = (m, bold) => {let msg = `<p>${m}</p>`;if (bold) {msg = `<p class="bold">${m}</p>`;}messages.innerHTML += msg;messages.scrollTop = messages.scrollHeight;}const doOCR = async () => {const c = document.createElement('canvas');c.width = 640;c.height = 360;c.getContext('2d').drawImage(video, 0, 0, 640, 360);const start = new Date();const { data: { text } } = await scheduler.addJob('recognize', c);const end = new Date()addMessage(`[${start.getMinutes()}:${start.getSeconds()} - ${end.getMinutes()}:${end.getSeconds()}], ${(end - start) / 1000} s`);text.split('\n').forEach((line) => {addMessage(line);});};(async () => {addMessage('Initializing Tesseract.js');for (let i = 0; i < 4; i++) {const worker = createWorker();await worker.load();await worker.loadLanguage('eng');await worker.initialize('eng');scheduler.addWorker(worker);}addMessage('Initialized Tesseract.js');video.addEventListener('play', () => {timerId = setInterval(doOCR, 1000);});video.addEventListener('pause', () => {clearInterval(timerId);});addMessage('Now you can play the video. :)');video.controls = true;})();</script>
</body>
</html>

注意这里初始化是一个异步操作,初始化画布完成之后,video的play事件触发之后,每间隔一秒会重绘画布输出提取到的文字信息。

-- END --

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710475.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Termux安装MySQL并实现公网远程连接本地数据库

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…

如何解决 C/C++ 编译器优化导致的编译BUG(程序崩溃)支援VC++/CLANG/GCC

本文仅适用于&#xff0c;有愿意、爱捣鼓的童靴。 因编译器优化导致编译BUG&#xff0c;即DEBUG下面无故障稳定工作&#xff0c;但RELESE下程序会在特定函数位置上崩溃。 这要求 C/C 开发人员拥有最基本的素质&#xff0c;需要能够承受&#xff0c;逐行审视编译器输出的目标平…

【二叉搜索树】【递归】【迭代】Leetcode 700. 二叉搜索树中的搜索

【二叉搜索树】【递归】【迭代】Leetcode 700. 二叉搜索树中的搜索 二叉搜索树解法1 递归法解法2 迭代法 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 二叉搜索树 二叉搜索树&#xff08;Binary Search Tree&#xff…

使用Python,maplotlib绘制树型有向层级结构图

使用Python&#xff0c;maplotlib绘制树型有向层级结构图 1. 效果图2. 源码2.1 plotTree.py绘制层级结构及不同样式2.2 plotArrow.py 支持的所有箭头样式 参考 前俩篇博客介绍了 1. 使用Python&#xff0c;networkx对卡勒德胡赛尼三部曲之《群山回唱》人物关系图谱绘制 2. 使用…

MySQL 使用 pt-archiver 删除数据

文章目录 前言1. 环境准备1.1 模拟造数1.2 工具安装 2. 删除数据2.1 批次删除表2.2 原理解析2.3 批处理思路 后记 前言 在线核心业务都会有日志表&#xff0c;随着业务持续运行&#xff0c;日志表每天都在增大&#xff0c;最后超过阈值触发空间使用率告警。DBA 处理空间告警时…

爬取某牙视频

爬取页面链接&#xff1a;游戏视频_游戏攻略_虎牙视频 爬取步骤&#xff1a;点进去一个视频播放&#xff0c;查看media看有没有视频&#xff0c;发现没有。在xhr中发现有许多ts文件&#xff0c;但这种不是很长的视频一般都有直接的播放链接&#xff0c;所以目标还是找直接的链…

数据结构-----再谈String,字符串常量池,String对象的创建、intern方法的作用

文章目录 1.字符串常量池1.1. 创建对象的思考2.2. 字符串常量池(StringTable)1.3. 再谈String对象创建1.4. intern方法 1.字符串常量池 1.1. 创建对象的思考 下面两种创建String对象的方式相同吗&#xff1f; public static void main(String[] args) {String s1 "hel…

【Elasticsearch查询】深度查询

文章目录 深度查询from/toScroll如何查询重要笔记保持搜索上下文环境存活手动清除切片 Search After排序查询注意Demo 深度查询 from/to 运行Search进行查询时&#xff0c;可以使用from和size参数对结果进行分页。 from参数定义了要获取的第一个结果的偏移量。size参数表示允…

我用 Navicat 的这些技能少加了好多班,也为公司挣了不少w

今天又用 Navicat 解决了一个数据同步的需求&#xff0c;财务又到账一笔收入....... 本文我将结合我过去的实践&#xff0c;给大家推荐一款数据库的运维工具。给大家呈现一下竟然可以用 Navicat 解决这些实际问题 。 熬了几个夜&#xff0c;毫无保留地将这些技能分享&#xf…

使用R语言进行判别分析

一、样本数据描述 2016年全国31个省、直辖市、自治区城镇居民人均消费支出水平划为2类&#xff0c;其中北京和上海划为一类&#xff0c;其余地区划为一类&#xff0c;将广东和西藏作为待判样本&#xff0c;具体划分数据如下表&#xff0c;试对数据进行判别分析&#xff0c;并将…

vue中动态引入图片

分析 很多时间&#xff0c;不管是vue2&#xff0c;还是vue3开发中都会遇到&#xff0c;动态渲染图片的功能&#xff0c;但是为什么我们直接将图片的路径直接赋值给变量的时候&#xff0c;图片渲染不出来&#xff0c;而通过require引入加载图片后却能正常渲染呢&#xff1f;主要…

解释什么是内连接、左连接和右连接,并给出每种连接的SQL示例

在关系型数据库中&#xff0c;连接&#xff08;JOIN&#xff09;是一种在查询中组合来自两个或多个表的行的方法。这些表通过一个或多个列中的相关值关联起来。SQL 提供了几种类型的连接&#xff0c;每种连接在处理表之间的关系和数据检索时都有其特定的方式。最常见的连接类型…

华为HarmnyOS TypeScript基础语法快速入门

华为HarmnyOS TypeScript基础语法快速入门 一、JavaScript、TypeScript、ArkTS二、TypeScript基础语法1. 基础类型2. 条件语句3. 函数4. 类5. 模块6. 迭代器 一、JavaScript、TypeScript、ArkTS ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript&#xff08;简称TS&am…

Flask+Gunicorn中文乱码解决方案

在使用FlaskGunicorn部署应用时&#xff0c;发现中文的输出存在乱码的现象。这是因为Python的默认编码是ASCII&#xff0c;而ASCII并不支持中文字符。 解决Python中文乱码问题的首要任务是确保使用合适的编码方式。当你处理中文字符时&#xff0c;应该使用UTF-8编码。UTF-8是一…

Axios入门

1.概念 Axios是一个开源的可以用在浏览器和node.js的异步通信框架&#xff0c;他的主要功能是实现Ajax异步通信 2.Axios入门程序 2.1.准备json格式的文件 {"name": "小明","address": {"street": "雁塔","city"…

动画原理:表面形变算法的思考与总结

前言&#xff1a; 之前我的文章 Mesh形变算法_mesh算法-CSDN博客就有大致的讨论过&#xff0c;介绍的也比较粗略&#xff01;现在主要是想在Triangulated Surface Mesh Deformation方向上更深入的讨论一下&#xff01;结合今年我对这一块的学习谈谈我的理解~ 下面要介绍大致几…

Java设计模式——桥连模式

桥接模式简单来说就是通过将抽象部分和具体部分分离&#xff0c;使它们可以独立地变化。如果你的一个类存在多个变化维度&#xff08;如抽象和具体的实现&#xff09;。若使用继承来处理这些变化&#xff0c;将会导致类层次结构的急剧增加&#xff0c;难以管理和维护。并且&…

MySQL(基础篇)——函数、约束

一.函数 1.定义 函数是指一段可以直接被另一段程序调用的程序或代码。 2.字符串函数 常见如下&#xff1a; -- 字符串拼接 SELECT CONCAT(hello,MySql) AS CONCAT -- 将字符串全部转为小写 SELECT LOWER(HEllo MYSql) AS LOWER -- 将字符串全部转为大写 SELECT UPPER(Hello…

环境配置 |Jupyter lab/Jupyter Notebook 安装与设置

ipynb使用Jupyterlab/Jupyter Notebook 来编写Python程序时的文件,在使用时,可以现转换为标准的.py的python文件 1.Jupyter Lab 1.1.下载安装 环境&#xff1a;Linux pip install jupyterlab 1.2.使用 jupyter lab 点击后进入 1.3.jupyter lab更换内核 因为我的是在anac…

178文章复现:基于matlab的微震图像去噪

文章复现&#xff1a;基于matlab的微震图像去噪&#xff0c;利用同步压缩连续小波变换进行自动微震去噪和起始检测&#xff0c;SS-CWT 可对时间和频率变化的噪声进行自适应过滤&#xff0c;可以去除小幅值信号中的大部分噪声&#xff0c;检测地震事件并估算地震发生时间。程序已…