1
I have a question about my stream code with getusermedia.
I want to send my Node.js server a recording of my webcam.
My form receives a video I can upload, but it would have a second function -record a webcam video and send it saved as a form file.
So just to explain it better. My form file field should receive a recorded video file from webcam for uploading to server, as an upload alternative.
I will post here the html file and my script, my script is being played inside the html file as tag . The form in Node.js is already ready, I just really need to create the video with webcam.
If it is too complicated to send the record as a direct file to the form field file, it can be made available for download even and then the user inserts it in the form manually. The important thing is that this stream be saved somehow.
To explain the Record() function is invoked by triggering the webcam. After that I wanted a button with a "Start" to start recording from that point. After that, it can be a second button with "Stop" would end the recording and request the download or activate the sending of the file direct pro field file.
Ps. First time with the use of stream, so I’m still pretty slow on the subject.
Here are my lines so far:
<script type="text/javascript">
function Record(){
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var cameraStream = '';
if(navigator.getUserMedia){
navigator.getUserMedia({audio:true, video:true},
function(stream){
cameraStream = stream;
video.src = window.URL.createObjectURL(stream);},
function(){document.writeln("problema para acessar a camera!");});
}
else{
document.writeln("Recurso não suportado por seu navegador!");
}
}
</script><body>
<div class="cont fl">
<h1>Video Uploader | Recorder</h1>
<div class="fl form">
<form action="/resform" enctype="multipart/form-data" method="post">
<div>
<h1>Your Name:</h1>
<input type="text" class="inps" name="nome">
</div>
<div>
<h1>e-mail:</h1>
<input type="email" class="inps" name="email">
</div>
<div class="bt">
<div class="fr">
<input type="file" value="Upload" name="file" >
</div>
</div>
<hr style="width:90%;float:left;">
<input class="fl" type="submit" value="Confirm" name="sub">
</form>
</div>
<div class="form fr" style="width:300px">
<video autoplay width="280" height="160">
<canvas width="280" height="160">
</canvas></video>
<button onclick="drawVideoFrame()">Record</button>
<button onclick="stop()">Stop</button>
<button onclick="Record()">Turn On</button>
</div>
</div>