Pertanyaan Cara merekam webcam dan audio menggunakan webRTC dan koneksi Peer berbasis server


Saya ingin merekam webcam dan audio pengguna dan menyimpannya ke file di server. File-file ini kemudian akan dapat disajikan hingga pengguna lain.

Saya tidak memiliki masalah dengan pemutaran, namun saya mengalami masalah dalam membuat konten untuk direkam.

Pemahaman saya adalah getUserMedia .record() fungsi belum ditulis - hanya proposal yang telah dibuat sejauh ini.

Saya ingin membuat koneksi peer di server saya menggunakan PeerConnectionAPI. Saya mengerti ini agak sedikit mengganggu, tapi saya pikir itu mungkin untuk membuat rekan di server dan mencatat apa yang dikirim oleh klien-rekan.

Jika ini mungkin, saya kemudian harus dapat menyimpan data ini ke flv atau format video lainnya.

Preferensi saya sebenarnya adalah merekam webcam + sisi klien audio, untuk memungkinkan klien merekam ulang video jika mereka tidak menyukai upaya pertama mereka sebelum mengunggah. Ini juga akan memungkinkan interupsi dalam koneksi jaringan. Saya telah melihat beberapa kode yang memungkinkan perekaman gambar individu dari kamera web dengan mengirimkan data ke kanvas - itu keren, tapi saya juga membutuhkan audio.

Inilah kode sisi klien yang saya miliki sejauh ini:

  <video autoplay></video>

<script language="javascript" type="text/javascript">
function onVideoFail(e) {
    console.log('webcam fail!', e);
  };

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
    alert ('failed');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
/*  var x = new XMLHttpRequest();
    x.open('POST', 'uploadMessage');
    x.send(videoblob);
*/
    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('video uploaded');
}

</script>

<div id="webcamcontrols">
    <a class="recordbutton" href="javascript:startRecording();">RECORD</a>
</div>

75
2018-05-15 17:06


asal


Jawaban:


Anda pasti harus melihat Kurento. Ini menyediakan infrastruktur server WebRTC yang memungkinkan Anda untuk merekam dari feed WebRTC dan banyak lagi. Anda juga dapat menemukan beberapa contoh untuk aplikasi yang Anda rencanakan sini. Sangat mudah untuk menambahkan kemampuan merekam ke demo itu, dan menyimpan file media dalam URI (disk lokal atau di mana pun).

Proyek ini berlisensi di bawah LGPL Apache 2.0


EDIT 1

Sejak posting ini, kami telah menambahkan tutorial baru yang menunjukkan bagaimana menambahkan perekam dalam beberapa skenario

Disclaimer: Saya bagian dari tim yang mengembangkan Kurento.


42
2017-07-25 16:18



Tolong cek RecordRTC

RecordRTC adalah lisensi MIT pada github.


14
2018-06-30 12:22



Saya percaya menggunakan kurento atau MCU lainnya hanya untuk merekam video akan sedikit berlebihan, terutama mengingat fakta bahwa Chrome memiliki MediaRecorder Dukungan API dari v47 dan Firefox sejak v25. Jadi di persimpangan ini, Anda mungkin tidak memerlukan pustaka js eksternal untuk melakukan pekerjaan itu, coba demo ini saya buat untuk merekam video / audio menggunakan MediaRecorder:

Demo - akan berfungsi di chrome dan firefox (sengaja tidak mendorong gumpalan ke kode server)

Sumber Kode Github

Jika menjalankan firefox, Anda bisa mengujinya di sini sendiri (kebutuhan chrome https):

'use strict'

let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter = 1,
  chunks,
  media;


gUMbtn.onclick = e => {
  let mv = id('mediaVideo'),
    mediaOptions = {
      video: {
        tag: 'video',
        type: 'video/webm',
        ext: '.mp4',
        gUM: {
          video: true,
          audio: true
        }
      },
      audio: {
        tag: 'audio',
        type: 'audio/ogg',
        ext: '.ogg',
        gUM: {
          audio: true
        }
      }
    };
  media = mv.checked ? mediaOptions.video : mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
    stream = _stream;
    id('gUMArea').style.display = 'none';
    id('btns').style.display = 'inherit';
    start.removeAttribute('disabled');
    recorder = new MediaRecorder(stream);
    recorder.ondataavailable = e => {
      chunks.push(e.data);
      if (recorder.state == 'inactive') makeLink();
    };
    log('got media successfully');
  }).catch(log);
}

