demo2: записать видео

После просмотра демонстрации давайте посмотрим, как это реализовать -

Введение

Можно сказать, что API довольно простой и грубый.

Конструктор MediaRecorder()

Создайте новый объект MediaRecorder для операций записи.

В приведенной выше демонстрации используются только два метода и два события:

Два метода запуска, остановки

start()

Запустите запись на носитель.

Можно установить параметр, и записанный носитель будет разделен на отдельные фрагменты в соответствии с установленным значением вместо записи очень большого целого фрагмента контента по умолчанию.

stop()

Остановите запись и инициируйте событие dataavailable, возвращая данные записи, в которых хранится содержимое большого двоичного объекта.

Три события: запуск, остановка, доступность данных

onstart

Срабатывает при начале записи

onstop

Срабатывает, когда запись заканчивается

ondataavailable

Запускается в то же время, когда запись заканчивается, и записанные медиаданные возвращаются в объекте события.

сегмент кода

Часть кода, используемого в демонстрации:

Получите пользовательские права доступа к медиафайлам и создайте объект медиазаписи:

requestMediaAccess () {
	//获取用户媒体权限，视频的话参数{audio: true, video: true}
    navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
    	//创建媒体录制对象
        this.recorder = new window.MediaRecorder(stream);
        this.bindEvents();
    }, error => {
        alert('出错，请确保已允许浏览器获取录音权限');
    });
}

Привязать события к обработке записанных данных:

bindEvents () {
    this.recorder.ondataavailable = this.getRecordingData;
    this.recorder.onstop = this.saveRecordingData;
},

getRecordingData (e) {
	//录制的数据
    this.chunks.push(e.data);
},

//保存音频数据
saveRecordingData  () {
    let blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' }),
        audioStream = URL.createObjectURL(blob),
        //估算时长
        duration = parseInt(blob.size / 6600);
    if(duration <= 0) {
        alert('说话时间太短');
        return;
    }
    if(duration > 60) {
        duration = 60;
    }
    this.chunkList.push({duration: duration, stream: audioStream});
    this.chunks = [];
},

//视频的话：保存视频数据
saveRecordingData  () {
    let blob = new Blob(this.chunks, { 'type' : 'video/webm' }),
        videoStream = URL.createObjectURL(blob);
    this.chunkList.push({stream: videoStream});

    this.onCapture(this.index);        

    this.chunks = [];
},

//视频：获取视频截图
onCapture (index) {
    let item = this.chunkList[index];
    this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
    this.canvas.toBlob((blob) => {
        let src = URL.createObjectURL(blob);
        this.$set(item, 'poster', src);
    });
    //索引后移
    this.index ++;

    //隐藏video
    this.showVideo(false);
    this.video.srcObject = null;
}

Уведомление

Расчетное время - это кусок моего мозга 😂 . Потому что я действительно не знаю, как его получить, кажется, что длительность можно получить только после назначения src для аудио, но я пробовал несколько методов безрезультатно... Надеюсь, опытный босс может подсказать 🙏 .

Конкретный код см. в codepen,demo1,demo2

разное

Кроме того, есть некоторые свойства, другие методы и события.

Атрибуты

• mimeType

Возвращает тип MIME контейнера записи, выбранного селектором при создании объекта MediaRecorder.

• state

Возвращает текущее состояние объекта записи MediaRecorder: неактивно (ожидание), запись (запись), пауза (приостановлено)

• stream

Возвращает объект потока, переданный конструктором при создании объекта рекордера MediaRecorder.

• ignoreMutedMedia

Используется для указания, записывает ли MediaRecorder тихие источники ввода. Если false, будет записываться тихий звук или видео с черным экраном, значение по умолчанию — false.

• videoBitsPerSecond

Возвращает скорость кодирования, используемую видео

• audioBitsPerSecond

Возвращает скорость кодирования, используемую аудио

метод

• isTypeSupported()

Возвращает логическое значение, указывающее, поддерживается ли заданный тип MIME устройством текущего пользователя.

• pause()

Приостановить запись мультимедиа

• resume()

Возобновление записи ранее приостановленных действий записи

• requestData()

Запрашивает запись с начала до текущего момента, сохраненную в виде большого двоичного объекта. (Или вернуть содержимое с момента последнего вызова метода requestData()). После вызова этого метода запись продолжится, но будет создан новый объект Blob

мероприятие

• onerror

Срабатывает при возникновении ошибки записи

• onpause

Запускается, когда запись приостановлена

• onresume

Запускается, когда запись продолжается

Суммировать

Этот API не предъявляет низких требований к браузерам, в настоящее время поддерживаются только высокие версии Chrome (49+) и firefox (61+), а также доступна версия Chrome для Android.

Запись аудио и видео может быть простой, но все еще есть много проблем, связанных с приложением чата, таких как передача данных, шифрование и т. д. Еще предстоит пройти долгий путь, чтобы создать такой инструмент, как WeChat.

использованная литература

• MediaStream Recording API
• MediaRecorder
• API-интерфейс Media Recorder HTML5 в действии в Chrome и Firefox