هدف webrtc این هست که ارتباطی آسان و فراگیر بین تمام دستگاه ها از قبیل تلوزیون، رایانه، موبایل و... را فراهم کنید. Webrtc یه سری توابع استاندارد خودش را به این منظور در اختیار توسعه دهنده قرار میدهد. اکنون webrtc بروی مرورگر های Google Chrome،  Opera و  Firefox در دسترس توسعه دهندگان است و سایت های زیادی وجود دارند که با استفاده از آن امکان ارتباط های متنی، صوتی و تصویری را فراهم کرده اند.

با آمدن html5 دسترسی های بسیاز کاربردی ای به سخت افزار رایانه برای مرورگر ها فراهم شد. از قبیل دسترسی به موقعیت، کارت حافظه، وب کم و... در این مبحث ما به ارتباط مرورگر با دوربین و میکروفون کاربر (چه سیستم و چه موبایل) می پردازیم که برای آغاز به کار نیاز است که با تابع getUserMedia آشنا شویم.

 

آشنایی با getUserMedia

Webrtc امکان ضبط صوت و تصویر و ارسال ان را بر عهده دارد که تنظیمات آن تسط گروه w3c استاندارد سازی شده است. Google، Opera، Mozilla و تعدادی دیگر از شرکت ها آن را پیاده سازی کرده اند.

تابع getUserMedia قابلیت دسترسی به api های webrtc را فراهم می کند و به این صورت است که امکان استفاده از webrtc برای ارتباط با سخت افزار های صوتی و تصویری فراهم میشود.

شروع به کار

بررسی کنیم که آیا در مرورگر جاری قابلیت getUserMedia در دسترس هست یا نه:

function hasGetUserMedia() {

  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||

            navigator.mozGetUserMedia || navigator.msGetUserMedia);

}

if (hasGetUserMedia()) {

  // Good to go!

} else {

  alert('getUserMedia() is not supported in your browser');

}

سپس نسبت به استفاده از این تابع اقدام میکنیم. نخست باید مجوز دسترسی را تعیین کنیم. یعنی مشخص کنیم که فقط تصویر ( (video: true ، فقط صوت( (audio: true و یا هر (video: true, audio: true) را میخواهیم. سپس یک تابع برای اینکه اگر مجوز داده شد اجرا شود و یک تابع برای اینکه اگر مجوز داده نشد انفاق بیفتد. هنگام اجرای تابع در مرورگر کاربر پیامی نمایش داده میشود که آیا میخواهید مجوز دسترسی بدهید یا نه؟

var errorCallback = function(e) {};
var successCallback = function(localMediaStream) {};
navigator.getUserMedia({video: true, audio: true}, successCallback, errorCallback);

حالا یک مثال تکمیل تر میزنیم که در آن یک تگ video تعیین میکنیم که در صورت در دسترس بودن تابع و در صورت مجوز دادن تگ video را به دوربین و میکروفون وصل کند و نمایش بدهد:



function hasGetUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
var errorCallback = function(e) {
console.log('Reeeejected!', e);
};
if (hasGetUserMedia()) {
// Not showing vendor prefixes.
navigator.webkitGetUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Ready to go. Do some stuff.
};
}, errorCallback);
} else {
alert('getUserMedia() is not supported in your browser');
}

این مثال فقط در مرورگر گوگل کروم قابل اجراست چون از تابع navigator.webkitGetUserMedia استفاده شده، برای اجرای این کد بروی سایر مرورگر ها میتوانید از تابع مخصوص همان مرورگر استفاده کنید: فهرست توابع برای مرورگر های گوناگون:

navigator.getUserMedia , navigator.webkitGetUserMedia , navigator.mozGetUserMedia , navigator.msGetUserMedia

اما در اینجا مشکلی وجود دارد و آن اینکه، کار مشکلی هست برای تمام مرورگر ها کد های گوناگونی بنویسیم. برای رفع این مشکل باید ابتدا مرورگر را تشخیص دهیم، تابع مخصوص آن را به عنوان تابع پیش فرض قرار دهیم:

navigator.getUserMedia  = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia(…);

بحث بعدی که باید به آن بپردازیم محدودیت طول، عرض و رزولوشن تصویر هست. برای اینکار به پارامتر اول تابع getUserMedia مراجعه میکنیم:

video: {
mandatory: {
maxWidth: 640,
maxHeight: 360
}
}

با تغییر این مشخصات ویژگی های تصویر را تغییر میدهیم.

مبحث بعدی این است که فرض کنیم دستگاه کاربر شامل چند منبع صوتی و تصویری باشد و ما بخواهیم یکی از آنها را انتخاب کنیم. برای اینکار ابتدا فهرست منابع را با استفاده از تابع MediaStreamTrack.getSources() بدست می آوریم و سپس با مقداردهی پارامتر اول تابع getUserMedia منبع مورد نظر را انتخاب میکنیم. در مثال زیر آخرین منابع سخت افزاری صوتی و تصویری دستگاه انتخاب میشود:

MediaStreamTrack.getSources(function(sourceInfos) {
var audioSource = null;
var videoSource = null;

for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
if (sourceInfo.kind === 'audio') {
console.log(sourceInfo.id, sourceInfo.label || 'microphone');

audioSource = sourceInfo.id;
} else if (sourceInfo.kind === 'video') {
console.log(sourceInfo.id, sourceInfo.label || 'camera');

videoSource = sourceInfo.id;
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}

sourceSelected(audioSource, videoSource);
});

function sourceSelected(audioSource, videoSource) {
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};

navigator.getUserMedia(constraints, successCallback, errorCallback);
}

فرض کنیم در صورت بروز هرگونه مشکل میخواهیم یه تصویر پیش فرض پخش کنیم، برای اینکار در متد خطا میتوانیم آدرس یک فایل تصویری را به ویژگی src تگ video بدهیم. قابلیت های گوناگون عکس گرفتن از فریم جاری ویدئو، افکت گذاری روی تصویر، ضبط صدا و... نیز در دسترس است که با یک جست و جو میتوانید نمونه کدهای آن را پیدا کنید.

ادامه دارد...

در ادامه به معرفی فریم ورک های پیشرفته در این زمینه و مفاهیم شبکه ای مفید برای ایجاد ارتباطات صوتی تصویری خواهیم پرداخت

 

https://pars-mc.com/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-webrtc-web-real-time-communications/