使用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录制视频并保存的更多相关文章

  1. 摄像头录制视频并且保存成mp4

    import cv2import numpy as npimport os cap = cv2.VideoCapture(1)#v4l2-ctl --list-devices 查看设备号,非正常中断时 ...

  2. 与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频)

    原文:与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频) [索引页][源码下载] 与众不同 windows phone (21) - Device ...

  3. OpenCV Python 录制视频

    调用摄像头 引入库支持 初始化 调整界面大小 实时显示 录制视频并保存 fourcc问题解决 代码实现 效果展示 总结 学到实用OpenCV调用笔记本电脑的摄像头,并录制视频保存到本地硬盘的时候,出现 ...

  4. Android WebView 实现文件选择、拍照、录制视频、录音

    原文地址:Android WebView 实现文件选择.拍照.录制视频.录音 | Stars-One的杂货小窝 Android中的WebView如果不进行相应的设置,H5页面的上传按钮是无法触发And ...

  5. 怎样录制屏幕并将结果保存为Gif

    怎样录制屏幕 并将结果保存为GIF 大前天写文章,需要把PPT的翻转页面截成动态图.我一开始就想到保存文件肯定是GIF.但是如何生成呢?素材又从哪里来?以前自己感兴趣做过把一组连拍的图片做成动态图,再 ...

  6. iOS AVCaptureVideoDataOutputSampleBufferDelegate 录制视频

    iOS AVCaptureVideoDataOutputSampleBufferDelegate 录制视频 应用场景: 使用AVFoundation提供的API, 我们可以从 AVCaptureVid ...

  7. 使用MediaRecorder录制视频短片

    MediaRecorder除了可用于录制音频之外,还可用于录制视频,使用MediaRecorder录制视频与录制音频的步骤基本相同.只是录制视频时不仅需要采集声音,还需要采集图像.为了让MediaRe ...

  8. 转:android 录制视频的Demo

    转:http://blog.csdn.net/peijiangping1989/article/details/7049991 在这里给出自己的一个测试DEMO,里面注释很详细.简单的视频录制功能. ...

  9. Android使用的开发MediaRecorder录制视频

    MediaRecorder除了使用录制音频.还可用于录制视频.关于MediaRecorder的具体解释大家能够參考<Android开发之MediaRecorder类具体解释>.使用Medi ...

随机推荐

  1. 华硕X550VC安装ubuntu后wifi无法连接问题

    在网上找了很多资料比如重新编译内核,想办法连上有线网络然后更新驱动,下载离线驱动安装包…… 等等方法 其中有些方法实际测试的时候失败了,文章是几年前的,可能缺少某些依赖.上个网都这么麻烦实在让人疲惫. ...

  2. C# 继承(3)

    接上章代码: class NameList { public NameList() => Console.WriteLine("这个是NameList的构造函数"); ~Na ...

  3. 20165219 2017-2018-2《Java程序设计》结对编程一 第一周总结

    20165219 2017-2018-2<Java程序设计>结对编程一 第一周总结 结对对象 20165219王彦博 20165232何彦达 需求分析 实现一个程序,要求: 1 支持整数运 ...

  4. IIS发布ASP程序问题汇总

    看异常位置,因为域的问题

  5. 配置Java web的一次经历

    最近在完成数据库作业,重新拾起了以前学过的Java,讲下自己的 Java web 配置过程. 1.安装 Tomcat 在官网下载 Tomcat7.0版本:https://tomcat.apache.o ...

  6. Liunux疑问

    Liunux疑问 其中的各种软件的安装有模糊的点,待解决 待解决 待解决 待解决 ... ...

  7. Fundamentals of Logic

    Fundamentals of Logic To make complicated mathematical relationships clear,it is convenient to use t ...

  8. Hibernate学习笔记(三)—— Hibernate的事务控制

    Hibernate是对JDBC的轻量级封装,其主要功能是操作数据库.在操作数据库过程中,经常会遇到事务处理的问题,接下来就来介绍Hibernate中的事务管理. 在学习Hibernate中的事务处理之 ...

  9. python之列表,元组,字典。

    在博主学习列表,元组以及字典的时候,经常搞混这三者.因为他们都是用括号表示的.分别是[],(),{}. 列表(list): [1,'abc',1.26,[1,2,3],(1,2,3),{'age:18 ...

  10. OJ 21658::Monthly Expense(二分搜索+最小化最大值)

        Description Farmer John是一个令人惊讶的会计学天才,他已经明白了他可能会花光他的钱,这些钱本来是要维持农场每个月的正常运转的.他已经计算了他以后N(1<=N< ...