gpt4 book ai didi

javascript - 如何使用 HTML5 WebRTC 录制和保存视频

转载 作者:行者123 更新时间:2023-11-30 11:11:02 25 4
gpt4 key购买 nike

First run code snippet then read the description ...It will give you the structure

我想在第二个 video 元素 中录制、播放和保存视频。我面临的问题是:流在第一个 video-element 中运行,但无法录制和保存视频

.video {
border: 1px solid gray;
box-shadow: 3px 4px lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div style="text-align:center">
<h1>Welcome to WebRTC</h1>
<video class="video" #video autoplay controls></video>
<video class="video" style="width:360;" autoplay controls #recordedVideo></video>
<br>
<button class="btn btn-warning" (click)="startRecording()">Start</button>
<button class="btn btn-warning" (click)="stopRecording()">Stop</button>
<button class="btn btn-warning" (click)="playRecording()">Play</button>
</div>

------------------------修改并解决问题

我在 Luis Estevez 中所做的代码,我在 startRecording 方法中声明了事件,因为当我尝试在 blob 数组中推送流 block 时,它响应错误:推送方法不存在,即使我在之后创建了一个对象数组我声明了一个数组。

startRecording(stream) {
let options = { mimeType: 'video/webm' }
this.recordedBlobs = []
console.log(this.recordedBlobs)
try {
this.mediaRecorder = new MediaRecorder(stream, options)
} catch (e0) {
console.log('Try different mimeType')
}

console.log('Created MediaRecorder', this.mediaRecorder, 'with options', options)
// this.mediaRecorder.onstop = this.handleStop
this.mediaRecorder.onstop = (event) => {
console.log('Recorder stopped: ', event)
const videoBuffer = new Blob(this.recordedBlobs, { type: 'video/webm' })
this.downloadUrl = window.URL.createObjectURL(videoBuffer) // you can download with <a> tag

this.recordVideoElement = this.recordVideoElementRef.nativeElement
this.recordVideoElement.src = this.downloadUrl
}
// this.mediaRecorder.ondataavailable = this.handleDataAvailable
this.mediaRecorder.ondataavailable = (event) => {
if (event.data && event.data.size > 0) {
this.recordedBlobs.push(event.data)
}
}
this.mediaRecorder.start(100) // collect 100ms of data
console.log('MediaRecorder started', this.mediaRecorder)
}
谢谢 Luis Estevez :)

最佳答案

您并没有“真正”记录流,您只是复制了流对象,而不是来自流的事件数据。

使用MediaRecorder并将流作为构造函数参数传递。从事件处理程序 ondataavailable 中获取视频 blob。将记录的 blob 数组加入一个新的 Blob。从那里你可以使用 createObbjectURL(blob);

获取 url

下面的片段是伪代码:

** typescript 无法识别“MediaRecorder”,因此您必须找到一种方法将 type any 添加到 MediaRecorder


mediaRecorder: any;
recordedBlobs: Blob[];
downloadUrl: string;

handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
this.recordedBlobs.push(event.data);
}
}

handleStop(event) {
console.log('Recorder stopped: ', event);
const videoBuffer = new Blob(this.recordedBlobs, {type: 'video/webm'});
this.downloadUrl = window.URL.createObjectURL(videoBuffer); // you can download with <a> tag
this.recordVideoElement.src = this.downloadUrl;
}

startRecording(stream) {
let options = {mimeType: 'video/webm'};
this.recordedBlobs = [];
try {
this.mediaRecorder = new MediaRecorder(stream, options);
} catch (e0) {
console.log('Try different mimeType');
}
console.log('Created MediaRecorder', this.mediaRecorder, 'with options', options);
this.mediaRecorder.onstop = this.handleStop;
this.mediaRecorder.ondataavailable = this.handleDataAvailable;
this.mediaRecorder.start(100); // collect 100ms of data
console.log('MediaRecorder started', this.mediaRecorder);
}

stopRecording() {
this.mediaRecorder.stop();
console.log('Recorded Blobs: ', this.recordedBlobs);
this.recordVideoElement.controls = true;
}

playRecording() {
if (!this.recordedBlobs.length) {
console.log('cannot play.');
return;
}
this.recordVideoElement.play();
}

async ngOnInit() {
navigator.mediaDevices.getUserMedia({ video: { width: 360 } }).then(stream => {
this.videoElement.srcObject = stream
this.startRecording(stream);
})
}

关于javascript - 如何使用 HTML5 WebRTC 录制和保存视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53691792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com