h5中web端调用自带摄像头并且录屏上传保存视频

已于 2024-08-04 18:05:33 修改
阅读量62 收藏
点赞数
分类专栏： web前端插件库以及不常见的问题 文章标签： 前端 音视频
于 2024-08-04 18:05:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guige8888811/article/details/140909301
版权

前端调用摄像头并录制屏幕

 navigator.mediaDevices.getUserMedia 此函数调用摄像头获取视频流

mediaRecorder 录制视频的函数

摄像头数据存储到chunks中

录屏结束回调将chunks中的视频上传到服务器formData.append('video', recordedBlob, 'recordedVideo.webm');

通过表单上传。

前端代码如下：

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Lookie Lookie!</title>
  <meta name="description" content="A website that learns to predict where you are looking at. Written in TensorFlow.js">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>

<body>
 
  <canvas id="heatMap"></canvas>


  <div id="info" data-content=&#
了解本专栏 订阅专栏 解锁全文 超级会员免费看
web前端神器
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
摄像头录像+电脑录屏
09-14
标题中的“摄像头录像+电脑录屏”指的是同时记录电脑屏幕内容和摄像头拍摄的视频功能，这对于教学、会议、游戏直播或者个人创作等场景非常实用。它可以帮助用户捕捉电脑上的活动，比如演示操作、游戏过程，同时展示...
vue 调取摄像头录制视频并上传到后端（部分浏览器兼容）
Lora_0925的博客
12-15 4832
项目场景： 使用input调取手机摄像头，录制视频并上传到客户端 问题描述： 在input发生change事件时，使用e.target.files获取文件，部分浏览器无法获取到文件。 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
前端js调用摄像头进行录像并传到后端
热门推荐
qingzhizhenhun的博客
11-27 2万+
js调用摄像头录像并传到后端 参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h5页面调用摄像头录像，然后传给后端进行人脸识别，根据返回值进行路由跳转，流媒体这方面以前接触过的都是推流拉流转发之类的软件，前端进行流媒体开发，最常用的是flash，兼容性也最好，但是它的学习成本太高...
视频和语音播放（进行中）
ShareUs的专栏
04-25 5580
点播，直播，VR（录制音频和视频，在线的和本地的）,视频播放器和音乐播放器（播放音乐和视频），视频和语音 > MediaPlayer与SoundPool：   MediaPlayer：此类适合播放较大文件，此类文件应该存储在SD卡上，而不是在资源文件里，还有此类每次只能播放一个音频文件。   SoundPool：此类特点就是低延迟播放，适合播放实时音实现同时播放多个声音，如游戏中炸弹的爆炸音
浅谈H5音频处理（更多谈谈录音方向的内容）
weixin_33738982的博客
08-19 3677
最近需要做一个实时录音然后根据音频流实时反馈出调用静音分析（VAD）以及语音识别(ASR)接口的功能。于是研究起H5有关这方面的支持。 H5的Web Audio API 首先需要弄清一点，Web Audio API和H5的<audio>完全不是一个体量级的东西，<audio>可以很方便地让你将音频文件丢进去就自带各种花式功能。但是如果直接用Web Auido API进行操...
多媒体前端技术入门指南
m0_60259116的博客
06-25 2108
多媒体前端技术入门指南
直播原理与web直播实战
weixin_34256074的博客
03-26 2375
直播在互联网中已经成为一个必不可少的东西，话说各大直播平台 bilibili，虎牙，斗鱼都准备上市了。 富途证券作为了一家互联证券公司直播当然也少不了的。目前直播在富途牛牛软件（以下简称：牛牛）中主要功能是教育跟宣传作用。 富途牛牛为领先的港股美股交易软件。 文章结构 直播构成 直播流程 web中直播技术 HLS协议 RTMP协议 HLS与RTMP对比 直播实战 安装nginx、ng...
关于视频直播系统源码所开发的直播平台全流程分析
云豹直播源码
08-04 807
直播全流程探索 近年来，直播兴起，QQ音乐也接入了直播能力，支持演唱会的直播和主播、明星直播，根据互动方式的不同，我们可以分为互动直播和推流直播，本人有幸参与了直播从无到有的过程；对直播这一块有了一个比较清晰的认识，本文主要对web部分的直播流程进行介绍； 直播现状 上图列出的app都有涉足直播行业，可以看出目前的直播有多火； 我们按照整个视频内容的流动过程，将整个直播过程划分为三个阶段，生成阶段、传输阶段、呈现阶段 下面将对这些阶段进行一一介绍； 生成阶段 生成阶段包括对音视频的采集和处
HTML5凭什么将Flash“拍死”在沙滩上？
weixin_43955769的博客
12-19 186
放在最前面希望不会影响你的观看，文章很不错哦!       自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。       加Q Q群：956940552（招...
安卓app中webview的相关操作
sinat_25136209的博客
11-24 2534
如何相应网页的弹窗点击事件？ http://blog.csdn.net/angel20082008/article/details/20689229相当于处理网页的弹窗 http://blog.csdn.net/wo392942362/article/details/52169281相似问题 http://www.cfanz.cn/index.php?c=article&amp;amp;a=read&amp;amp;id=3
EV录屏过程中断电，视频修复
01-24
在IT行业中，音视频处理是一项重要的技术领域，特别是在...总的来说，EV录屏过程中断电的问题可以通过多种方式解决，关键在于及时采取适当的恢复措施，并且在日常使用中做好数据备份，以降低重要视频文件丢失的风险。
android录屏、录音并合成视频保存本地
11-20
在Android平台上，录屏、录音并合成视频保存到本地是一项常用的功能，特别是在开发教育、游戏、社交类应用时。从给定的标题“android录屏、录音并合成视频保存本地”以及描述“android5.0通过录屏，录音并合成视频，...
大华ocx.rar_大华_大华 ocx_大华 ocx 云台_大华摄像头调用_录屏
07-14
大华摄像头ocx调用，控制云台，实时监控，截图，录屏
QT多线程调用摄像头录屏
12-30
综上所述，"QT多线程调用摄像头录屏"项目结合了OpenCV的视频处理能力，Qt5的UI设计和多线程管理，以及FFmpeg的视频压缩技术，提供了一个高效且用户友好的视频录制解决方案。通过熟练掌握这些技术，开发者可以构建出...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1524
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
最新发布
weixin_67239318的博客
08-03 382
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 165
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 940
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
python区域录屏flask ， 保存视频
07-15
要在Flask中实现Python的区域录屏功能，并保存录制的视频，你可以使用OpenCV库来捕捉屏幕区域，并使用Flask创建一个Web应用程序来显示录制的视频。下面是一个示例代码： ```python from flask import Flask, render_template, Response import cv2 app = Flask(__name__) def generate_frames(): # 设置录制区域的坐标和尺寸 x, y, width, height = 100, 100, 640, 480 # 打开屏幕录制 screen_recorder = cv2.VideoCapture(0) # 设置屏幕录制的分辨率 screen_recorder.set(3, width) screen_recorder.set(4, height) # 设置视频编码器 fourcc = cv2.VideoWriter_fourcc(*'XVID') output = cv2.VideoWriter('output.avi', fourcc, 20.0, (width, height)) while True: # 读取屏幕录制的帧 ret, frame = screen_recorder.read() if not ret: break # 截取指定区域的帧 frame = frame[y:y+height, x:x+width] # 将帧写入输出文件 output.write(frame) # 将帧转换为JPEG格式 ret, buffer = cv2.imencode('.jpg', frame) frame = buffer.tobytes() # 生成视频流 yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') # 释放资源 screen_recorder.release() output.release() @app.route('/') def index(): return render_template('index.html') @app.route('/video_feed') def video_feed(): return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame') if __name__ == '__main__': app.run(debug=True) ``` 在上面的代码中，我们通过设置`x`、`y`、`width`和`height`来定义录制区域的坐标和尺寸。然后，我们使用OpenCV的`VideoCapture`来打开屏幕录制，并设置分辨率。接下来，我们创建一个输出文件并设置视频编码器。在每个循环中，我们读取屏幕录制的帧，截取指定区域的帧，并将其写入输出文件。然后，我们将帧转换为JPEG格式，并生成视频流。 同样地，在项目目录下创建一个名为`templates`的文件夹，并在其中创建一个名为`index.html`的模板文件，用于显示视频流。模板文件的内容可以是以下代码： ```html <!DOCTYPE html> <html> <head> <title>Screen Recording</title> </head> <body> <img src="{{ url_for('video_feed') }}" width="640" height="480"> </body> </html> ``` 运行上述代码后，你可以在浏览器中访问`http://localhost:5000`来查看录制的视频。同时，录制的视频将保存为名为`output.avi`的文件。请确保你已经安装了Flask和OpenCV库。如果没有安装，可以通过以下命令进行安装： ``` pip install flask opencv-python ``` 希望这能满足你的需求！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web前端神器

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值