js录制视频并保存
使用webAPI录制视频
经测试, 只在谷歌和火狐浏览器里起效。
代码:
const streamVideo = document.querySelector('.stream')
const playVideo = document.querySelector('.play');
let chunk;
const download = document.querySelector('#download');
let recorder;
let mediaStream;
document.querySelector('.start').addEventListener('click', start);
document.querySelector('.end').addEventListener('click', end);
document.querySelector('.play-video').addEventListener('click', play);
// MediaRecorder 测试
const constraints = {
audio: false,
video: true,
};
function start() {
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
mediaStream = stream;
streamVideo.srcObject = stream;
streamVideo.play();
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
chunk = e.data;
download.href = URL.createObjectURL(chunk);
};
recorder.start();
})
}
function end() {
streamVideo.pause();
recorder.stop();
mediaStream.getTracks().forEach(track => {
track.stop();
});
}
function play() {
playVideo.src = URL.createObjectURL(chunk);
playVideo.play();
}
js录制视频并保存的更多相关文章
- 摄像头录制视频并且保存成mp4
import cv2import numpy as npimport os cap = cv2.VideoCapture(1)#v4l2-ctl --list-devices 查看设备号,非正常中断时 ...
- 与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频)
原文:与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频) [索引页][源码下载] 与众不同 windows phone (21) - Device ...
- OpenCV Python 录制视频
调用摄像头 引入库支持 初始化 调整界面大小 实时显示 录制视频并保存 fourcc问题解决 代码实现 效果展示 总结 学到实用OpenCV调用笔记本电脑的摄像头,并录制视频保存到本地硬盘的时候,出现 ...
- Android WebView 实现文件选择、拍照、录制视频、录音
原文地址:Android WebView 实现文件选择.拍照.录制视频.录音 | Stars-One的杂货小窝 Android中的WebView如果不进行相应的设置,H5页面的上传按钮是无法触发And ...
- 怎样录制屏幕并将结果保存为Gif
怎样录制屏幕 并将结果保存为GIF 大前天写文章,需要把PPT的翻转页面截成动态图.我一开始就想到保存文件肯定是GIF.但是如何生成呢?素材又从哪里来?以前自己感兴趣做过把一组连拍的图片做成动态图,再 ...
- iOS AVCaptureVideoDataOutputSampleBufferDelegate 录制视频
iOS AVCaptureVideoDataOutputSampleBufferDelegate 录制视频 应用场景: 使用AVFoundation提供的API, 我们可以从 AVCaptureVid ...
- 使用MediaRecorder录制视频短片
MediaRecorder除了可用于录制音频之外,还可用于录制视频,使用MediaRecorder录制视频与录制音频的步骤基本相同.只是录制视频时不仅需要采集声音,还需要采集图像.为了让MediaRe ...
- 转:android 录制视频的Demo
转:http://blog.csdn.net/peijiangping1989/article/details/7049991 在这里给出自己的一个测试DEMO,里面注释很详细.简单的视频录制功能. ...
- Android使用的开发MediaRecorder录制视频
MediaRecorder除了使用录制音频.还可用于录制视频.关于MediaRecorder的具体解释大家能够參考<Android开发之MediaRecorder类具体解释>.使用Medi ...
随机推荐
- 华硕X550VC安装ubuntu后wifi无法连接问题
在网上找了很多资料比如重新编译内核,想办法连上有线网络然后更新驱动,下载离线驱动安装包…… 等等方法 其中有些方法实际测试的时候失败了,文章是几年前的,可能缺少某些依赖.上个网都这么麻烦实在让人疲惫. ...
- C# 继承(3)
接上章代码: class NameList { public NameList() => Console.WriteLine("这个是NameList的构造函数"); ~Na ...
- 20165219 2017-2018-2《Java程序设计》结对编程一 第一周总结
20165219 2017-2018-2<Java程序设计>结对编程一 第一周总结 结对对象 20165219王彦博 20165232何彦达 需求分析 实现一个程序,要求: 1 支持整数运 ...
- IIS发布ASP程序问题汇总
看异常位置,因为域的问题
- 配置Java web的一次经历
最近在完成数据库作业,重新拾起了以前学过的Java,讲下自己的 Java web 配置过程. 1.安装 Tomcat 在官网下载 Tomcat7.0版本:https://tomcat.apache.o ...
- Liunux疑问
Liunux疑问 其中的各种软件的安装有模糊的点,待解决 待解决 待解决 待解决 ... ...
- Fundamentals of Logic
Fundamentals of Logic To make complicated mathematical relationships clear,it is convenient to use t ...
- Hibernate学习笔记(三)—— Hibernate的事务控制
Hibernate是对JDBC的轻量级封装,其主要功能是操作数据库.在操作数据库过程中,经常会遇到事务处理的问题,接下来就来介绍Hibernate中的事务管理. 在学习Hibernate中的事务处理之 ...
- python之列表,元组,字典。
在博主学习列表,元组以及字典的时候,经常搞混这三者.因为他们都是用括号表示的.分别是[],(),{}. 列表(list): [1,'abc',1.26,[1,2,3],(1,2,3),{'age:18 ...
- OJ 21658::Monthly Expense(二分搜索+最小化最大值)
Description Farmer John是一个令人惊讶的会计学天才,他已经明白了他可能会花光他的钱,这些钱本来是要维持农场每个月的正常运转的.他已经计算了他以后N(1<=N< ...