本教程将展示如何使用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.jsLeadtools.Annotations.Engine.jsLeadtools.Document.jsLeadtools.Document.Viewer.jsLeadtools.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对象。