html实现视频录制，保存和回放

录制和保存视频，通过三个按钮配合完成。

<!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>

打开电脑摄像头
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/143215.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

视频录制软件哪个好,推荐几款简单实用的视频课件录制软件

视频录制软件哪个好,推荐几款简单实用的视频课件录制软件

日常生活中&#xff0c;我们有时候会因为工作或学习的原因&#xff0c;会使用到一些视频录制软件&#xff0c;通过视频录制软件&#xff0c;我们可以记录一些错过的细节&#xff0c;提高学习或工作效率。当然&#xff0c;现在网上的视频录制软件那么多&#xff0c;到底视频录制…
阅读更多...
视频录制工具OBS选择区域录制

视频录制工具OBS选择区域录制

视频录制工具OBS录制时默认是对整个屏幕区域进行录制的&#xff0c;如果我们想只是录取某一屏幕区域&#xff0c;就需要进行一些修改。 相关的修改步骤如下&#xff1a; &#xff08;1&#xff09;新建一个“显示器采集”。 在弹出的对话框中&#xff0c;指定名字。 接着&…
阅读更多...
基于Camera2和MediaRecorder实现视频录制

基于Camera2和MediaRecorder实现视频录制

一、概述 视频录制&#xff0c;在一般开发中很少遇到&#xff0c;大部分开发工作都是写写页面&#xff0c;请求接口&#xff0c;展示数据等等。真要遇到&#xff0c;可能采用第三方库实现&#xff0c;一来实现快速&#xff0c;二来可能觉得别人实现的比较好。特别是在开发周期…
阅读更多...
html 手机录视频,手机怎么录制视频 怎么用手机录视频？

html 手机录视频,手机怎么录制视频 怎么用手机录视频？

问&#xff1a;手机怎么录制视频 怎么用手机录视频&#xff1f; 答&#xff1a;这里要分两种情况&#xff0c;一、安卓手机录视频&#xff0c;二、苹果手机录视频。其实录制视频是最简单的事了&#xff0c;下载一个好用的视频录制软件就可以搞定了&#xff0c;现在的视频录制软…
阅读更多...
Hololens录制视频

Hololens录制视频

说明&#xff1a; 最近老有兄弟伙在问&#xff0c;如何录制视频&#xff0c;讲道理的话这些东西Hololens官网上面都有详细的说明&#xff0c;不需要过于累赘说明&#xff1b;这里还是简要的讲讲如何录制&#xff0c;对Hololens新朋友们一点说明. 这里只对录制视频的步骤做简要说…
阅读更多...
腾讯会议录制视频下载

腾讯会议录制视频下载

背景解决方法 默认播放页面下全屏播放页面下 小总结 背景 最近在腾讯会议上参加了一场培训&#xff0c;我觉得特别棒&#xff0c;里面干货很多。老师使用了腾讯会议的云录制功能&#xff0c;然后把录制好的视频链接发给了我们。 如此优秀的培训课程&#xff0c;我想自己下载…
阅读更多...
html5视频页面的源码,html5 网页录制视频示例源码

html5视频页面的源码,html5 网页录制视频示例源码

