Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example files for Abakus course
<!DOCTYPE html>
<html>
<head><title>getUserMedia</title></head>
<body>
<video autoplay></video>
<canvas></canvas>
<button>Click me</button>
<img src="" alt="captured image from webcam">
<script>
// Normalize getUserMedia cross-browser. Does not handle lacking support in browser.
// For production use, please see https://github.com/HenrikJoreteg/getUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// Fetch the elements so you don't have to! How nice of me.
var video = document.querySelector("video");
var canvas = document.querySelector("canvas");
var image = document.querySelector("img");
// You are ready to play!
// Your assignment is to get webcam and audio to show in the video
// element.
// Then, if you are done with that, get that video stream to the
// canvas, and take a photo which you show on the page.
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>getUserMedia</title></head>
<body>
<video id="peer1" autoplay></video>
<video id="peer2" autoplay></video>
<script>
// Normalize getUserMedia cross-browser. Does not handle lacking support in browser.
// For production use, please see https://github.com/HenrikJoreteg/getUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection
window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;
// Fetch the elements so you don't have to! How nice of me.
var callerVideo = document.getElementById("peer1");
var calleeVideo = document.getElementById("peer2");
// create a boilerplate error "handler"
function err(err) {
console.log(err);
}
// Create our RTCPeerConnection objects
var caller = new RTCPeerConnection(null);
var callee = new RTCPeerConnection(null);
// You are ready to play
// Your assignment is to send the callerVideo to the calleeVideo frame, using RTCPeerConnection to transfer the media
// This can be done entierly in the same tab by using variables and functions to do signalling
// Alternatively, for something easier, play with SimpleWebRTC: http://simplewebrtc.com/
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.