Hi there
As usual when making bigger projects I have a problem with simple thing. Basically for now I want to create simple video connection between 2 remote host via peerconnection, I have some codes that were on the web but looks like either I made some mistake either current syntax is different because the video is not playing at all.
Here's the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>WebRTC Demo using WebSockets</h1>
<video id="sourcevid" autoplay style="width: 200px; height: 150px; border: 1px solid black;"></video>
<button type="button" onclick="startVideo();">Start video</button>
<button type="button" onclick="stopVideo();">Stop video</button>
<video id="remotevid" autoplay style="width: 200px; height: 150px; border: 1px solid black;"></video>
<button type="button" onclick="connect();">Connect</button>
<button type="button" onclick="hangUp();">Hang Up</button>
<script>
var socket = new WebSocket('ws://localhost:1337/');
var sourcevid = document.getElementById('sourcevid');
var remotevid = document.getElementById('remotevid');
var localStream = null;
var peerConn = null;
var started = false;
var logg = function(s) { console.log(s); };
// when PeerConn is created, send setup data to peer via WebSocket
function onSignal(message) {
logg("Sending setup signal");
socket.send(message);
}
// when remote adds a stream, hand it on to the local video element
function onRemoteStreamAdded(event) {
logg("Added remote stream");
remotevid.src = window.webkitURL.createObjectURL(event.stream);
}
// when remote removes a stream, remove it from the local video element
function onRemoteStreamRemoved(event) {
logg("Remove remote stream");
remotevid.src = "";
}
function createPeerConnection() {
try {
logg("Creating peer connection");
peerConn = new webkitDeprecatedPeerConnection("STUN stun.l.google.com:19302", onSignal);
} catch (e) {
try {
peerConn = new webkitPeerConnection("STUN stun.l.google.com:19302", onSignal);
} catch (e) {
console.log("Failed to create PeerConnection, exception: " + e.message);
}
}
peerConn.addEventListener("addstream", onRemoteStreamAdded, false);
peerConn.addEventListener("removestream", onRemoteStreamRemoved, false)
}
// start the connection upon user request
function connect() {
if (!started && localStream) {
createPeerConnection();
logg('Adding local stream...');
peerConn.addStream(localStream);
started = true;
} else {
alert("Local stream not running yet.");
}
}
// accept connection request
socket.addEventListener("message", onMessage, false);
function onMessage(evt) {
logg("RECEIVED: "+evt.data);
if (!started) {
createPeerConnection();
logg('Adding local stream...');
peerConn.addStream(localStream);
started = true;
}
// Message returned from other side
logg('Processing signaling message...');
peerConn.processSignalingMessage(evt.data);
}
function hangUp() {
logg("Hang up.");
peerConn.close();
peerConn = null;
started = false;
}
var onFailSoHard = function(e) {
console.log('Reeeejected!', e);
};
function startVideo() {
hasGetUserMedia();
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('sourcevid');
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
}
function stopVideo() {
sourcevid.src = "";
}
function hasGetUserMedia() {
// Note: Opera is unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
// Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}
</script>
</body>
</html>
