Safari doesn't support MediaRecorder to listen to the stream from WebCam like the below code.
This works perfectly in Chrome and I'm able to convert the blob to a webm video file.
if(navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then (stream => {
videoRef.srcObject = stream
mediaRecorder.value = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp8,opus'})
mediaRecorder.value.addEventListener('dataavailable', function(e) {
blobs.push(e.data)
})
})
}
})
I need to save the video streamed from webcam in my server. What should be the approach to achieve the same in Safari?
I researched a lot, saw a similar question. But there was no proper solution given.
Could someone guide to a tutorial on how to achieve this using WebRTC if needed?
Related
what I am trying to accomplish is to have on my page audio and video file. And then send them through webrtc. I managed to do this with audio using web audio api like this.
HTML:
<audio id="audio">
<source src="../assets/outfoxing.mp3" />
</audio>
JS:
const audioElement = document.getElementById("audio");
const incomingSource = audioContext.createMediaElementSource(audioElement);
const outgoingStream = audioContext.createMediaStreamDestination();
incomingSource.connect(outgoingStream);
const outgoingTrack = outgoingStream.stream.getAudioTracks()[0];
audioElement.play();
await this.sendTransport.produce({ track: outgoingTrack });
For webrtc I am using mediasoup
Now I want to do the same with the video. But there is no such thing like web video api so I am stuck. How can I accomplish this task.
There are some limitations, but you could refer to this sample implementation.
It uses the captureStream() method.
I'm working on a project where i need to broadcast a live video on youtube, twitch , Facebook or other platforms from my website using HTML5 , rtmp , webrtc, nodejs....
so instead of going to youtube and start a live video, i want to start the video from my website
but im new to webrtc and live streaming and i don't know what to do or how to start this so please if anyone have any ideas or suggestions about how to do this please contact me or leave a comment here
this is what i did
SERVER SIDE (NodeJs)
io.on('connection', (socket) =>{
socket.on('stream', stream =>{
console.log(stream)
socket.broadcast.emit('stream', stream);
});
})
Client Side
Html (video.html)
<div id="videos">
<video id="video" autoplay>
</video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="js/video.js"></script>
Javascript (video.js)
var socket = io();
navigator.mediaDevices.getUserMedia({
video : true,
audio: true
})
.then(stream =>{
document.getElementById('video').srcObject = stream
socket.emit("stream", stream);
})
socket.on('stream', stream=>{
video = document.createElement("video")
video.srcObject = stream
video.setAttribute('autoplay')
document.getElementById("videos").appendChild(video)
})
You will need to do a WebRTC to RTMP bridge on your backend.
There are a lot of things to consider, but this is a common question so I threw together twitch. It is an example of doing this.
I am trying to add an option of camera switch in video call handled by KMS (Kurento media server) and I am digging throw a lot to their documentation and other sources but I find nothing useful
var options = {
localVideo: videoInput,
remoteVideo: videoOutput,
onicecandidate: onIceCandidate,
mediaConstraints: {
audio: isAudio || call_settings.isAudio,
video: isVideo || call_settings.isVideo
}
}
webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function (
this is my code which is connecting throw peer and all media permission is handled by kurento itself so that I am not able to change the source of media location.
and i am not sure how to do it with kurento any kind of help is appreciable thanks in advance
You can pass custom mediaConstraints to the options or create stream by yourself and send it as videoStream in the options and skip mediaConstraints as mentioned in kurento utils js docs.
For switching device / getting stream based on device, please refer below sample
https://webrtc.github.io/samples/src/content/devices/input-output/
You can refer below doc for videoStream usage
https://doc-kurento.readthedocs.io/en/stable/features/kurento_utils_js.html
When i start my webcam in WebRTC, sound is going to loop and very tiny voice starting.
navigator.getUserMedia({audio: true, video: true}, function(stream){
window.localStream = stream;
stream.getAudioTracks()[0].enabled = false;
stream.getVideoTracks()[0].enabled = true;
$('#my-video').prop('src', URL.createObjectURL(stream));
}
This solution is disabling all audio. I just want to mute only "stream" audio not window.localSream so send audio remote.
Not quite sure what you mean by "sound is going to loop and very tiny voice starting". Do you mean the voice is too low and you hear echoing?
In your code, the audio track is still in your localStream, but just not rendered by disabling it, so the other end user will not hear any voice from you, you can also turn it on on fly but enable it, and your voice will be heard again.
To not include audio at all, you will have to set your constraints like {audio: false, video: true}
I'm starting with webRTC and am trying to access to my camera, however, the code doesn't work, although there is no mistakes in it.
The code is:
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia
|| navigator.msGetUserMedia);
if (navigator.getUserMedia){
var constrains ={video:true};
function successCallback(localMediaStream){
var video = document.querySelector("video");
window.stream = localMediaStream;
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata =function(e){
video.play();
}
}
function errorCallback(error){
console.log("Error: ",error);
}
navigator.getUserMedia(constrains,successCallback,errorCallback);
}else{
alert('Sorry, the browser you are using doesn\'t support getUserMedia');
}
Can you help me please?
i am guessing that the code above is put in a html file and accessed directly by clicking on file( and url being like file:///...), this way would work in firefox, but not in chrome, for camera capture to work on chrome, you need to host the file in some server.
also, on an unrelated note, you can replace
video.onloadedmetadata =function(e){
video.play();
}
with simply
video.play();
Its not obvious whether you have a valid HTML5 video element to set the stream on. If you do, you can use the developer tools to verify the stream has been set on the source.
If you have a web server on your development machine, you can host your code that way, and view it 'locally'.