html实现视频录制，保存和回放
2024-06-01 06:36:18
录制和保存视频，通过三个按钮配合完成。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body ><div style="width: 80%; margin: 0 auto;">
<!-- <button id="begin">开始</button>--><button id="record" disabled>录制</button>
<!-- <button id="play" disabled>播放</button>--><button id="download" disabled>下载</button><button id="reStart" disabled>重新开始</button>
<!-- <button id="upload">上传</button>-->
</div>
<video id="gum", controls preload="none" width="30%" height="30%" data-setup="{}" autoplay="autoplay"></video>
<p id="status", style="text-align: center;width: 402px;"></p>
<script>var mediaSource = new MediaSource(); //打开电脑摄像头// mediaSource.addEventListener('sourceopen', handleSourceOpen, false);var mediaRecorder ;var recordedBlobs;var sourceBuffer;var littleVideo = false;var gumVideo = document.querySelector("#gum"); //把图像显示在video上var statusV = document.getElementById("status"); //显示状态信息// var recordedVideo = document.querySelector("video#recorded");// statusV.innerText = '准备阶段';// var beginButton = document.querySelector("button#begin");var recordButton = document.querySelector("button#record");var playButton = document.querySelector("button#play");var downloadButton = document.querySelector("button#download");var reStartButton = document.querySelector("button#reStart");var uploadBtn = document.querySelector("button#upload");recordButton.onclick = toggleRecording;// playButton.onclick = play;downloadButton.onclick = download;reStartButton.onclick = restartRecord;var constraints = {audio: true,video: true};function handleSuccess(stream) {recordButton.disabled = false;console.log("getUserMedia() got stream: ", stream);window.stream = stream;if (window.URL) {//gumVideo.src = window.URL.createObjectURL(stream);gumVideo.srcObject = stream;} else {gumVideo.src = stream;}gumVideo.addEventListener('pause',function() {if(i){window.clearInterval(i);}},false);gumVideo.addEventListener('ended',function() {if(i){clearInterval(i);}},false);}// function handleError(error) {// console.log("navigator.getUserMedia error: ", error);// }navigator.mediaDevices.getUserMedia(constraints). //打开摄像头then(handleSuccess).catch(handleError);// function handleSourceOpen(event) {// console.log("MediaSource opened");// sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');// console.log("Source buffer: ", sourceBuffer);// }// recordedVideo.addEventListener('error', function(ev) {// console.error('MediaRecording.recordedMedia.error()');// alert('Your browser can not play\n\n' + recordedVideo.src// + '\n\n media clip. event: ' + JSON.stringify(ev));// }, true);function handleDataAvailable(event) {if (event.data && event.data.size > 0) {recordedBlobs.push(event.data);}}function handleStop(event) {console.log("Recorder stopped: ", event);}function toggleRecording() {if (recordButton.textContent === '录制' || recordButton.textContent === '重录') {littleVideo = false;startRecording();} else {stopRecording();recordButton.textContent = '重录';// playButton.disabled = false;downloadButton.disabled = false;reStartButton.disabled = false;}}function startRecording() {statusV.innerText = '开始录制';//todo：显示录制中 提示recordedBlobs = [];var options = {mimeType: 'video/webm;codecs=vp9'};if (!MediaRecorder.isTypeSupported(options.mimeType)) {console.log(options.mimeType + ' is not Supported');options = {mimeType: 'video/webm;codecs=vp8'};if (!MediaRecorder.isTypeSupported(options.mimeType)) {console.log(options.mimeType + ' is not Supported');options = {mimeType: 'video/webm'};if (!MediaRecorder.isTypeSupported(options.mimeType)) {console.log(options.mimeType + ' is not Supported');options = {mimeType: ''};}}}try {mediaRecorder = new MediaRecorder(window.stream, options);} catch (e) {console.error('Exception while creating MediaRecorder: ' + e);alert('Exception while creating MediaRecorder: '+ e + '. mimeType: ' + options.mimeType);return;}// console.log('Created MediaRecorder', mediaRecorder, 'with options', options);recordButton.textContent = '停止';// playButton.disabled = true;downloadButton.disabled = true;reStartButton.disabled = true;mediaRecorder.onstop = handleStop;mediaRecorder.ondataavailable = handleDataAvailable;mediaRecorder.start(10); // collect 10ms of data// console.log('MediaRecorder started', mediaRecorder);}function stopRecording() {statusV.innerText = '停止录像';//影藏录制中提mediaRecorder.stop();console.log('Recorded Blobs: ', recordedBlobs);//recordedVideo.controls = true;}// function play() {// var superBuffer = new Blob(recordedBlobs, {type: 'video/mp4'});// //recordedVideo.src = window.URL.createObjectURL(superBuffer);// gumVideo.src = window.URL.createObjectURL(superBuffer);// }function download() {var blob = new Blob(recordedBlobs, {type: 'video/mp4'});var url = window.URL.createObjectURL(blob);var a = document.createElement('a');a.style.display = 'none';a.href = url;//文件名 通过方法传进来 检测是否合法？a.download = '视频录像.mp4';document.body.appendChild(a);a.click();setTimeout(function() {document.body.removeChild(a);window.URL.revokeObjectURL(url);}, 100);}function upload(){formData.append('nickName','Jack');//-->后台用req.body.nickName将值'Jack'取出var blob = new Blob(recordedBlobs, {type: 'video/mp4'});// var data = new FormData();var data = new FormData();data.append('file', file);return uploadVideoFile(data).then(res => {return this.recordVideoUrl = res.url;//获取上传的视频地址})// data.append('video', blob);// data.append('qw', 123);// data.append('question', 1);// var formData = new FormData();//// formData.append("username", "Groucho");// formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"//// // JavaScript file-like 对象// var content = '<a id="a"><b id="b">hey!</b></a>';// var blob = new Blob([content], { type: "text/xml"});//// formData.append("webmasterfile", blob);//// console.log(formData);$.ajax({type: "POST",url: "/form/data",data: data,processData:false, // 告诉jquery不要处理发送的数据contentType:false, // 告诉jquery不要设置content-Type请求头success:function(msg){console.log(msg);}});}function restartRecord(){//清楚存留 按钮功能重置recordButton.textContent = '录制';playButton.disabled = true;downloadButton.disabled = true;reStartButton.disabled = true;//handleSuccess();navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);// statusV.innerText = '准备阶段';}
</script>
</body>
</html>
打开电脑摄像头
html实现视频录制，保存和回放相关推荐
- 基于OpenCV的摄像头视频录制保存工具【附GIT源码地址】
最近一个项目需要使用USB摄像头去采集视频并保存成文件,需要一个摄像头录制工具,要求其实很简单,就是能够将摄像头采集的图像加上一个时间戳的水印,实时保存到指定的文件中.同时为了防止文件过大,最好能够按 ...
- 基于kinect + EmguCV 的监控小应用（视频录制保存）
kinectMonitor 源码位置 家庭监控小应用–https://gitee.com/ellecommander/kinecMonitor 介绍 基于kinect的家庭监控系统,主要是为了监控我爸 ...
- android 视频录制 保存到本地
2021.1.19 更新: github下载地址. 有用的话麻烦点个星星 谢谢 下面贴一下 主要的代码 详细 请去下载我上传的dmeo /******************************* ...
- javacv实现rtsp视频流录制保存视频
目录 1回顾 2代码实现 3结果验证 4总结 1回顾 前面几篇文章分别分享了vlc的安装以及播放rtsp流媒体:在HTML中嵌入vlc播放器实现对rtsp的播放:javacv根据帧抓取图片: 记下来本 ...
- Android (系统+自定义)短视频录制（含暂停继续录制功能） 总结
前言 在Android开发中自然少不了对视频录制的需求,然而视频录制虽然有系统提供给我们能够直接使用的API,但是我们往往在完成需求的过程中需要自定义实现短视频录制.网上虽然也有不少资料,但是总是零零 ...
- Flex与.NET互操作(十三)：FluorineFx.Net实现视频录制与视频回放
本文主要介绍使用FluorineFx.Net来实现视频录制与视频回放,FluorineFx如同FMS一样,除了有AMF通信,RTMP协议,RPC和远程共享对象外,它同样具备视频流服务的功能.通过它我们 ...
- FluorineFx：视频录制及回放(Flash/AS3环境)
如果不考虑安全因素(指任何人都可连接FluorineFx进行视频录制,而不需要登录认证),其实服务端不用写一行代码,仅需要在apps目录下建一个子目录当作应用,以及在services-config.x ...
- 怎么在计算机里找到CF里保存的视频,电脑怎么查看穿越火线录制保存视频？操作方法...
在Win10电脑上玩穿越火线,遇到精彩时刻我们都会录制下,好跟朋友分享,但是在Win10电脑上穿越火线录制保存之后的视频,在哪看呢?有很多用户都不知道怎么在Win10电脑查看这个穿越火线录制保存的视频 ...
- 怎么在计算机里找到CF里保存的视频,Win10电脑上查看穿越火线录制保存视频的具体方法...
在Win10电脑上玩穿越火线,遇到精彩时刻我们都会录制下,好跟朋友分享,但是在Win10电脑上穿越火线录制保存之后的视频,在哪看呢?有很多用户都不知道怎么在Win10电脑查看这个穿越火线录制保存的视频 ...
- 使用opencv调用摄像头然后录制视频和保存文件
用 OpenCV 开发经常用到摄像头,从 Camera获取图像后用OpenCV的算法进行处理,但是一般我们处理完图像之后,还需要将视频保存下来,比如保存成avi.mp4等格式.怎么保存呢?其实Open ...
最新文章
- 5-flutter 布局和列表
- CVPR单目深度估计竞赛结果出炉，腾讯光影研究室优势夺冠，成果落地应用
- 老男孩Linux运维第41期20170924开班第五周学习重点课堂记录
- java实现将A表数据转移到B表_解决用B表跟新A表数据，如果A表中没有，则把B表的数据插入A表（merge into）...
- currentThread的一个复杂案例
- VMP分析之VM解码循环与基本架构(一)
- c语言结构体与共同体课件,《结构体与共同体》PPT课件.ppt
- 指令级别解释对象创建过程和DCL为什么要volatile
- 最新28个很棒的 jQuery 教程
- SAP Spartacus里unit list tree的页面显示和后台响应数据的对应关系
- 如何实现 asp.net core 安全优雅退出 ?
- linux打印机怎么设置631端口,设置 Linux 下打印机的几种方式
- linux 磁盘清理脚本,磁盘清理脚本
- python中用于返回元组中元素最小值的是_第5章习题
- 《普林斯顿微积分读本》笔记-第4章求解多项式的极限问题
- Android自学视频百度网盘链接
- 【Ceph源码分析】纠删码编码
- Oracle 11g 学习笔记-6（触发器、函数、存储过程、程序包）
- 畅联“5机”，华为云WeLink勇当数字化联接器
- 深圳超美海边烧烤场 深圳户外烧烤攻略
热门文章
- 阿里工程师下乡与一个瓜农的“北伐”
- Pytorch入门教程学习笔记（六）循环神经网络RNN（学周杰伦写歌）
- 海康网络摄像机与电脑交互，有网络和无网络两种方式读取URL视频流，以及无网络情况下配置IP地址
- android 全局剪贴板,Android剪贴板详解
- 2020年11月最新互联网大厂面试经验分享【网易、阿里、腾讯、京东、百度、爱奇艺、字节、小米、美团、搜狐、58】
- c语言中short作用,详解C语言中整数（short,int,long）
- TYPE g_date_tbl_typ IS TABLE OF DATE INDEX BY VARCHAR2(1000)；
- 【TL学习笔记】1：领域自适应(Domain Adaptation)方法综述
- 网站死链接检测查询工具
- 关于a:hover span和a span:hover的区别