webrtc 入门第二章音视频录制

日落班

已于 2022-02-27 00:20:18 修改

阅读量1.4k

点赞数

分类专栏： webrtc 工具类文章标签：音视频 webrtc html5

于 2022-02-27 00:19:07 首次发布

本文链接：https://blog.csdn.net/weixin_42547619/article/details/123158808

版权

工具类同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

webrtc

6 篇文章 14 订阅

订阅专栏

webrtc 入门第二章音视频录制

一、介绍

1、媒体录制原理

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

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

二、实践

1、录制对象 MediaRecoder

var mediarecode=new MediaRecoder(stream,options)

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

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

参数	解释
mimeType	指定录制的媒体类型（音频、视频）、编码方式（audio/mpeg,audio/ogg,video/mp4）等
audioBitsPerSecond	指定音频比特率
videoBitsPerSecond	指定视频比特率
bitsPerSecond	指定音视频比特率,包含上面两项

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

名称	作用	类型
MediaRecoder.start()	开始录制事件，timeslice为触发ondataavailable事件	方法
MediaRecoder.pause()	停止录制	方法
MediaRecoder.resume()	恢复录制	方法
MediaRecoder.isTypeSupported()	判断是否支持某个格式（有需求可以使用）	方法
MediaRecoder.ondataavailable()	当有录制有有效数据是触发该事件，在次方法里可以处理数据例如下载等	事件
MediaRecoder.onerror()	录制出错时触发该事件，此时会停止录制	事件

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>