start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks = [];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}



function makeLink() {
  let blob = new Blob(chunks, {
      type: media.type
    }),
    url = URL.createObjectURL(blob),
    li = document.createElement('li'),
    mt = document.createElement(media.tag),
    hf = document.createElement('a');
  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.appendChild(li);
}
      button {
        margin: 10px 5px;
      }
      li {
        margin: 10px;
      }
      body {
        width: 90%;
        max-width: 960px;
        margin: 0px auto;
      }
      #btns {
        display: none;
      }
      h1 {
        margin-bottom: 100px;
      }
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h1> MediaRecorder API example</h1>

<p>For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
<div id='gUMArea'>
  <div>
    Record:
    <input type="radio" name="media" value="video" checked id='mediaVideo'>Video
    <input type="radio" name="media" value="audio">audio
  </div>
  <button class="btn btn-default" id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
  <button class="btn btn-default" id='start'>Start</button>
  <button class="btn btn-default" id='stop'>Stop</button>
</div>
<div>
  <ul class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


8
2018-04-22 02:29



ya, seperti yang Anda mengerti, MediaStreamRecorder saat ini tidak diimplementasikan.

MediaStreamRecorder adalah API WebRTC untuk merekam getUserMedia () stream. Ini memungkinkan aplikasi web untuk membuat file dari sesi audio / video langsung.

atau Anda dapat melakukan seperti ini http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia tetapi audio hilang sebagian.


7
2018-05-21 11:20



Kamu dapat memakai RecordRTC-bersama, yang didasarkan pada RecordRTC.

Ini mendukung perekaman video dan audio bersama dalam file terpisah. Anda akan membutuhkan alat seperti ffmpeg untuk menggabungkan dua file menjadi satu di server.


4
2017-11-10 16:26



Server Panggilan Web 4 dapat merekam audio dan video WebRTC ke wadah WebM. Rekaman ini dilakukan menggunakan Vorbis codec untuk audio dan VP8 codec untuk video. Codec WebRTC perdana adalah Opus atau G.711 dan VP8. Jadi, perekaman sisi server memerlukan Opus / G.711 untuk transcoding sisi server Vorbis atau transkode VP8-H.264 jika perlu menggunakan penampung lain, yaitu AVI.


0
2017-09-10 20:14



Sebagai catatan saya juga tidak memiliki pengetahuan yang cukup tentang hal ini,

Tapi saya menemukan ini di hub Git-

<!DOCTYPE html>
 <html>
<head>
  <title>XSockets.WebRTC Client example</title>
  <meta charset="utf-8" />


<style>
body {

  }
.localvideo {
position: absolute;
right: 10px;
top: 10px;
}

.localvideo video {
max-width: 240px;
width:100%;
margin-right:auto;
margin-left:auto;
border: 2px solid #333;

 }
 .remotevideos {
height:120px;
background:#dadada;
padding:10px; 
}

.remotevideos video{
max-height:120px;
float:left;
 }
</style>
</head>
<body>
<h1>XSockets.WebRTC Client example </h1>
<div class="localvideo">
    <video autoplay></video>
</div>

<h2>Remote videos</h2>
<div class="remotevideos">

</div>
<h2>Recordings  ( Click on your camera stream to start record)</h2>
<ul></ul>


