12
تشکر

ضبط صدا و ویدئو در HTML5

WebRTC

WebRTC

مقدمه

ضبط صدا و ویدئو همیشه به عنوان یک کار سخت در توسعه وب شناخته شده است. برای سالهای زیادی برای اینکار به پلاگین هایی مانند Flash و Silverlight وابسته بودیم.

ولی HTML5 برای نجات آمده است. در واقع HTML5 کاری کرده است که میتوان به سخت افزار کاربر دسترسی پیدا کرد. ابزارهای GeoLocation, Orientaion API, WebGL و Web Audio API نمونه های خوبی هستند. این ابزارها به طور باور نکردنی خیلی قدرتمند هستند که با استفاده از APIهای سطح بالای JavaScript میتوان به سطوح زیرین سخت افزار کاربر دسترسی پیدا کرد.

در این آموزش مقدمه ای بر API جدید navigator.getUserMedia() که این اجازه را میدهد به میکروفون و دوربین کاربر دسترسی داشته باشیم.

getUserMedia

انواع متفاوتی از APIها برای انجام اینکار در چند سال گذشته بوجود آمدند. کارها به درستی پیش نمی رفتند که بالاخره بنیاد W3C تصمیم گرفت گروهی را برای این کار در نظر بگیرد. که تلاش این گروه باعث ایجاد یک ابزار یکپارچه شد که مروگرها هم از آن شروع به پشتیبانی خواهند کرد.

WebRTC

یک راه حل بسیار مناسب بوجود آمد که بخشی از یک سیستم بزرگتر به نام WebRTC یا Web Real Time Communications between browser است. گوگل, اپرا و موزیلا و گروه های دیگر در حال اضافه کردن پشتیبانی از این تکنولوژی هستند.

در حال حاظر نسخه استیبل گوگل کروم و نسخه آخر فایرفاکس شبانه از این تکنولوژی پشتیبانی میکنند.

شروع کار

با استفاده از navigator.getUserMedia میتوان از ورودی های وبکم و میکروفون بدون دخالت هیچ پلاگینی استفاده کرد.

تشخیص پشتیبانی

با استفاده از کد زیر میتوانیم بفهمیم که آیا مرورگر کاربر از navigator.getUserMedia پشتیبانی میکند یا خیر؟

function hasGetUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
               navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  //ok. let`s go
} else {
  alert('Your Browser no supported getUserMedia. Please update!!')
}

در تابع hasGetUserMedia مرورگر اپرا چک نشده است زیرا این مرورگر از پیشوند استفاده نمیکند.

دسترسی به دستگاه ورودی

برای استفاده از وبکم و میکروفون ابتدا باید دسترسی به این دستگاه ها را داشته باشیم. اولین پارامتری که باید به getUserMedia ارسال کرد نوع دستگاهی است که شما قصد استفاده از آن را دارید. برای مثال برای استفاده از وبکم باید مقدار video: true فرستاده شود. که در صورت موافقت کاربر کار ادامه پیدا میکند.

<video autoplay id="video"></video>
var onError = function (e) {
    console.log("Rejected!", e);
};
      
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream){
    var video = document.getElementById('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.onloadedmetadata = function (e) {
          
    };
}, onError);

مشاهده دمو

گرفتن عکس از ویدئو

با استفاده از عنصر canvas و متد drawImage میتوان فریم های ویدئو را تبدیل به عکس کرد.

البته باید با توجه به کدهای زیر تغییراتی در کدهای قبل ایجاد کنید.

<video autoplay id="video" width="300px" height="300px" style="border: solid 1px #000;"></video>
<canvas id="canvas" width="640" height="480" style="display: none"></canvas>
<img id="image" width="300" height="300" />
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function snapshot() {
    ctx.drawImage(video, 0, 0, 640, 480);
    document.getElementById('image').src = canvas.toDataURL('image/png');
}
      
video.addEventListener('click', snapshot, false);

مشاهده دمو

در این مطلب با تکنولوژی جدید WebRTC کمی آشنا شدیم. با استفاده از این تکنولوژی میتوان ارتباط بین چند کامپیوتر را به صورت real time برقرار کرد و ارتباط های صوتی و تصویری ایجاد کرد. در آینده بیشتر آشنا میشویم.

  • علی می‌گه:

    سلام
    می خواستم ببینم این را می توان بصورت کلاینتی استفاده کرد؟چگونه؟

  • مهدی می‌گه:

    سلام، وقت بخیر
    اگه بخواهیم همین ویدئو رو برای یکی دیگه ارسال کنیم، که اون فرد تصویر رو ببینه باید چیکار کرد؟

    تشکر

  • منیره می‌گه:

    خیلی ممنون. واقعا عالی بود.براتون آرزوی سربلندی و موفقیت میکنم.


  • نظرات این مطلب بسته است.