Html5视频录制和上传?

2024-01-16

我需要创建一个可以使用网络摄像头或移动摄像头录制视频的应用程序(它需要跨平台)。

到目前为止,我已经使用 webrtc getusermedia 编写了一个小型概念证明。它可以录制视频和播放,但我不确定如何将文件上传回服务器。

这是此示例的链接http://jsfiddle.net/3FfUP/ http://jsfiddle.net/3FfUP/

和 JavaScript 代码:

(function ($) {
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var onFailSoHard = function(e) {
    console.log('Reeeejected!', e);
};
$('#capture-button').click (function () {
    console.log ("capture click!");
    if (navigator.getUserMedia) {
        // Not showing vendor prefixes.
        navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);

            // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
            // See crbug.com/110938.
            video.onloadedmetadata = function(e) {
                // Ready to go. Do some stuff.
            };
        }, onFailSoHard);
    } else {
        video.src = 'somevideo.webm'; // fallback.
    }
});
$('#stop-button').click (function (e) {
    video.pause ();
    localMediaStream.stop ();
});
})(jQuery);

如何获取此示例中记录的内容作为文件,以便将其上传到服务器。


嗨,抱歉,如果这有点晚了,但这是我如何设法将文件上传到服务器的方法,我真的不知道这是否是实现此目标的最佳方法,但我希望它有助于为您提供线索遵循 Eric Bidelman 所写的教程(正如 Sam Dutton 评论的那样),你得到的是一个 blob,所以我创建了一个 XMLHttpRequest 来获取视频并将响应类型设置为 blob,之后我创建了一个 FormData,在其中附加了响应,这将允许将 blob 发送到服务器。这是我的函数的样子。

function sendXHR(){
    //Envia bien blob, no interpretado
    var xhr = new XMLHttpRequest();
    var video=$("#myexportingvideo");
    xhr.open('GET', video.src , true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
    if (this.status == 200) {
        // Note: .response instead of .responseText
        var blob = new Blob([this.response], {type: 'video/webm'});
        console.log(blob.size/1024);
        console.log(blob.type);
        form = new FormData(),
        request = new XMLHttpRequest();
        form.append("myblob",blob,"Capture.webm");
        form.append("myname",$("#name_test").value);
        request.open("POST","./UploadServlet",true);
        request.send(form);
       }
    };
    xhr.send();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Html5视频录制和上传? 的相关文章

  • 您最喜欢的 JS/CSS 下拉菜单是什么? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 希望在网站上实现一个 只是好奇其他人都使用过什么以及他们有过什么样的体验 EDIT我也不是一个超级粉丝
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句
  • 如何通过iframe从父html传递参数?

    我有一个 html 页面 在其中以编程方式设置 iframe 的 src 如何通过 iframe src 传递参数并在子 html 中获取它们 下面是我的代码 function myFunction myIframe attr src my
  • IndexedDB - 对象存储与多个数据库与索引?

    我想知道什么时候使用单个数据库与具有多个对象存储的数据库是一个好主意 我阅读了网络上的大多数教程并查看了 indexedDB 的规范 但找不到比较这些不同概念的好例子 有没有人有此类事情的具体示例 使用多个对象存储和 或代码的设计模型 只要
  • 防止隐藏的输入被更改

    这一直让我压力很大 我有一个隐藏的输入
  • 当缩放元素在缩放之前大于容器时,CSS 变换比例(向下)不会使用 margin 0 auto 将元素居中

    看来 当缩小以前不适合其容器的元素时 margin 0 auto将不再使元素在其父元素中居中 请注意 使用transform origin center center并没有解决这个问题 这是因为自动边距似乎在缩放之前而不是之后应用 我期望后
  • 如何在 Safari 上打开本地 html 文件?

    我想打开本地 html 文件Safari集成到我的Swift 3应用 我知道如何使用网址来做到这一点 这是我用来执行此操作的代码 let encodedString url addingPercentEncoding withAllowed
  • 将数组数据从 html 表单传递到 php 数组变量

    我有一张表格来记录一组项目的工作时间 该表单使用项目 ID 小时数和注释字段的数组 表单行是项目数量的循环 该表单将数据传递给 PHP 脚本进行处理 PHP 脚本没有看到数组中的值 它只是给我 Array 作为输出 文档和其他示例让我想知道
  • 有没有办法根据渲染的字符串创建 DOM 对象?

    有没有办法从整个字符串而不只是innerHTML 创建DOM 对象 我有一个完整呈现的 DOM 形式的字符串
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • jQuery 选择器定位具有 id AND class 的元素不起作用

    我有以下事件处理函数 jQuery document on click button submitb function e alert jQuery 包含在 html 文档中 但是 如果我点击 div class submitb Go di
  • Intro.js 2页然后返回首页

    我在用intro js http introjs com 为我的网站创建一个小介绍 我希望游览从第 1 页 主页 2 另一页 然后回到第 1 页 主页 我已经成功地从第 1 2 页开始 但不确定如何让它返回到第 1 页 我对 javascr
  • 如何使用 poedit 解析 Timber(树枝)模板并检测要翻译的引用字符串

    我想用 poedit 解析 Timber 的树枝模板 并且需要翻译引用的内容 问题是我找不到不跳过引用内容的解析器 Example
  • HttpWebRequest vs Webclient(特殊场景)

    我知道这个问题之前已经回答过thread https stackoverflow com questions 1694388 webclient vs httpwebrequest httpwebresponse 但我似乎找不到详细信息 在
  • 以 HTML 格式发送电子邮件

    我想发送 HTML 格式的电子邮件 如下图所示 我怎样才能做到这一点 请帮我 提前致谢 String body new String table tr td br header td tr br br Get b Best Score b
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS

随机推荐