录制视频

来源：互联网发布：数据分析部门规划编辑：程序博客网时间：2024/05/02 04:56

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video autoplay></video> //自动播放
<audio></audio>
<a href="" download="media" class="downloadButton">下载</a>
<button class="recorderControl">录制</button>

</body>
<script src="js/new_file.js" type="text/javascript">

</script>

</html>

//js代码

//实时监听音视频流
navigator.mediaDevices.getUserMedia({audio:true,video:true}).then(function(stream){
console.log(stream);
var video = document.querySelector("video");
video.src = URL.createObjectURL(stream); //转化为URL格式
}).catch(function(error){
console.log(error);
});

//代码解释

//Navigator 对象包含有关浏览器的信息
//MediaDevices() 调取摄像头的方法
//MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备
//promise 允诺
//then() :执行的方法
//catch() :不执行是的方法
//then() :执行的方法
//then()和catch()是promise中的两个方法,then()是执行允诺时的方法,catch()是不执行允诺时的方法
//
//<audio> 标签定义声音，比如音乐或其他音频流。
//<video> 标签定义视频,比如电影片段或其他视频流
//onload 事件会在页面或图像加载完成后立即发生
//response 响应执行的结果

//URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
//这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

//MediaRecorder() 既可以录音频也可以录视频具体是根据传入参数的(MediaStream 接口是一个媒体内容的流)来决定

//play() 方法开始播放当前的音频或视频
//pause() 方法停止（暂停）当前播放的音频或视频
//start() 开始
//stop() 停止
//dom.ondataavailable = [function] 当dom数据可用时触发该事件
//onstop() 当用户不可见是调用

阅读全文

0 0