如何使用javascript将视频文件转换为字符串?

2024-05-12

我在 signalR 工作,我想通过将视频文件拆分为不同部分来将视频文件从一个客户端发送到另一个客户端。 我已经通过分割图像源数据发送图像并在另一个客户端上接收该图像。

    document.getElementById("fileUpload").addEventListener("change", readImage, false);
        function readImage() {
            if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        var imageString = img.src.toString()
                        var spliceStr = "";
                        var i = 0;
                        while (i < imageString.length)
                        {
                            spliceStr = imageString.substring(i, (i+50000));
                            ImageSpliceArray.push(spliceStr);
                            i = i + 50000;
                        }
                        $("#imageId").html('<img src="' + img.src + '"/>');
                        testR.server.hello("Start", imageString.length,"");
                        testR.server.hello("FragmentCount", ImageSpliceArray.length,"");
                        for(k=0;k<ImageSpliceArray.length;k++)
                        {
                            testR.server.hello("FragmentData", ImageSpliceArray[k], k);
                        }
                        testR.server.hello("Done", "", "");
                    };
                    img.src = e.target.result;

                };
                FR.readAsDataURL(this.files[0]);
            }
        }

现在我想要视频也有同样的效果。我读了一段视频input type ="file"。然后我知道将该视频放入 html video 元素中,但我希望视频所有数据都采用字符串格式,通过将该字符串拆分为不同部分来将该视频发送到另一个视频。

注意:SignalR 用于将文本从一个客户端发送到另一客户端。数据大小约为(50kb)。


这是今天我发现的第二件我认为不可能的事情是真的。我获取了一个小型 MP4 视频文件 (86KB),然后将其编码为基于 64 的数据 URIsite http://dopiaza.org/tools/datauri/index.php。我做了一个简单的测试页面<video>设置了 src 属性的元素:

`src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZj....

所以一串文本可以是一个视频,虽然我在我的驱动器上找不到50KB的视频文件,但我相信86KB的文件大小就足够了。你可以在这个上看到它Plunker http://plnkr.co/edit/nK4trpyRhgB4bETbr3kU?p=preview

从这里找到了这个article https://davidwalsh.name/convert-image-data-uri-javascript:

function getDataUri(url, callback) {
    var image = new Image();

image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

    canvas.getContext('2d').drawImage(this, 0, 0);

    // Get raw image data
                                                       callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

    // ... or get as Data URI
    callback(canvas.toDataURL('image/png'));
};

image.src = url;

}

// Usage
 getDataUri('/logo.png', function(dataUri) {
// Do whatever you'd like with the Data URI!
 });

You can modify this script to use videos instead of images.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用javascript将视频文件转换为字符串? 的相关文章

  • 为什么我可以使用 Date 对象进行数学运算? [复制]

    这个问题在这里已经有答案了 当我像这样减去两个日期对象时 const startTime new Date await someAsyncStuff const endTime new Date const elapsedTime endT
  • 是否有任何理由使用 axios 而不是 ES6 fetch [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 研究了 axios 和 ES6 fetch 的文档 我发现两者非常相似 并且都受到 ajax 及其简写的强烈影响 axios 的主要优点是浏览器
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 保证金如何运作?

    我在下面提供了marginfix这是一个块级元素并且one and two也是块级的 但它们是浮动的 这就是为什么它们位于同一行布局的原因 但是marginfix也不浮动 块级元素应位于该元素下方 如下所示
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • NodeJS - 将相对路径转换为绝对路径

    In my 文件系统我的工作目录在这里 C temp a b c d 在 b bb 下有文件 tmp txt C temp a b bb tmp txt 如果我想从工作目录转到该文件 我将使用以下路径 bb tmp txt 如果该文件不存在
  • 基于范围内变量的角度设置形式动作

    我一直在尝试设置一个搜索表单 可以在其中注入表单操作属性 在我的表格中我有
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • 将默认搜索文本添加到搜索框 html

    我正在努力将 搜索 文本添加到搜索框 我正在努力实现 onfocus 消失文本 And onblur 重新出现文本 到目前为止 我已经实现了这一点 但我必须将其硬编码为 html eg
  • 从浏览器访问本地文件?

    您好 我想从浏览器访问系统的本地文件 由于涉及大量安全检查 是否可以通过某种方式实现这一目标 或使用 ActiveX 或 Java Applet 的任何其他工作环境 请帮帮我 要通过浏览器访问本地文件 您可以使用签名的 Java Apple
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • 如何使用 Django (Python) 登录表单?

    我在 Django 中构建了一个登录表单 现在我遇到了路由问题 当我选择登录按钮时 表单不会发送正确的遮阳篷 我认为前端的表单无法从 查看 py 文件 所以它不会发送任何 awnser 并且登录过程无法工作 该表单是一个简单的静态 html
  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f
  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

随机推荐

  • MUI v5:系统属性样式与 sx prop 之间是否存在性能差异?

    The 从 v4 迁移到 v5 https mui com guides migration v4 box指南指出 The Box系统 props 在 v5 中有一个可选的替代 API 使用sx支柱 你可以阅读本节 https mui co
  • 将原生 Twilio Android SDK 与 Flutter 集成

    我正在尝试使用 flutter 创建 IP 语音 VOIP 移动应用程序 我还没有看到 twilio 语音 api 的 flutter 插件的实现 所以我使用 MethodChannel 将我的应用程序与本机 android 语音 api
  • 中间件 API 的最佳实践是什么? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我们正在开发一个中间件 SDK 采用 C 和 Java 语言 供游戏开发人员 动画软件开发人员 阿凡达开
  • 如何在多字段中使用富文本(在 CQ5 对话框中)? (防止“this.el.dom未定义”错误)

    我创建了一个自定义组件 并尝试使用 RTE xtype richtext 在我的对话框中的多文件中 现在 当我尝试删除项目时 或者在关闭并重新打开对话框后添加另一个项目时 该对话框既不会关闭 也不会使用 确定 按钮保存数据 对话框 xml
  • Jquery:排除元素

    我有以下代码 document ready function a rel each function this qtip content text img class middle src i icon processing gif alt
  • 使用 Xcode 6 和(可能)cocoapods 生成错误

    在构建使用 cocoapods 和最新 Xcode 6 GM 版本的 iOS 项目时 我收到以下静态分析器错误 error error reading pic error no analyzer checkers are associate
  • 如何使用 JavaScript 压缩文件?

    有没有办法使用 JavaScript 来压缩文件 例如 在雅虎邮件中 当您选择下载电子邮件中的所有附件时 它会被压缩并下载到单个 zip 文件中 JavaScript 能够做到这一点吗 如果是这样 请提供一个编码示例 我发现这个图书馆叫js
  • git-svn --忽略路径

    我现在在 git svn 的 ignore paths 选项上挣扎了几个小时 试图从大型存储库中仅获取某些标签 我想在 dev 处开始获取 看起来像 gt svn ls http 192 168 0 2 svn repo corporati
  • SwiftUI ScrollView 只向一个方向滚动

    尝试使用视图作为列表行样式来创建自定义列表 以摆脱默认情况下列表中难看的分隔线 但是 一旦我将 ZStack 行放入滚动视图中 滚动视图就会在两个方向上滚动 而不仅仅是垂直滚动 这是内容视图 NavigationView ScrollVie
  • Python 正则表达式从文本中提取域

    我有以下正则表达式 r a zA Z0 9 a zA Z0 9 61 a zA Z0 9 a zA Z 2 6 当我将其应用于文本字符串时 比方说 这是 www website1 com 这是 website2 com 我得到 www we
  • 通用 scala 函数,其输入是变量数量的函数

    我想定义一个函数f需要另一个函数g 我们需要g采取采取n双打 对于某些固定n 并返回一个 Double 函数调用f g 应该返回具体值n 例如 f Math max 2因为 Math sin 具有类型 Double Double gt Do
  • 在 iPhone 5 的横向模式下启动启动画面

    我们的通用应用程序仅适用于横向模式 我们需要为 iPhone 4 和 iPhone 5 添加启动画面 对于 iPhone 5 的肖像 我们使用 email protected cdn cgi l email protection 如何为 i
  • fsockopen() 和 SSL 出错,“无法启用加密”

    我正在尝试连接到 Nominet EPP 测试台 但收到 无法启用加密 的消息 这似乎是一个罕见的错误 没有记录的解决方案或原因 用行 socket fsockopen ssl testbed epp nominet org uk 700
  • R:install.packages 中出现错误:无法打开连接

    我试图安装 RINDSEL 包 但无法安装它 并且不断收到以下错误 install packages 中出错 无法打开连接 我从以下位置下载了该软件包 rindsel 1 0 2 zip 综合养殖平台 http old ibpdev net
  • 如何从 Windows 7 PC 上完全卸载 Python 2.7

    从这里安装了Python 2 7 https www python org downloads release python 279 https www python org downloads release python 279 然后我
  • jq Streaming - 过滤嵌套列表并保留全局结构

    在一个大型 json 文件中 我想从嵌套列表中删除一些元素 但保留文档的整体结构 我的示例将其输入为 但真实的输入足够大以要求流式传输 keep untouched keep this this list filter this keep
  • 来自多元 t 分布的样本 python

    我想知道Python中是否有一个从多元学生t分布中采样的函数 我有包含 14 个元素的均值向量 14x14 协方差矩阵和自由度 我想从这个 t 分布中采样一个向量 对于一维情况 我使用 stats t rvs df loc scale 并且
  • Scala(或 Java)中泛型函数的特化

    是否可以在 Scala 中专门化泛型函数 或类 例如 我想编写一个将数据写入 ByteBuffer 的通用函数 def writeData T buffer ByteBuffer data T buffer put data 但由于 put
  • AspNet vNext 上的 Kestrel 不提供 / 下的索引页面

    我需要能够在默认网址下提供我的 index html 使用 Kestrel Web 服务器 现在我只能使用完整路径访问我的静态文件 即 index html 同样 这在 VisualStudio 上完美运行 上下文是带有 Kestrel 的
  • 如何使用javascript将视频文件转换为字符串?

    我在 signalR 工作 我想通过将视频文件拆分为不同部分来将视频文件从一个客户端发送到另一个客户端 我已经通过分割图像源数据发送图像并在另一个客户端上接收该图像 document getElementById fileUpload ad