webrtc 入门第二章音视频录制_recordrtc网页录制视频必须音量大于0?-CSDN博客

本文链接：https://blog.csdn.net/yinshipin007/article/details/129882635

1、介绍

1、媒体录制原理

在很多场景中回放音视频资源的需求是非常重要的例如会议，直播授课等。任何媒体形式的表情都可进行录制，如 ,,等。其中内容更加自由用户的任何2d,3d操作都可以进行录制和传播。

MediaRecoder 是控制媒体录制的api，使用它可以进行录制音视频，使得web可以脱离服务器，独立进行视频录制。同时W3C也制定了相应的web标准。录制出来的是经过转码的标准媒体流数据。

2、实践

2.1录制对象 MediaRecoder

var mediarecode=new MediaRecoder(stream,options)

1.stream：为通过getUserMedia方法获取到的视频流。同样可已直接用 ,, 标签直接获取，这样可以实现本地播放视频录制，绘画板同步等。

2.options:为限制参数，具体如下

3.mediaRecoder的常用api方法和事件

2.2录制音频

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>webrtc录制声音</title>
</head>
<body>
<div class="app">
    <h1>声音录制<h1/>
        <audio class="audio" controls autoplay></audio>
        <hr/>
        <input type="button" title="打开麦克风" value="打开麦克风" v-on:click="openAudio"/>
        <input type="button" title="开始录制" value="开始录制" v-on:click="startRecode"/>
        <input type="button" title="停止录制" value="停止录制" v-on:click="stopRecode"/>
        <input type="button" title="播放" value="播放" v-on:click="play"/>
        {{/*    <input type="button" title="下载" value="下载" v-on:click="download"/>*/}}
        <a :href="downloadUrl" download="test1.ogg" v-on:click="download"/>下载</a>
</div>
</body>
<script src="/static/js/Vue.2.5.3.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: ".app",
        delimiters: ['{[', ']}'],
        data: {
            status: "",
            stream: null,
            mediaRecorder: null,
            recordedBlobs: [],
            audio: null,
            downloadUrl: ""
        },
        methods: {
            // 下载
            download: function () {
                const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})
                this.downloadUrl = window.URL.createObjectURL(blob)
                //setTimeout(() => {
                //    window.URL.revokeObjectURL(this.downloadUrl)
                // }, 100)
                // // 必须创建一个a标签下载
                 const a = document.createElement("a")
                 a.style.display = "none"
                 a.href = this.downloadUrl
                 a.download = "test.ogg"
                 document.body.appendChild(a)
                 a.click()
                // 移除a标签
                 setTimeout(() => {
                     document.body.removeChild(a)
                 }, 100)
            },
            // 开始录制
            startRecode: function () {
                let that = this;
                if (that.status == "startRecode") {
                    return
                }
                if (that.stream == null) {
                    alert("请打开麦克风")
                    return;
                }
                that.status = "startRecode"
                // 开始录制

                let options = {"mineType": "audio/ogg;"}
                try {
                    that.mediaRecorder = new MediaRecorder(that.stream, options)
                    console.log(that.mediaRecorder)
                    // 退出回调事件
                    that.mediaRecorder.onstop = (event) => {
                        console.log("录制已停止")
                        console.log(event)
                        console.log(that.recordedBlobs)
                    }

                    // 录制数据回调时间
                    that.mediaRecorder.ondataavailable = that.ondataavailable
                    // 录制10s
                    that.mediaRecorder.start(10)
                } catch (e) {
                    alert("录制失败", e)
                }
            },
            // 播放
            play: function () {
                const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})
                this.audio = document.querySelector('audio');
                this.audio.src = window.URL.createObjectURL(blob)
                this.audio.play()
            },

            stopRecode: function () {
                this.mediaRecorder.stop()
                alert("停止录制")
            },
            ondataavailable: function (event) {
                let that = this;
                if (event.data && event.data.size > 0) {
                    console.log("recode data", event.data)
                    // 收到数据后，导入本都录制缓存
                    that.recordedBlobs.push(event.data)
                }
            },
            openAudio: function () {
                if (navigator.getUserMedia) {
                    window.audioContext = new AudioContext()
                    navigator.getUserMedia({
                        'audio': true
                    }, this.onVoice, this.errorFunc); //success是获取成功的回调函数
                } else {
                    alert('Native device media streaming (getUserMedia) not supported in this browser.');
                }
            },
            errorFunc: function (e) {
                alert("tive device media streaming (getUserMedia) not supported in this browser")
            },
            onVoice: function (stream) {
                let that = this;
                console.log(stream)
                that.status = "start"
                that.stream = stream
            }
        },

    })
</script>
</html>

音频录制的流程如下

1.打开麦克风：同样使用getUserMedia()方法约束条件’audio’: true ，即可请求麦克风。获取到音频流stream

2.录制：使用MediaRecorder 接口开始录制。在录制过程中ondataavailable 回调方法将录制到的音频数据存入缓存中

3.播放：将音频缓存的数据创建Blob 对象，然后使用audio标签播放

4.下载：将音频缓存的数据创建Blob 对象，然后window.URL.createObjectURL创建下载地址，使用a标签进行下载