简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie erhalte ich Ressourcen für die Audio- und Videosammlung in js? So sammeln Sie Audio und Video mit js

Wie erhalte ich Ressourcen für die Audio- und Videosammlung in js? So sammeln Sie Audio und Video mit js

不言
不言Original
2018-08-09 10:27:134935Durchsuche

Wie sammelt js Audio- und Videoressourcen? Ich glaube, dass jeder mit dieser Methode nicht vertraut ist. Tatsächlich kann js Audio und Video sammeln, aber die Kompatibilität ist möglicherweise nicht sehr gut. Heute werde ich meinen Freunden mitteilen, wie man Audio und Video mit js sammelt.

Hier ist eine Liste der verwendeten APIs:

getUserMedia: Öffnen Sie die Kamera- und Mikrofonschnittstelle (Dokumentlink)

MediaRecorder: Audio- und Videostreams sammeln (Dokumentlink)

srcObject: Das Video-Tag kann den Videostream direkt abspielen. Dies ist eine Funktion, die jeder selten nutzen sollte Tatsächlich ist es sehr kompatibel. Ich empfehle jedem, sich darüber zu informieren (Dokumentenlink)

captureStream: Canvas-Ausgabestream, tatsächlich ist es nicht nur Canvas, sondern dies Die Funktion ist hier aufgeführt. Einzelheiten finden Sie in der Dokumentation (Dokumentlink)

1. Zeigen Sie das Video von der Kamera an

Öffnen Sie zuerst die Kamera

// 这里是打开摄像头和麦克设备（会返回一个Promise对象）
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then(stream => {
  console.log(stream) // 放回音视频流
}).catch(err => {
  console.log(err)  // 错误回调
})

Oben haben wir die Kamera und das Mikrofon erfolgreich eingeschaltet und Audio- und Videostreams erhalten. Der nächste Schritt besteht darin, den Stream in der interaktiven Schnittstelle zu präsentieren.

Zweitens das Video zeigen 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <video id="video" width="500" height="500" autoplay></video>
</body>
<script>
  var video = document.getElementById(&#39;video&#39;)
  navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
  }).then(stream => {
    // 这里就要用到srcObject属性了，可以直接播放流资源
    video.srcObject = stream
  }).catch(err => {
    console.log(err)  // 错误回调
  })
</script>

Der Effekt ist wie folgt:
Wie erhalte ich Ressourcen für die Audio- und Videosammlung in js? So sammeln Sie Audio und Video mit js
Bis zu diesem Punkt haben wir unsere Kamera erfolgreich platziert Die Seite demonstrierte. Der nächste Schritt besteht darin, das Video aufzunehmen und die Videodatei herunterzuladen.

2. Video von der Kamera abrufen

Das MediaRecorder-Objekt wird hier verwendet:

Erstellen Sie ein neues MediaRecorder-Objekt, kehrt zurück ein MediaStream-Objekt für Aufzeichnungsvorgänge und unterstützt Konfigurationselemente zum Konfigurieren des MIME-Typs des Containers (z. B. „video/webm“ oder „video/mp4“) oder der Audio-Bitrate, die Video-Bitrate

MediaRecorder empfängt 2. Der erste Parameter ist der Stream-Audio- und -Video-Stream, und der zweite ist der Optionskonfigurationsparameter. Als nächstes können wir den von der obigen Kamera erhaltenen Stream zum MediaRecorder hinzufügen. 

