so I am trying to create a webcam type functionality where users can click record right in the browser and then record a video and then either download or upload it.
It is modelled on the site at https://www.tellamericaitsgreat.com/
So far I have code that will use the webcam and show the video as HTML5 video on the screen but it doesn't record (it just plays and pauses on the screen) or download/upload.
This has to be done in React. I am trying to use https://github.com/muaz-khan/RecordRTC
My code right now for the video is:
import React, { Component } from 'react';
import './Record.css';
class Record extends Component {
render() {
var RecordRTC = require('recordrtc');
function successCallback(stream){
var vid = document.querySelector('video');
vid.src = URL.createObjectURL(stream);
vid.muted = true;
var recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
setTimeout(function(){
recorder.stopRecording(function(){
var blob = recorder.blob;
var url = URL.createObjectURL(blob);
vid.src = url;
vid.muted = false;
});
}, 5 * 1000);
}
function errorCallback(error){
alert(error);
}
var mediaConstraints = {video: true, audio: true};
navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
return (
<video controls autoplay id="video"></video>
);
}
}
export default Record;
Related
I have a simple application that takes camera input, converts it to a canvas (where the stream can be manipulated) and then returns the manipulated stream back via captureStream. However, it seems like the stream isn't returning anything as the output video is black.
Can someone point out where I went wrong here?
The copy below can be copy/pasted and run.
<html>
<head></head>
<body>
<video id="video-id" playsinline autoplay></video>
</body>
<script type="application/javascript">
const video = document.getElementById('video-id');
function manipulatedVideoStream(stream) {
const temp_video = document.createElement('video');
const temp_canvas = document.createElement('canvas');
temp_video.srcObject = stream;
const framerate = 1000 / 30; // ~30 fps
setInterval(() => {
temp_canvas.width = temp_video.videoWidth;
temp_canvas.height = temp_video.videoHeight;
const context = temp_canvas.getContext('2d');
context.drawImage(temp_video, 0, 0, temp_video.width, temp_video.height);
// draw some stuff in here
}, framerate);
return temp_canvas.captureStream(framerate);
}
const constraints = {
audio: false,
video: true
};
function handleSuccess(stream) {
video.srcObject = manipulatedVideoStream(stream);
}
function handleError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
</script>
</html>
The temp_video needs to be set on autoplay.
temp_video.autoplay = true;
I'm trying to do something like this.
But I don't know why I'm not getting this thing work.
Here it is the codepen example:
$('input').on('change', function(e) {
var file = e.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function(e) {
$('audio source').attr('src', e.target.result);
}
reader.readAsDataURL(file);
});
The source tag is receiving the base64 mp3 file, but it doesn't load the file into browser.
You set the src attr directly on the audio element. fiddle
var $audio = $('#myAudio');
$('input').on('change', function(e) {
var target = e.currentTarget;
var file = target.files[0];
var reader = new FileReader();
console.log($audio[0]);
if (target.files && file) {
var reader = new FileReader();
reader.onload = function (e) {
$audio.attr('src', e.target.result);
$audio.play();
}
reader.readAsDataURL(file);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file">
<audio controls id="myAudio" autoplay></audio>
<audio controls>
<source src="yoraudio.ogg" type="audio/ogg">
<source src="youraudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
For more help visit
This is the simplest way to play audio
In UWP you can play a file directly that you can get by name from the Music Library as shown below. Just get permission to access the Music Library by checking the library in the "Capabilities" tag of your project properties.
picksinglefile();
var l = Windows.Storage.KnownFolders.musicLibrary;
var f = localStorage.getItem("alarmname").toString();
l.getFileAsync(f).then(function (file) {
// storagefile file is available
var s = window.URL.createObjectURL(file); // its a storage file, so create URL
player1.setAttribute("src", s);
player1.play(); // if autoplay is false or off
});
function picksinglefile() {
// Create the picker object and set options
var fop = new Windows.Storage.Pickers.FileOpenPicker();
fop.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary;
fop.fileTypeFilter.replaceAll([".mp3", ".wav"]);
fop.pickSingleFileAsync().then(function (file) {
if (file) {
localStorage.setItem("alarmname", file.name.toString());
} else {
alert("Operation Cancelled");
}
});
Audio is being heard even though no audio element seems to be put inserted in the DOM.
Scenario:
Create PeerConnection without streams
Add a stream but disable the code that adds MediaElements (audio,video) to DOM
Issue:
After the stream gets across, audio can be heard from headphones (or speakers).
What should happen:
Since I'm not attaching anything to the dom I expect no audio to be heard.
Code for replicating the scenario
// <body>
// <script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
// <button id="start">Start!</button>
// </body>
$('#start').click(function() {
var NO_MEDIA_SESSION = {video: false, audio: false, oneway: true};
var caller = new RTCMultiConnection('lets-try');
caller.session = NO_MEDIA_SESSION;
caller.dontAttachStream = true;
caller.onstream = function() { console.log("Got stream but not attaching") };
var receiver = new RTCMultiConnection('lets-try');
receiver.session = NO_MEDIA_SESSION;
receiver.dontAttachStream = true;
receiver.onstream = function() { console.log("Got stream but not attaching") };
caller.open();
receiver.connect();
receiver.onconnected = function() {
console.log("Connected!");
caller.addStream({audio: true});
}
});
I'm interested how is it possible to hear MediaStream without there being audio DOM element?
If any RTCMultiConnection specialists answering, then maybe point me how to avoid audio stream being made audible? (I want to get the stream and attach it later myself).
RTCMultiConnection creates mediaElement on the fly to make sure onstream event is fired only when media stream started flowing.
connection.onstream = function(event) {
event.mediaElement.pause(); // or volume=0
// or
event.mediaElement = null;
// or
delete event.mediaElement;
};
Updated:
Use following snippet:
var connection = new RTCMultiConnection();
connection.session = {
data: true
};
btnOpenRoom.onclick = function() {
connection.open('roomid');
};
btnJoinRoom.onclick = function() {
connection.join('roomid');
};
btnAddAudioStream.onclick = function() {
connection.addStream({
audio: true
});
};
btnAddAudioVideoStream.onclick = function() {
connection.addStream({
audio: true,
video: true
});
};
all
I'm in peer to peer communication using webRTC , we have media stream object from the getUserMedia which is given as input stream to peerconnection. Here I need video stream from the selected video file from the local drive which is playing using Video element of HTML5.
Is it possible to create mediastream object from the video tag?
thanks,
suri
For now you can't add a media stream from a video tag, but it should be possible in the future, as it is explained on MDN
MediaStream objects have a single input and a single output. A MediaStream object generated by getUserMedia() is called local, and has as its source input one of the user's cameras or microphones. A non-local MediaStream may be representing to a media element, like or , a stream originating over the network, and obtained via the WebRTC PeerConnection API, or a stream created using the Web Audio API MediaStreamAudioSourceNode.
But you can use Media Source Extensions API to do what yo want : you have to put the local file into a stream and append in in a MediaSource object. You can learn more about MSE here : http://www.w3.org/TR/media-source/
And you can find a demo and source of the method above here
2021 update: It is now possible using MediaRecorder interface: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
Example from same page:
if (navigator.mediaDevices) {
console.log('getUserMedia supported.');
var constraints = { audio: true };
var chunks = [];
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var mediaRecorder = new MediaRecorder(stream);
visualize(stream);
record.onclick = function() {
mediaRecorder.start();
console.log(mediaRecorder.state);
console.log("recorder started");
record.style.background = "red";
record.style.color = "black";
}
stop.onclick = function() {
mediaRecorder.stop();
console.log(mediaRecorder.state);
console.log("recorder stopped");
record.style.background = "";
record.style.color = "";
}
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
var clipName = prompt('Enter a name for your sound clip');
var clipContainer = document.createElement('article');
var clipLabel = document.createElement('p');
var audio = document.createElement('audio');
var deleteButton = document.createElement('button');
clipContainer.classList.add('clip');
audio.setAttribute('controls', '');
deleteButton.innerHTML = "Delete";
clipLabel.innerHTML = clipName;
clipContainer.appendChild(audio);
clipContainer.appendChild(clipLabel);
clipContainer.appendChild(deleteButton);
soundClips.appendChild(clipContainer);
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
chunks = [];
var audioURL = URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
deleteButton.onclick = function(e) {
evtTgt = e.target;
evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
}
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
})
.catch(function(err) {
console.log('The following error occurred: ' + err);
})
}
MDN also has a detailed mini tutorial: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element
I'm trying to make a menu with sound after user clicks it. It works well in Chrome, safari, and even IE, but not Mozilla Firefox. I use mp3 file for the sound which can't run on firefox. Here's the code
function loadSound (src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
sound.play = function () {
this.src = src;
this.volume = 0;
}
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
$(document).ready(function () {
var sound = loadSound("<?=base_url()?>sound/testing.mp3"); // preload
$(".main_nav a").click(function(){
var ids = $(this).attr("id").split("-");
var url = ids[2];
sound.play();
setTimeout (function(){window.location = url;}, 2000);
return false;
});
});
What type of audio file works in firefox? How do I change the source file when a user use firefox?
Ok, I understand your problem and I have a solution.
You could use this function that I make:
function getSupportedAudio(){
var testEl = document.createElement( "audio" ), mp3, ogg;
if ( testEl.canPlayType ) {
mp3 = "" !== testEl.canPlayType( 'audio/mpeg;' );
ogg = "" !== testEl.canPlayType( 'audio/ogg' );
}
if(mp3){
return ".mp3";
}
else{
return ".ogg";
}
}
In your function loadSound(src) use this:
sound.src = src+getSupportedAudio();
document.body.appendChild(sound);
And when you call the loadSound function, don't send the audio format in the parameter (but you need to have both files, ogg and mp3, in the same folder and with the same name):
var sound = loadSound("<?=base_url()?>sound/testing"); // preload