I have list of camera i want to streaming from this list , what i want to do is when i click on camera 1 then it display video in camera one and if i click on camera 2 then it display video in camera 2 ...
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Victor Stan">
<meta name="description" content="Get multiple video streams on one page. Adapted from code by Muaz Khan">
<title>Video Camera</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<style type="text/css" media="screen">
video {
border:1px solid gray;
}
</style>
<script>
var hash = window.location.hash.replace('#', '');
if (!hash.length) location.href = location.href + '#meeting-roomid-' + ((Math.random() * new Date().getTime()).toString(36).toLowerCase().replace(/\./g, '-'));
</script>
<style>
html { background: #eee; }
body {
font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 1.2em;
line-height: 1.2em;
margin: 0;
}
body {
background: #fff;
border: 1px solid;
border-color: #ddd #aaa #aaa #ddd;
border-radius: 5px;
margin: .5em auto 0 auto;
padding: .8em;
padding-top: 0;
}
h1, h2 {
border-bottom: 1px solid black;
display: inline;
font-weight: normal;
line-height: 36px;
padding: 0 0 3px 0;
}
h1 {
background: rgb(238, 238, 238);
border-bottom-width: 2px;
display: block;
margin-top: 0;
padding: .3em;
text-align: center;
}
:-moz-any-link:focus {
border: 0;
color: #000;
}
::selection { background: #ccc; }
::-moz-selection { background: #ccc; }
button {
-moz-border-radius: 3px;
-moz-transition: none;
-webkit-transition: none;
background: #0370ea;
background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
border: 1px solid #076bd2;
border-radius: 3px;
color: #fff;
display: inline-block;
font-family: inherit;
font-size: .8em;
line-height: 1.3;
padding: 5px 12px;
text-align: center;
text-shadow: 1px 1px 1px #076bd2;
}
button:hover { background: rgb(9, 147, 240); }
button:active { background: rgb(10, 118, 190); }
button[disabled] {
background: none;
border: 1px solid rgb(187, 181, 181);
color: gray;
text-shadow: none;
}
#remote-media-streams video { width: 10em; }
#local-media-stream video { width: 34em; }
video {
width: 250px;
}
footer { text-align: center; }
code {
color: rgb(204, 14, 14);
font-family: inherit;
}
audio, video { vertical-align: bottom; }
pre {
border-left: 2px solid red;
margin-left: 2em;
padding-left: 1em;
}
</style>
<script src="https://www.webrtc-experiment.com/firebase.js"></script>
<script src="https://www.webrtc-experiment.com/one-to-many-video-broadcasting/meeting.js"> </script>
</head>
<body>
<section>
<h2>Setup a new meeting:</h2>
<button id="setup-new-meeting">Setup New Meeting</button>
</section>
<table style="border-left: 1px solid black; width: 100%;">
<tr>
<td>
<h2 style="display: block; text-align: center;">
Local Media Stream</h2>
<section id="local-media-stream"></section>
</td>
</tr>
<tr>
<td>
<h2 style="display: block; text-align: center;">
Remote Media Streams</h2>
<section id="remote-media-streams"></section>
</td>
</tr>
</table>
<script>
var hash = window.location.hash.replace('#', '');
var meeting = new Meeting(hash);
var remoteMediaStreams = document.getElementById('remote-media-streams');
var localMediaStream = document.getElementById('local-media-stream');
// on getting media stream
meeting.onaddstream = function(e) {
if (e.type == 'local') localMediaStream.appendChild(e.video);
if (e.type == 'remote') remoteMediaStreams.insertBefore(e.video, remoteMediaStreams.firstChild);
};
// using firebase for signaling
meeting.firebase = 'rtcweb';
// if someone leaves; just remove his video
meeting.onuserleft = function(userid) {
var video = document.getElementById(userid);
if (video) video.parentNode.removeChild(video);
};
// check pre-created meeting rooms
meeting.check();
document.getElementById('setup-new-meeting').onclick = function() {
// setup new meeting room
meeting.setup('meeting room name');
this.disabled = true;
this.parentNode.innerHTML = '<h2><a href="' + location.href + '" target="_blank">Share this link</a></h2>';
};
</script>
<script>
if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';
var videoSources = [];
MediaStreamTrack.getSources(function(media_sources) {
console.log('Media source :'+media_sources);
media_sources.forEach(function(media_source){
if (media_source.kind === 'video') {
videoSources.push(media_source);
}
});
getMediaSource(videoSources);
});
var get_and_show_media = function(id)
{
var constraints = {};
constraints.video = {
optional: [{ sourceId: id}]
};
navigator.webkitGetUserMedia(constraints, function(stream)
{
// console.log('stream :'+stream);
var mediaElement = $('video');
if(mediaElement.length ==0) {
mediaElement = document.createElement('video');
mediaElement.controls = true;
mediaElement.autoplay = true;
mediaElement.src = window.URL.createObjectURL(stream);
console.log('mediaElement.src :'+mediaElement.src);
//document.body.appendChild(mediaElement);
localMediaStream.appendChild(mediaElement);
}
else
{
mediaElement.attr('src', window.URL.createObjectURL(stream));
mediaElement.attr('autoplay', true);
mediaElement.load();
// console.log('mediaElement.src123 :'+window.URL.createObjectURL(stream));
}
}, function (e)
{
document.body.appendChild(document.createElement('hr'));
var strong = document.createElement('strong');
strong.innerHTML = JSON.stringify(e);
document.body.appendChild(strong);
});
};
var i=1;
var getMediaSource = function(media) {
media.forEach(function(media_source) {
if (!media_source) return;
if (media_source.kind === 'video')
{
var button = $('<input/>', {id: media_source.id, value:'camera '+(i++), type:'submit'});
$("body").append(button);
$(document).on("click", "#"+media_source.id, function(e){
get_and_show_media(media_source.id);
meeting.setup('meeting room name');
});
}
});
}
</script>
</body>
</html>
panchotiya
commented
10 years ago
I have list of camera i want to streaming from this list , what i want to do is when i click on camera 1 then it display video in camera one and if i click on camera 2 then it display video in camera 2 ...