किसी को भी एक WebRTC/getUserMedia API स्क्रिप्ट है कि दो उपयोगकर्ताओं को एक वेब कैमरा के साथ एक दूसरे से कनेक्ट होने के लिए संभव है के लिए एक अच्छा ट्यूटोरियल पता है?ट्यूटोरियल WebRTC/getUserMedia API के लिए - कई कैम
एक उचित उदाहरण चैट होना चाहिए, केवल यह है कि बड़ा होने की जरूरत नहीं है। और इसे स्थानीयहोस्ट पर बनाना संभव होना चाहिए।
आशा है कि कोई भी मेरी मदद कर सकता है!
आप एक चैट के exampke यहाँ https://github.com/twelephone/rtcroulette
Signalling server के साथ इस एक https://simpl.info/getusermedia/sources/
उपयोग SimpleWebRTC पर कई कैमरे एक बार देख ले उपयोग करने के लिए अपने लक्ष्य को प्राप्त करने के लिए है। main site
आपको सिग्नलिंग सर्वर चलाने के लिए नोडजेज़ की आवश्यकता होगी या आप परीक्षण प्रयोजनों के लिए simplewebrtc signalling server का उपयोग कर सकते हैं।
स्क्रीनशेयरिंग हालांकि HTTPS पर ही काम करता है।
कार्य DEMO
<!DOCTYPE html>
<html>
<head>
<title>SimpleWebRTC Demo</title>
</head>
<body>
<h1 id="title">Start a room</h1>
<style>
.videoContainer {
position: relative;
width: 200px;
height: 150px;
}
.videoContainer video {
position: absolute;
width: 100%;
height: 100%;
}
.volume_bar {
position: absolute;
width: 5px;
height: 0px;
right: 0px;
bottom: 0px;
background-color: #12acef;
}
#localScreenContainer {
display: none;
}
</style>
<button id="screenShareButton"></button>
<p id="subTitle">(https required for screensaring to work)</p>
<form id="createRoom">
<input id="sessionInput"/>
<button type="submit">Create it!</button>
</form>
<div class="videoContainer">
<video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
<div id="localVolume" class="volume_bar"></div>
</div>
<div id="localScreenContainer" class="videoContainer">
</div>
<div id="remotes"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="latest.js"></script>
<script>
// grab the room from the URL
var room = location.search && location.search.split('?')[1];
// create our webrtc connection
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: '',
// immediately ask for camera access
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false
});
// when it's ready, join if we got a room from the URL
webrtc.on('readyToCall', function() {
// you can name it anything
if (room) webrtc.joinRoom(room);
});
function showVolume(el, volume) {
if (!el) return;
if (volume < -45) { // vary between -45 and -20
el.style.height = '0px';
} else if (volume > -20) {
el.style.height = '100%';
} else {
el.style.height = '' + Math.floor((volume + 100) * 100/25 - 220) + '%';
}
}
webrtc.on('channelMessage', function (peer, label, data) {
if (data.type == 'volume') {
showVolume(document.getElementById('volume_' + peer.id), data.volume);
}
});
webrtc.on('localScreenAdded', function (video) {
console.log('localScreenAdded', video);
video.onclick = function() {
video.style.width = video.videoWidth + 'px';
video.style.height = video.videoHeight + 'px';
};
document.getElementById('localScreenContainer').appendChild(video);
$('#localScreenContainer').show();
});
webrtc.on('localScreenRemoved', function (video) {
console.log('localScreenRemoved', video);
document.getElementById('localScreenContainer').removeChild(video);
$('#localScreenContainer').hide();
});
webrtc.on('videoAdded', function (video, peer) {
console.log('video added', peer);
var remotes = document.getElementById('remotes');
if (remotes) {
var d = document.createElement('div');
d.className = 'videoContainer';
d.id = 'container_' + webrtc.getDomId(peer);
d.appendChild(video);
var vol = document.createElement('div');
vol.id = 'volume_' + peer.id;
vol.className = 'volume_bar';
video.onclick = function() {
video.style.width = video.videoWidth + 'px';
video.style.height = video.videoHeight + 'px';
};
d.appendChild(vol);
remotes.appendChild(d);
}
});
webrtc.on('videoRemoved', function (video, peer) {
console.log('video removed ', peer);
var remotes = document.getElementById('remotes');
var el = document.getElementById('container_' + webrtc.getDomId(peer));
if (remotes && el) {
remotes.removeChild(el);
}
});
webrtc.on('volumeChange', function (volume, treshold) {
//console.log('own volume', volume);
showVolume(document.getElementById('localVolume'), volume);
});
// Since we use this twice we put it here
function setRoom(name) {
$('form').remove();
$('h1').text(name);
$('#subTitle').text('Link to join: ' + location.href);
$('body').addClass('active');
}
if (room) {
setRoom(room);
} else {
$('form').submit(function() {
var val = $('#sessionInput').val().toLowerCase().replace(/\s/g, '-').replace(/[^A-Za-z0-9_\-]/g, '');
webrtc.createRoom(val, function (err, name) {
console.log(' create room cb', arguments);
var newUrl = location.pathname + '?' + name;
if (!err) {
history.replaceState({foo: 'bar'}, null, newUrl);
setRoom(name);
} else {
console.log(err);
}
});
return false;
});
}
var button = $('#screenShareButton'),
setButton = function (bool) {
button.text(bool ? 'share screen' : 'stop sharing');
};
webrtc.on('localScreenRemoved', function() {
setButton(true);
});
setButton(true);
button.click(function() {
if (webrtc.getLocalScreen()) {
webrtc.stopScreenShare();
setButton(true);
} else {
webrtc.shareScreen(function (err) {
if (err) {
setButton(true);
} else {
setButton(false);
}
});
}
});
</script>
</body>
</html>
मैं a longer WebRTC tutorial जो आपके बहुत ही सरल, Videoapplication बनाने के लिए सभी आवश्यक कदम, संकेतन सहित में आपका मार्गदर्शन लिखा है। लंबाई से चौंक जाएंगे, मैंने इसमें बहुत सारे कोड उदाहरण दिए हैं। साथ ही, जिस साइट पर @bwtrent पहले से ही उल्लेख किया गया है, वह मुझे बहुत मदद करता है।
+1 यह अच्छा जवाब है और मेरे लिए काम किया – Muath