webrtc WebRTC simple examples Get camera and microphone permission and display preview on webpage
Example
In order to begin using WebRTC you need to get camera and microphone permission.For that you need following things:
adapter.js, you can get it from here- A html webpage with a video tag and little bit of js code
The adapter.js is a JavaScript shim for WebRTC, maintained by Google with help from the WebRTC community, that abstracts vendor prefixes, browser differences and spec changes.
Now once you have this file, create a html file with following code:
<!DOCTYPE html>
<html>
<head>
<title>My first webrtc example</title>
<script src="adapter.js"></script>
<script type="text/javascript">
function gotStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
// Create an AudioNode from the stream
var mediaStreamSource = audioContext.createMediaStreamSource(stream);
// Connect it to destination to hear yourself
// or any other node for processing!
mediaStreamSource.connect(audioContext.destination);
var video = document.querySelector('video');
var videoTracks = stream.getVideoTracks();
window.stream = stream; // make variable available to browser console
video.srcObject = stream;
}
function onfail(error) {
console.log("permission not granted or system don't have media devices."+error.name);
}
navigator.getUserMedia({audio:true,video:true}, gotStream,onfail);
</script>
</head>
<body>
Welcome to webrtc
<video id="local" autoplay=""></video>
</body>
</html>
Once done, save this file and run in the browser. When you run the browser will ask you to allow this webpage to access your webcam and microphone. Allow it and whola!, you will see the preview on the webpage.