<h2>Trace</h2>
<div id="immediate"></div>
<script src="XSockets.latest.js"></script>
<script src="adapter.js"></script>
<script src="bobBinder.js"></script>
<script src="xsocketWebRTC.js"></script>
<script>
    var $ = function (selector, el) {
        if (!el) el = document;
        return el.querySelector(selector);
    }
    var trace = function (what, obj) {
        var pre = document.createElement("pre");
        pre.textContent = JSON.stringify(what) + " - " + JSON.stringify(obj || "");
        $("#immediate").appendChild(pre);
    };
    var main = (function () {
        var broker;
        var rtc;
        trace("Ready");
        trace("Try connect the connectionBroker");
        var ws = new XSockets.WebSocket("wss://rtcplaygrouund.azurewebsites.net:443", ["connectionbroker"], {
            ctx: '23fbc61c-541a-4c0d-b46e-1a1f6473720a'
        });
        var onError = function (err) {
            trace("error", arguments);
        };
        var recordMediaStream = function (stream) {
            if ("MediaRecorder" in window === false) {
                trace("Recorder not started MediaRecorder not available in this browser. ");
                return;
            }
            var recorder = new XSockets.MediaRecorder(stream);
            recorder.start();
            trace("Recorder started.. ");
            recorder.oncompleted = function (blob, blobUrl) {
                trace("Recorder completed.. ");
                var li = document.createElement("li");
                var download = document.createElement("a");
                download.textContent = new Date();
                download.setAttribute("download", XSockets.Utils.randomString(8) + ".webm");
                download.setAttribute("href", blobUrl);
                li.appendChild(download);
                $("ul").appendChild(li);
            };
        };
        var addRemoteVideo = function (peerId, mediaStream) {
            var remoteVideo = document.createElement("video");
            remoteVideo.setAttribute("autoplay", "autoplay");
            remoteVideo.setAttribute("rel", peerId);
            attachMediaStream(remoteVideo, mediaStream);
            $(".remotevideos").appendChild(remoteVideo);
        };
        var onConnectionLost = function (remotePeer) {
            trace("onconnectionlost", arguments);
            var peerId = remotePeer.PeerId;
            var videoToRemove = $("video[rel='" + peerId + "']");
            $(".remotevideos").removeChild(videoToRemove);
        };
        var oncConnectionCreated = function () {
            console.log(arguments, rtc);
            trace("oncconnectioncreated", arguments);
        };
        var onGetUerMedia = function (stream) {
            trace("Successfully got some userMedia , hopefully a goat will appear..");
            rtc.connectToContext(); // connect to the current context?
        };
        var onRemoteStream = function (remotePeer) {
            addRemoteVideo(remotePeer.PeerId, remotePeer.stream);
            trace("Opps, we got a remote stream. lets see if its a goat..");
        };
        var onLocalStream = function (mediaStream) {
            trace("Got a localStream", mediaStream.id);
            attachMediaStream($(".localvideo video "), mediaStream);
            // if user click, video , call the recorder
            $(".localvideo video ").addEventListener("click", function () {
                recordMediaStream(rtc.getLocalStreams()[0]);
            });
        };
        var onContextCreated = function (ctx) {
            trace("RTC object created, and a context is created - ", ctx);
            rtc.getUserMedia(rtc.userMediaConstraints.hd(false), onGetUerMedia, onError);
        };
        var onOpen = function () {
            trace("Connected to the brokerController - 'connectionBroker'");
            rtc = new XSockets.WebRTC(this);
            rtc.onlocalstream = onLocalStream;
            rtc.oncontextcreated = onContextCreated;
            rtc.onconnectioncreated = oncConnectionCreated;
            rtc.onconnectionlost = onConnectionLost;
            rtc.onremotestream = onRemoteStream;
            rtc.onanswer = function (event) {
            };
            rtc.onoffer = function (event) {
            };
        };
        var onConnected = function () {
            trace("connection to the 'broker' server is established");
            trace("Try get the broker controller form server..");
            broker = ws.controller("connectionbroker");
            broker.onopen = onOpen;
        };
        ws.onconnected = onConnected;
    });
    document.addEventListener("DOMContentLoaded", main);
</script>

Pada Baris nomor 89 dalam kode kasus saya OnrecordComplete benar-benar menambahkan tautan file perekam, jika Anda akan mengklik tautan itu maka akan memulai pengunduhan, Anda dapat menyimpan jalur tersebut ke server Anda sebagai file.

Kode Rekaman terlihat seperti ini

recorder.oncompleted = function (blob, blobUrl) {
                trace("Recorder completed.. ");
                var li = document.createElement("li");
                var download = document.createElement("a");
                download.textContent = new Date();
                download.setAttribute("download", XSockets.Utils.randomString(8) + ".webm");
                download.setAttribute("href", blobUrl);
                li.appendChild(download);
                $("ul").appendChild(li);
            };

BlobUrl menahan jalan. Saya memecahkan masalah saya dengan ini, berharap seseorang akan menemukan ini berguna


0
2018-04-24 05:11