如何将录制的视频数据从 javascript 传递到 python

2024-03-31

我正在尝试将录制的视频数据块从某些 javascript 代码传递到我的路线,以便我可以保存它
我是新手

JavaScript 使用用户网络摄像头录制视频并将其保存为 RecordedBlob。我正在尝试将记录的 Blob 数据传递到我的 python 路由进行保存。

这是 javascript 代码..它在我的 html 文件中

<script type="text/javascript">

  let video = document.getElementById("video");
  let recording = document.getElementById("recording");
  let startButton = document.getElementById("startButton");
  let stopButton = document.getElementById("stopButton");
  let downloadButton = document.getElementById("downloadButton");
  let logElement = document.getElementById("log");

  let recordingTimeMS = 5000;


  function log(msg) {
    logElement.innerHTML += msg + "\n";
  }
  function wait(delayInMS) {
    return new Promise(resolve => setTimeout(resolve, delayInMS));
  }
  function startRecording(stream, lengthInMS) {
    let recorder = new MediaRecorder(stream);
    let data = [];

    recorder.ondataavailable = event => data.push(event.data);
    recorder.start();
    log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");

    let stopped = new Promise((resolve, reject) => {
      recorder.onstop = resolve;
      recorder.onerror = event => reject(event.name);
    });

    let recorded = wait(lengthInMS).then(
      () => recorder.state == "recording" && recorder.stop()
    );

    return Promise.all([
      stopped,
      recorded
    ])
    .then(() => data);
  }
  function stop(stream) {
    stream.getTracks().forEach(track => track.stop());
  } 
  startButton.addEventListener("click", function() {

    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(stream => {
      video.srcObject = stream;
      downloadButton.href = stream;
      video.captureStream = video.captureStream || video.mozCaptureStream;
      return new Promise(resolve => video.onplaying = resolve);
    }).then(() => startRecording(video.captureStream(), recordingTimeMS))
    .then (recordedChunks => {
      let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
      recording.src = URL.createObjectURL(recordedBlob);
      downloadButton.href = recording.src;
      downloadButton.download = "RecordedVideo.webm";

      log("Successfully recorded " + recordedBlob.size + " bytes of " +
          recordedBlob.type + " media.");
    })
    .catch(log);
  }, false);

  stopButton.addEventListener("click", function() {
    stop(video.srcObject);
  }, false);
   </script>

这是routes.py,我试图在其中传递记录的Blob数据

from flask import render_template, redirect, url_for


@posts.route('/post/new/vlog',methods=['GET','POST'])
def new_vlog():
    if current_user.is_authenticated:
        return render_template('vlog.html',title='New Vlog',video={recordedBlob})
        if video.data:
            video_file = save_video(video.data)
            return redirect(url_for('main.home'))
    else:
            return redirect(url_for('users.login'))

None

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

