I have a question regarding my stream code with getusermedia.
I want to send to my Node.js server a recording of my webcam.
My form receives a video that 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 the webcam for sending to the server as an alternative upload.
I'm going to post here the html file and my script, my script is being played inside the html file as a tag. The form in Node.js is ready, I just need to create the video with the webcam.
If it is too complicated to send the record as a direct file to the form's field file, it can be made available for download, and then the user inserts it into the form manually. The important thing is that this stream is saved in some way.
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 could be a second button with "Stop" would end the recording and request the download or would activate the sending of the file pro field file.
Ps. First time using stream, so I'm still pretty slow about it.
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>