dagingaa/getusermedia.html

## getusermedia.html
<!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>

## rtcpeerconnection.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>
	<!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>