如何将录制的视频数据从 javascript 传递到 python 的相关文章

  • Python代码执行时自动打开浏览器

    我正在 Python Flask 中实现 GUI Flask 的设计方式是 必须 手动 打开本地主机以及端口号 有没有一种方法可以使其自动化 以便在运行代码时自动打开浏览器 本地主机 我尝试使用 webbrowser 包 但它在会话终止后打
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • 如何在 Jquery Chosen 插件中搜索乌尔都语?还有其他方法在 Selectbox 中搜索乌尔都语吗?

    基本上我想在选择框中有搜索选项 并在选择框中选择实现的 jquery 所有选项均采用乌尔都语语言 如何扩展所选搜索以匹配乌尔都语 或者还有另一种方法在选择框中搜索乌尔都语 任何其他建议 提前致谢 有一种非常简单的方法可以将所有正则表达式逻辑
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p
  • 名称属性的 CSS 选择器?

    这可能是一个愚蠢的问题 但是属性的 CSS 选择器是什么 a 那是 名字 document body innerHTML myString anchor HTML String 这段 JavaScript 创建了一个 a 带有名称的元素 H
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 如何停止在 div 外部显示图像

    考虑这段代码 div style width 100px height 100px border 1px solid black div img src http rabbitempire org wp content uploads Pe
  • Python Flask应用程序无法被网络中的远程计算机访问

    我在本地主机上的 python 上运行了一个简单的 Flask Web 应用程序 Web 应用程序在 127 0 0 1 8000 上运行 但我无法使用 myHostComputerIPaddress 8000 从网络中的远程计算机访问它
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • Angular2 - 防止复选框被选中

    我有一个每行包含一个复选框的表 在表头中 我有一个Check All切换所有表格行框的复选框 我正在尝试实现一些逻辑 如果复选框的数量将超过特定限制 则显示错误并且不切换表行复选框或checkall盒子本身 有一个问题允许checkAll即
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • IE9 中的 HTML5 视频两侧显示黑色边框

    我在我的网站中使用 HTML5 视频标签 该视频在所有浏览器中都能完美播放 但在 IE9 中它显示黑色边框 黑色扩展名 就像通常情况下 当播放器的大小大于视频的大小时 视频播放器会在其两侧显示一些黑色扩展 这是我们使用的解决方案 对于视频
  • 特别更改画布上的笔画不透明度,但不更改颜色

    我有一个漂亮整洁的脚本 可以循环显示颜色 并且与 xxxxxx格式 但我想改变透明度 有没有办法做到这一点 我指的是ctx strokeStyle 这是当前的代码 canvas strokeStyle 16777215 s length i
  • 如何优化 Three.js 中多个 sphereGeometry 的渲染?

    我想优化 Three js 中 sphereGeometry 的渲染 因为它成为我的程序的瓶颈 javascript程序如下所示 var sphereThree for var idSphere 0 idSphere lt numSpher
  • 如何让 Grunt.js 和 Meteor.js 协同工作?

    我想在我的 Meteor 应用程序中使用简单的复制和串联 但是当 Meteor 在服务器和客户端上运行所有 javascript 文件时 我遇到了问题 而我不希望它们在任何地方运行 它要么只是配置文件 例如Gruntfile js或我想以某
  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i
  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • Ruby on Rails 数据库迁移不会在 MySQL 表中创建外键

    我正在尝试修改 Ruby on Rails 应用程序中的数据库迁移 我使用 MySQL 作为数据库 并且想将外键添加到正在创建的表中 我正在使用以下代码 虽然遵循在适当列上创建空值的规范 但没有应用外键约束 class CreateBook
  • 如何在 Bootstrap 表单上放置背景图像?

    我正在尝试使用 Bootstrap 框架在表单上放置背景图像 例如在文本和输入后面 就像我网站的背景图像 但图像出现在底部 我希望它位于 容器 内 我的代码是这样的 div class container div class thumbna
  • 将时间设置为 00:00:00

    我在 Java 中重置时间时遇到问题 对于给定日期 我想将时间设置为 00 00 00 这是我的代码 Resets milliseconds seconds minutes and hours from the provided date
  • 读取未定义的对象属性时强制 JavaScript 异常/错误?

    我是一位经验丰富的 C Java 程序员 第一次使用 Javascript 我使用 Chrome 作为浏览器 我创建了几个带有字段和方法的 Javascript 类 当我读取一个不存在的对象字段时 由于我的拼写错误 Javascript 运
  • 不调用bind()的情况下监听()

    我尝试了以下方法 int sockfd socket listen sockfd 10 accept sockfd 没有一个调用失败 并且程序开始阻塞 就像我调用了bind 一样 在这种情况下会发生什么 由于没有本地地址或端口 是否永远无法
  • Spring @Autowire 两个未在 ApplicationContext 中定义的同一类的 bean

    我正在开发 Spring MVC 应用程序并遇到问题 我是Spring的新手 所以如果我的工作有点笨拙 请原谅我 基本上我有一个java类ContractList 在我的应用程序中 我需要此类的两个不同对象 它们都必须是单例 public
  • 主干+rails TypeError:List.Header不是构造函数

    我正在尝试按照从该网站购买的教程进行操作 http www backbonerails com http www backbonerails com 我正在关注该系列的第五集 起床运行 第 1 部分 在视频的 46 52 左右 他有 lis
  • go run:无法运行非主包

    这是简单的 go 应用程序 如果我运行以下代码 我会收到 go run 无法运行非主包 错误 package zsdfsdf import fmt func Main fmt Println sddddddd 要修复它 我只需要将包命名为m
  • 如何在 Terraform 中定义一个根据变量可能为空的列表?

    我需要在 Terraform v0 10 8 中定义一个资源 该资源具有一个列表属性 该属性可能为空也可能不为空 具体取决于变量 请参阅volume ids在下面的定义中 resource digitalocean droplet work
  • Apache Hive - 复杂数据类型映射 不起作用

    蜂巢版本2 1 1 问题描述 集合项终止值作为映射键插入 蜂巢表 CREATE TABLE profiles id int name struct
  • Azure 文本转语音:如何更改输出的语言和语音?

    我需要以下 JavaScript 的帮助 希望有人能帮助我 文本以英语语音朗读 如何在以下工作代码中更改语言和语音 由于我的java技术较差 我在网上进行了大量搜索 但找不到合适的解决方案 所以 不幸的是我的编程技能不够好 所以我需要一些具
  • 使用WiX安装后是否可以提示重启机器?

    使用WiX安装后是否可以提示重启机器
  • 检查 Kusto 语言的表是否存在?

    有没有办法使用 kusto 语言以编程方式检查日志分析中是否存在表 例如 假设我想检查工作区是否包含 VMConnection 表 如下所示 IF OBJECT ID objectName U IS NOT NULL OR IF EXIST
  • 如何访问 Import-Csv 数组中的特定行?

    我需要将大文件上传拆分为多个并行进程 并希望使用单个 CSV 文件作为输入 是否可以从一个访问行块Import Csv对象 像这样 SODAData Import Csv CSVPath Delimiter Where Rownum 20
  • 如何在 MVC 的 C# 中创建自己的值为“00”和“”的 SelectList?

    我的操作中有以下代码 ViewBag AccountId new SelectList reference Get 01 AsEnumerable OrderBy o gt o Order RowKey Value 00 在我看来 Html
  • 使用 XCB 检测窗口焦点变化

    我正在使用 XCB 编写一个程序 需要检测窗口何时获得或失去焦点 到目前为止我已经有了这个 但它只是挂在xcb wait for event调用 永远不会进入循环 我在这里缺少什么来获取根事件 或者我的做法完全错误 有比听根音更好的方法吗
  • 我应该避免使用“async void”事件处理程序吗?

    我知道使用 即发即弃 通常被认为是一个坏主意async void方法来启动任务 因为没有对挂起任务的跟踪 并且处理可能在此类方法中抛出的异常很棘手 我通常应该避免async void事件处理程序也是如此 例如 private async v
  • 如何使用Python的GAE开发服务器测试床模拟文件上传到blobstore

    我想编写一些单元测试 其中包括读取 blobstore 文件 https developers google com appengine docs python blobstore blobreaderclass hl pl 如何编写单元测
  • 动态 Javascript 树结构

    我想动态构建层次结构 每个节点创建为层次结构中的层 级别 具有自己的节点数组 这应该形成一个树结构 应该有一个根节点 以及未定义数量的节点和级别来构成层次结构的大小 除了根节点之外 不应修复任何内容 我不需要阅读或搜索层次结构 我需要构建它
  • 如何将录制的视频数据从 javascript 传递到 python

    我正在尝试将录制的视频数据块从某些 javascript 代码传递到我的路线 以便我可以保存它 我是新手 JavaScript 使用用户网络摄像头录制视频并将其保存为 RecordedBlob 我正在尝试将记录的 Blob 数据传递到我的