本教程将展示如何使用VideoViewer
使用LEADTOOLS Multimedia SDK在React JS应用程序中执行视频文件的简化回放。188宝金博怎么下载
概述 | |
---|---|
总结 | 本教程介绍如何使用VideoViewer 对象在React JS应用程序中。 |
完成时间 | 30分钟 |
Visual Studio项目 | 下载教程项目(514kb) |
平台 | React JS Web应用程序 |
IDE | Visual Studio:服务\ Visual Studio代码:客户端 |
开发许可 | 下载LEADTOOLS |
用另一种语言试试 |
|
步骤熟悉创建项目的基本步骤添加引用和设置License教程,在工作之前播放一个视频文件- React JS教程。
确保安装了Yarn,这样就可以通过命令行快速创建React应用程序。如果没有安装纱线,可以在以下位置找到:
https://classic.yarnpkg.com/en/docs/install/#windows-stable
中创建的项目的副本开始添加引用和设置License教程。如果您没有该教程项目的副本,请按照该教程中的步骤创建它。
所需要的参考资料取决于项目的目的。对于这个项目,需要以下JS文件:
Leadtools.js
Leadtools.Annotations.Engine.js
Leadtools.Document.js
Leadtools.Document.Viewer.js
Leadtools.188宝金博怎么下载Multimedia.js
请确保将这些文件复制到公众\常见
文件夹中导入公众\ index . html
文件。
有关要为JavaScript应用程序包括哪些文件的详细信息,请参见你的申请所包含的文件.
许可证解锁项目所需的特性。它必须在调用任何工具箱函数之前设置。有关详细信息,包括针对不同平台的教程,请参阅设置运行时License.
有两种类型的运行时许可证:
请注意
中详细介绍了添加LEADTOOLS本地引用和设置许可添加引用和设置License教程。
打开index . html
在公共
文件夹,并在头部中添加以下必要的脚本标记,以导入LEADTOOLS依赖项。
<头>
<元字符集="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<元名称="viewport" content="width=device-width, initial-scale=1" />
<Meta name="theme-color" content="#000000" />
<元
name = "描述"
content="使用create-react-app创建的网站"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest. linkjson " />
<脚本src = " https://code.jquery.com/jquery-3.4.1.min.js "
诚信= " sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo = " crossorigin =“匿名”></脚本>
<脚本src = " /共同/ Leadtools.js "></脚本>
<脚本src = " /共同/ Leadtools.Annotations.Engine.js "></脚本>
<脚本src = " /共同/ Leadtools.Document.js "></脚本>
<脚本src = " /共同/ Leadtools.Document.Viewer.js "></脚本>
<脚本src = " /共同/ Leadtools.Multi188宝金博怎么下载media.js "></脚本>
<脚本src = " /共同/ app.js "></脚本>
<标题>反应的应用</标题>
</头>
随着项目的创建,引用的添加,许可证集编码就可以开始了。
打开App.js
在src
然后用下面的代码替换HTML:
进口标志从”。/ logo.svg ';
进口”。/ App.css ';
函数应用(){
返回(
< div className =“应用程序”>
< h1 id =“serviceStatus”>头h1 > < /
< input type =“文件”id =“fileSelect”接受=“视频/ *”/>
<按钮id =“addToPlayback”> . >ADD TO PLAYBACK
< div id =“playbackDiv”>
< / div >
< / div >
);
}
出口默认的应用程序;
打开app.js
文件在文本编辑器。该文件应该位于/公共/常见
项目结构中的文件夹。创建app.js
是由添加引用和设置License教程。
在顶部app.js
文件,在onload
函数时,添加一个名为showServiceError
.将下面的代码添加到新函数中:
函数showServiceError(jqXHR, statusText, errorThrown) {
alert ("服务返回错误。详见控制台。”);
let serviceError = lt.Document.ServiceError。parseError(jqXHR, statusText, errorThrown);
console.error (serviceError);
}
在设置许可代码的下面添加以下代码,在onload
函数,设置视频查看器和播放选定的视频。请注意,onload
函数必须使用异步
关键字,以便利用等待
操作符。
//连接到文档服务
let serviceStatus = document.getElementById(“serviceStatus”);
lt.Document.DocumentFactory.serviceHost =“http://localhost: 40000”;
lt.Document.DocumentFactory.servicePath ="";
lt.Document.DocumentFactory.serviceApiPath =“api”;
serviceStatus。innerHTML =“连接到”+ lt.Document.DocumentFactory.serviceUri;
等待lt.Document.DocumentFactory.verifyService ()
试一试{
serviceStatus。innerHTML =“成功连接到”+ lt.Document.DocumentFactory.serviceUri;
}抓(错误){
console.error(错误);
serviceStatus。innerHTML =“连接失败”+ lt.Document.DocumentFactory.serviceUri;
}
//设置视频查看器
这.videoViewer =新lt.188宝金博怎么下载Multimedia。VideoViewer({root: document.getElementById(“playbackDiv”)});
//播放所选视频
varfileSelect = document.getElementById(“fileSelect”);
varbtn = document.getElementById(“addToPlayback”);
btn。Onclick = async () => {
如果(! fileSelect.files) {
返回;
}
let videoFile = fileSelect.files[0];
常量选择=新lt.188宝金博怎么下载Multimedia.ConvertVideoOptions ();
常量safeUrl =等待lt.Multi188宝金博怎么下载media.MultimediaFactory。convertVideo (videoFile、期权);
videoViewer.setVideo (safeUrl.toString ());
}
导航到App.css
,在src
创建HTML元素的文件夹。添加以下代码以改善应用程序的视觉效果。
.App {
text-align:中心;
background - color: # 61 dafb;
}
@media (preferred -reduced-motion: no-preference) {
.App-logo {
动画:App-logo-spin无限20s线性;
}
}
.App-header {
background - color: # 282 c34;
最小高度:100 vh;
显示:flex;
flex-direction:列;
对齐项目:中心;
justify-content:中心;
字体:calc(10px + 2vmin);
颜色:白色;
}
.App-link {
颜色:# 61 dafb;
}
@keyframes App-logo-spin {
从{
变换:旋转(0度);
}
, {
变换:旋转(360度);
}
}
# addToPlayback {
Background-color: rgb(195, 250, 241);
text-align:中心;
font-family: Arial, Helvetica, sans-serif;
粗细:100;
宽度:350 px;
填充:10 px;
保证金:汽车;
}
# serviceStatus {
background - color: # 888888;
padding-left: 15 px;
保证金:汽车;
padding-right: 15 px;
text-align:中心;
}
# playbackDiv {
Background-color: rgba(170, 170, 170, 1);
这个特性:1%;
保证金:汽车;
身高:400 px;
宽度:400 px;
}
# fileSelect {
content:“选择一些文件”;
显示:inline-block;
背景:线性梯度(顶部,#f9f9f9, #e3e3e3);
边框:1px实体#999;
border - radius: 3 px;
填充:5px 8px;
大纲:没有;
空白:nowrap;}
光标:指针;
文字阴影:1px 1px #fff;
粗细:700;
字体大小:10 pt;
}
为了成功运行此应用程序,需要LEADTOOLS . net框架文档服务。.NET框架文档服务项目位于< INSTALL_DIR > \ LEADTOOLS22 \ \例子文档\ JS \ DocumentServiceDotNet \外汇
.
请注意
.NET FrameWork文档服务支持uploadDocumentBlob但是。net核心文档服务没有。
打开DocumentService.csproj
并使用IIS Express运行项目。在Visual Studio中运行csproj Document Service项目后,页面将显示该服务正在监听。客户端将能够与文档服务通信,允许图像数据处理,并从图像中返回OCR的文本。
要运行视频回放React应用程序,打开一个新的终端并将cd放入项目的根目录中。从那里,运行纱线开始
.如果项目中没有包含节点模块,请务必同时运行命令,npm安装
在运行项目之前。
要进行测试,请遵循以下步骤:
请注意
在HTML中不再支持AVI文件类型。
方法加载视频源文件并播放该文件VideoViewer
对象。