【实例简介】该示例必须在 https环境下运行，否则会遇到意想不到的问题 【实例截图】 【核心代码】MeidaRecorder *{box-sizing: border-box; margin: 0; padding: 0; font-family:monospace; } html,body{height: 100%; } html{-webkit-font-smoothing: antialiased; -moz-osx…
阅读更多...
前端 视频录制剖析

前端 视频录制剖析

前端 视频录制剖析 作者&#xff1a; 很菜的小白在分享 时间&#xff1a;2021年12月7日 音视频三部曲 前端 音频录制剖析 前端 视频录制剖析 前端 桌面共享剖析 介绍 身为一个优秀的前端 coder 我们可能会遇到各种各样的需求&#xff0c;昨天我接到了一个新的需求&#xff0…
阅读更多...
python实现屏幕视频录制_用Python来做一个屏幕录制工具

python实现屏幕视频录制_用Python来做一个屏幕录制工具

一、写在前面 作为一名测试，有时候经常会遇到需要录屏记录自己操作，方便后续开发同学定位。以前都是用screentogif来录屏制作成动态图，偶尔的机会看到python也能实现。那就赶紧学习下。 二、效果展示 三、知识串讲 这次要讲的东西可能比较多了，涉及到pyqt5 gui软件的制作、…
阅读更多...
ffmpeg视频录制

ffmpeg视频录制

录制视频的基本步骤是&#xff1a; 1. 初始化ffmpeg的基本对象&#xff0c;并将这些对象关联起来&#xff0c;然后打开文件并写入文件头。 2. 编码视频&#xff0c;并将编码后数据存写到文件中。 3. 写入文件尾&#xff0c;并清理ffmpeg对象。 首先&#xff0c;需要初始化f…
阅读更多...
html 视频录制插件,网页视频录制插件工具（浏览器插件 Recorder）

html 视频录制插件,网页视频录制插件工具（浏览器插件 Recorder）

网页视频录制插件工具(浏览器插件 Recorder)Loom Video Recorder是一款视频录制工具扩展插件&#xff0c;可以一键录制浏览器的单个标签页,&#xff0c;也支持摄像头录制&#xff0c;能够将录制的视频内容下载道本地&#xff0c;有需要的用户不要错过了&#xff0c;欢迎下载使用…
阅读更多...
如何录制一个高品质的网页直播视频，录制在线直播视频的快速教程

如何录制一个高品质的网页直播视频，录制在线直播视频的快速教程

怎么录制网页上的直播视频&#xff1f;怎么录制网页上正在播放的视频&#xff1f;怎么把别人在线直播的视频快速录制下来&#xff1f; 今天就教大家用超级捕快来快速录制一个高品质的网页直播视频&#xff0c;高清无损&#xff0c;没有水印。不仅能录制在线直播视频&#xff0…
阅读更多...
浏览器怎么录制网页视频？3种网页视频录制方法

浏览器怎么录制网页视频？3种网页视频录制方法

我们每天都会在浏览器上观看大量的视频&#xff0c;尤其是在爱奇艺、腾讯、哔哩哔哩等网页上。有时候就会观看到一些精彩的视频画面&#xff0c;就想要将这些画面给下载。 那怎么把网页视频录制下来&#xff1f;今天本文就给大家分享3种有效的网页视频录制方法&#xff0c;有需…
阅读更多...
k8s进阶5——AppArmor、Seccomp、ImagePolicyWebhook

k8s进阶5——AppArmor、Seccomp、ImagePolicyWebhook

文章目录 一、AppArmor限制容器对资源访问1.1 实现步骤1.1.1 定义策略1.1.2 加载策略1.1.3 引用策略 2.2 案例 二、Seccomp 限制容器进程系统调用案例一&#xff1a;使用自定义策略案例二&#xff1a;使用容器运行时默认策略 三、动态准入控制Webhook3.1 ImagePolicyWebhook控制…
阅读更多...
数组如何转对象

数组如何转对象

最近做项目的时候需要把拿到的数组转为对象使用 let arr [{id:1,value:正式},{id:2,value:非正式}]//首先定义一个空对象let obj{}//循环遍历数组arr.forEach(item>{//把id作为对象的键 把value作为对象的值值obj[item.id]item.value})console.log(obj);运行结果如下 这样…
阅读更多...
对象转为数组

对象转为数组

对象转成数组 在开发中&#xff0c;前端处理数据&#xff0c;很多时候都会用到把对象转成数组&#xff0c;话不多说&#xff0c;咱们直接上代码 // 对象转数组&#xff0c;想要转成什么字段根据需求 function fmObjToArr (data) {let arr []for (let key in data) {arr.push…
阅读更多...
js数组对象转对象

js数组对象转对象

将数组对象的数据转换为普通对象键值对key:value的形式 let arr [{id:1,employeeNo:110,name:张三},{id:2,employeeNo:111,name:李四},{id:3,employeeNo:112,name:王五},{id:4,employeeNo:113,name:章雨},{id:5,employeeNo:114,name:小红}, ] let newObj {} arr.map(item >…
阅读更多...
JS对象转数组

JS对象转数组

一、JS对象转数组方法如下(不考虑for相关遍历): 1.[...res] 2.Array.from(res) 3.Object.values(res) 4. Array.prototype.slice.call(res) let obj {name:李四, age:22, gender:男} //可枚举 let obj2 {0:李四, 1:22, 2:男, length:3} //可枚举 伪数组 let set new Set([…
阅读更多...
3种JavaScript 对象转数组的方法

3种JavaScript 对象转数组的方法

来源 | https://www.fly63.com 我们在项目开发的时候&#xff0c;有时需要将js对象转换为数组&#xff0c;下面小编给大家具体演示一下怎么转换&#xff0c;主要是介绍一些常用、简洁的转换方法。 比如JavaScript对象如下&#xff1a; let obj {name: 前端,url: https://www.w…
阅读更多...
对象数据如何转化成数组

对象数据如何转化成数组

文章目录 前言一、后端给的数据二、如何转换三、最终结果 前言 项目中后端给的数据有时候不可能完全符合前端的数据要求&#xff0c;比如element-uivue项目组合中&#xff0c;下拉框数据是数组的形式。然而后端同事给的确是对象数据&#xff0c;当然你可以和后端协商改成你想要…
阅读更多...
最新文章

Copyright @ 2022~2023