var video = document.getElementById(&#39;video&#39;)
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then(stream => {
  // 这里就要用到srcObject属性了，可以直接播放流资源
  video.srcObject = stream
  var mediaRecorder = new MediaRecorder(stream, {
    audioBitsPerSecond : 128000,  // 音频码率
    videoBitsPerSecond : 100000,  // 视频码率
    mimeType : &#39;video/webm;codecs=h264&#39; // 编码格式
  })
}).catch(err => {
  console.log(err)  // 错误回调
})

Oben haben wir eine Instanz von MediaRecorder mediaRecorder erstellt. Der nächste Schritt besteht darin, die Methode zum Starten und Stoppen der Sammlung von mediaRecorder zu steuern.
MediaRecorder stellt einige Methoden und Ereignisse zur Verfügung, die wir verwenden können:

MediaRecorder.start(): Wenn Sie diese Methode aufrufen, können Sie einen Millisekundenwert für den Timeslice-Parameter festlegen Millisekundenwert. Anschließend werden die aufgezeichneten Medien gemäß dem von Ihnen festgelegten Wert in einzelne Blöcke unterteilt, anstatt wie standardmäßig einen sehr großen gesamten Inhaltsblock aufzuzeichnen.

MediaRecorder.stop(): Stoppen Sie die Aufzeichnung. Gleichzeitig wird das dataavailable-Ereignis ausgelöst und Aufzeichnungsdaten zurückgegeben, die den Blob-Inhalt speichern. Dann wird das ondataavailable-Ereignis nicht mehr aufgezeichnet: MediaRecorder.stop löst dieses Ereignis aus, das zum Abrufen verwendet werden kann das aufgezeichnete Medium (Blob befindet sich im Datenattribut des Ereignisses Kann als Objekt verwendet werden) 

// 这里我们增加两个按钮控制采集的开始和结束
var start = document.getElementById(&#39;start&#39;)
var stop = document.getElementById(&#39;stop&#39;)
var video = document.getElementById(&#39;video&#39;)
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then(stream => {
  // 这里就要用到srcObject属性了，可以直接播放流资源
  video.srcObject = stream
  var mediaRecorder = new MediaRecorder(stream, {
    audioBitsPerSecond : 128000,  // 音频码率
    videoBitsPerSecond : 100000,  // 视频码率
    mimeType : &#39;video/webm;codecs=h264&#39; // 编码格式
  })
  // 开始采集
  start.onclick = function () {
    mediaRecorder.start()
    console.log(&#39;开始采集&#39;)
  }
  // 停止采集
  stop.onclick = function () {
    mediaRecorder.stop()
    console.log(&#39;停止采集&#39;)
  }
  // 事件
  mediaRecorder.ondataavailable = function (e) {
    console.log(e)
    // 下载视频
    var blob = new Blob([e.data], { &#39;type&#39; : &#39;video/mp4&#39; })
    let a = document.createElement(&#39;a&#39;)
    a.href = URL.createObjectURL(blob)
    a.download = `test.mp4`
    a.click()
  }
}).catch(err => {
  console.log(err)  // 错误回调
})

OK, führen Sie jetzt eine Welle von Operationen aus >Wie Sie im Bild oben sehen können, gibt es ein Blob-Objekt, dies ist die Videoressource, und dann können wir den Blob über die Methode URL.createObjectURL() auf die lokale URL herunterladen. Das Sammeln und Herunterladen des Videos ist abgeschlossen, es ist sehr einfach und grob.

Das Obige ist ein Beispiel für die Videoaufnahme und den Download. Wenn Sie nur Audio aufnehmen möchten, stellen Sie einfach „mimeType“ auf die gleiche Weise ein. Ich werde hier keine Beispiele nennen. Im Folgenden werde ich die Aufzeichnung von Canvas als Videodatei vorstellen

Wie erhalte ich Ressourcen für die Audio- und Videosammlung in js? So sammeln Sie Audio und Video mit js3. Canvas-Ausgabevideostream


Die CaptureStream-Methode wird hier auch verwendet Es ist möglich, den Canvas-Stream auszugeben und ihn dann per Video anzuzeigen oder MediaRecorder zum Sammeln von Ressourcen zu verwenden. 

// 这里就闲话少说直接上重点了因为和上面视频采集的是一样的道理的。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas width="500" height="500" id="canvas"></canvas>
  <video id="video" width="500" height="500" autoplay></video>
</body>
<script>
  var video = document.getElementById(&#39;video&#39;)
  var canvas = document.getElementById(&#39;canvas&#39;)
  var stream = $canvas.captureStream(); // 这里获取canvas流对象
  // 接下来你先为所欲为都可以了，可以参考上面的我就不写了。
</script>
Ich werde unten ein weiteres GIF posten (dies ist eine Kombination aus der Canvas-Event-Demo, die ich letztes Mal geschrieben habe, und dieser Videosammlung) Portal (Canvas-Event-Bindung) Ich hoffe, jeder kann die folgenden Effekte erzielen Tatsächlich können Sie auch Hintergrundmusik usw. in das Canvas-Video einfügen.

Empfohlene verwandte Artikel:

JS lädt Video-Audio-/Video-Screenshot-Sharing-Techniken vor

Wie erhalte ich Ressourcen für die Audio- und Videosammlung in js? So sammeln Sie Audio und Video mit js

HTML5-Video- und Audio-Implementierungsschritte


So verwenden Sie H5 zur Bedienung von Audio und Video

Das obige ist der detaillierte Inhalt vonWie erhalte ich Ressourcen für die Audio- und Videosammlung in js? So sammeln Sie Audio und Video mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 接口 JS 对象 事件 canvas
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in die Funktionsweise von JavaScript-TimernNächster Artikel：Detaillierte Einführung in die Funktionsweise von JavaScript-Timern

In Verbindung stehende Artikel

Mehr sehen