javascript - 如何在发送到服务器之前将 mimetype (video/webm) 和编解码器 (vp9) 添加到 blob 对象
问题描述
我正在使用 webrtc 录制视频并将每个 10 秒的视频作为 blob 发送到服务器,所有 10 秒的文件都保存在服务器上,到目前为止一切都很好,但唯一的问题是只有第一个视频文件被播放为视频,其他文件没有因为它缺少编解码器和 MIMEType 而被播放。请帮助我如何使用 mimetype 和机智编解码器 vp9 发送每 10 秒的 blob
// This code is adapted from
// https://rawgit.com/Miguelao/demos/master/mediarecorder.html
'use strict';
/* globals MediaRecorder */
const mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
let mediaRecorder;
let recordedBlobs;
let sourceBuffer;
const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
recordButton.addEventListener('click', () => {
if (recordButton.textContent === 'Start Recording') {
startRecording();
} else {
stopRecording();
recordButton.textContent = 'Start Recording';
playButton.disabled = false;
downloadButton.disabled = false;
}
});
const playButton = document.querySelector('button#play');
playButton.addEventListener('click', () => {
const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
recordedVideo.src = null;
recordedVideo.srcObject = null;
recordedVideo.src = window.URL.createObjectURL(superBuffer);
recordedVideo.controls = true;
recordedVideo.play();
console.log('start- display recordedblob');
console.log(recordedVideo);
console.log('end- display recordedblob');
});
const downloadButton = document.querySelector('button#download');
downloadButton.addEventListener('click', () => {
const blob = new Blob(recordedBlobs, {type: 'video/webm'});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
});
function handleSourceOpen(event) {
console.log('MediaSource opened');
sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
console.log('Source buffer: ', sourceBuffer);
}
function handleDataAvailable(event) {
console.log('handleDataAvailable', event);
console.log('shree sai baba', event.data);
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
console.log('heyy'+recordedBlobs);
// to save video as each blob
var formData = new FormData();
formData.append('video', event.data);
console.log('result blob which am trying to send to server', event.data);
// Execute the ajax request, in this case we have a very simple PHP script
// that accepts and save the uploaded "video" file
xhr('/webcam/', formData, function (fName) {
console.log("video successfully uploaded !");
});
// Helper function to send
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(location.href + request.responseText);
}
};
request.open('POST', url);
request.send(data);
console.log(data);
console.log('logg')
console.log(request.response);
}
console.log('10 seconds video sent to the server');
// end of save video as each
}
}
function startRecording() {
recordedBlobs = [];
let options = {mimeType: 'video/webm;codecs=vp9'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error(`${options.mimeType} is not Supported`);
errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
options = {mimeType: 'video/webm;codecs=vp8'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error(`${options.mimeType} is not Supported`);
errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
options = {mimeType: 'video/webm'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error(`${options.mimeType} is not Supported`);
errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
options = {mimeType: ''};
}
}
}
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
console.error('Exception while creating MediaRecorder:', e);
errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
return;
}
console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
recordButton.textContent = 'Stop Recording';
playButton.disabled = true;
downloadButton.disabled = true;
mediaRecorder.onstop = (event) => {
console.log('Recorder stopped: ', event);
console.log('naduuuuuuuuuuuuuuuuuuuuzz');
console.log('Recorded Blobss: ', recordedBlobs);
console.log('ans', recordedBlobs);
// console.log(Blob.arrayBuffer())
console.log('Recorded Blobss: ', recordedBlobs.type);
console.log('naduuuuuuuuuuuuuuuuuuuu');
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10000); // collect 10s of data
console.log('MediaRecorder started', mediaRecorder);
}
function stopRecording() {
mediaRecorder.stop();
}
function handleSuccess(stream) {
recordButton.disabled = false;
console.log('getUserMedia() got stream:', stream);
window.stream = stream;
const gumVideo = document.querySelector('video#gum');
gumVideo.srcObject = stream;
}
async function init(constraints) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
console.error('navigator.getUserMedia error:', e);
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
document.querySelector('button#start').addEventListener('click', async () => {
const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
const constraints = {
audio: {
echoCancellation: {exact: hasEchoCancellation}
},
video: {
width: 720, height: 480
}
};
console.log('Using media constraints:', constraints);
await init(constraints);
});
解决方案
request.setRequestHeader('Content-Type', 'video/webm');
推荐阅读
- swift - 在 SwiftUI 中创建共享按钮时需要帮助
- git - 为什么空的 Bitbucket 存储库“包含”我“本地没有”的工作?
- typescript - 为什么这些结构相似的类型不兼容?
- django - django.core.exceptions.FieldError:为帐户指定的未知字段(组)
- javascript - 向 API 发送带有基本身份验证的 GET HTTPS 请求
- javascript - 确保 iframe 已加载并存在于页面中
- google-apps-script - 谷歌脚本自动切换工作表/选项卡有条件
- c++ - : c 结构中的符号,它使用
- java - 自动装配的身份验证管理器 java
- swift - 有没有一种有效的方法来动态比较 Swift 中的静态属性列表?