录制音视频及promise的使用

最新推荐文章于 2024-03-07 19:11:16 发布

zhanghao86_

最新推荐文章于 2024-03-07 19:11:16 发布

阅读量669

点赞数

分类专栏： web前端文章标签： html5 audio video 录制音视频 promise

本文链接：https://blog.csdn.net/zhanghao86_/article/details/76599334

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<video autoplay controls></video>
<audio autoplay controls></audio>


<a download="media" class="downloadButton">下载</a>

<button class="play">录制</button>



<!--<script src="getDevices.js"></script>-->
<script>
    /**
     * Created by lenovo on 2017/8/2.
     */

// 监听音视频流
//    navigator.mediaDevices.getUserMedia:获得用户的媒体设备 打开摄像机和麦克风，获取到的时候回调一个then函数，stream：获取的音视频流
 navigator.mediaDevices.getUserMedia({audio:true,video:true}).then(function (stream) {
     console.log(stream);
//     创建一个video标签，接收音视频流
     var video=document.querySelector("video");
//     转换视频文件的格式为指定url格式
     video.src=URL.createObjectURL(stream);
 });

//监听音频流

 navigator.mediaDevices.getUserMedia({audio:true}).then(function (stream) {
        console.log(stream);
        var audio=document.querySelector("audio");
        audio.src=URL.createObjectURL(stream);
    });

// Promise  承诺 许诺 ->　（可以替代callback）
// 执行 -> 可以去做  -> 有然后 -> then() ->　then(function(){  发生然后得事 })
// 执行 -> 不去做 -> 没有然后 发生异常 -> catch() ->  catch(function(){ 理由 })

// 创建Promise对象的时候 第一个参数（函数） 去做的函数 -> 如果调用第一个参数（函数） 会执行 then里面的回调函数
// 创建Promise对象的时候 第二个参数（函数） 不去做 的函数 -> 如果调用第二个参数（函数） 会执行 catch里面的回调函数
// new Promise(function(do,reject){})


//demo:
 function loadData(url) {
     return new Promise(function (success,fail) {
         var request=new XMLHttpRequest();
         request.open("GET",url);
         request.onload=function () {
             this.response?success(this.response):fail("失败");
         };
         request.send();
     });
 }

 loadData("getDevices.html").then(function (result) {
     console.log(result);
 }).catch(function (error) {
     alert(error);
 });

    navigator.mediaDevices.getUserMedia({audio:true}).then(function (stream) {

        var audio=document.createElement("audio");
        audio.src=URL.createObjectURL(stream);
//        创建一个录制音频的对象 并传入获得的音频流
        var recorder=new MediaRecorder(stream);
//        获取录制按钮
        var playButton=document.querySelector(".play");

//        给录制按钮添加点击事件
        playButton.onclick=function () {
//            判断:点击录制按钮,音频流开始获取,再次点击暂停
            this.textContent=="录制"?audio.play():audio.pause();
//            判断:点击录制按钮,开始录制,再次点击停止录制
            this.textContent=="录制"?recorder.start():recorder.stop();
//            判断:点击录制按钮,按钮文字变为停止,再次点击变为录制
            this.textContent= this.textContent=="录制"?"停止":"录制";
        };

        //定义变量buffers
        var buffers=null;
        // 获得有效数据时调用
        recorder.ondataavailable=function (event) {
            // 收集媒体设备获得到的可以使用的媒体流数据
            console.log(event.data);
//            将得到的媒体流数据赋值给buffers
            buffers=event.data;
        };

//        获取下载的a标签
        var downloadButton=document.querySelector(".downloadButton");
//        监听录制停止时候的事件 利用H5里a标签的download属性下载录制的文件
        recorder.onstop=function () {
//            把buffers里面获得的数据转换为url格式
            var url=URL.createObjectURL(buffers);
//            下载路径为url
            downloadButton.href=url;
            buffers=null;
        }

//        出现错误时候捕获错误,并在控制台输出
    }).catch(function (error) {
        console.log(error)
    });
</script>
</body>
</html>