وبکم در جاواسکریپت

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

به همین علت کنسرسیوم W3C تلاش کرد؛ تا این خلا را پر کند. پس استانداردهای خوبی را برای پشتیبانی از رسانه ضبط و استریم تنظیم کرد. و سازندگان مرورگر را در اجرای آن تشویق نمود. خبر خوب این است که، علیرغم جدید بودن این استانداردها، مرورگرهای مختلف، پشتیبانی از آنها را در آخرین نسخه‌های خود اضافه کردند. و برای استفاده زا آن تنها باید چند خط جاواسکریپت به کد خود اضافه کنید. در این نوشته شما یاد می گیرید چگونه جریان ویدیویی را از وبکم خود گرفته و در بروزر خود نمایش دهید.

اگر شما از بروزر جدید استفاده می‌کنید و اجازه دسترسی به دوربین و میکروفن را نیز بدهید؛ می‌توانید تصویر و صدای ورودی از دوربین خود را در فریم زیر به صورت زنده ببینید. در نسخه‌های جدیدتر  Google Chrome ، یک تغییر امنیتی ایجاد شده است که فقط در صورت ارائه محتوا از طریق HTTPS می‌توان به وبکم دسترسی پیدا کرد. بنابراین به صورت لوکال (یا از طریق localhost) می‌توانید این کد را آزمایش کنید، اما نمی‌توانید آن را بر روی اینترنت بگذارید، مگر اینکه اتصال شما از طریق HTTPS امن باشد.

چگونگی کار

این برنامه از دو بخش اصلی تشکیل شده است.

• <video>: در HTML برای نمایش استریم
• getUserMedia: در جاواسکریپت برای
  • تعیین ورودی (دوربین جلو یا پشت)
  • کنترل دسترسی‌ها
  • مدیریت خطا

<video id="vid-strm"></video>

const vidStrm = document.getElementById('vid-strm');

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
  vidStrm.srcObject = stream;
  vidStrm.onloadedmetadata = function(e) {
    vidStrm.play();
  };
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

در ادامه می‌توانید امکان عکس گرفتن، افزودن فیلتر و ذخیره بر روی کامپیوتر یا آپلود به سرور … را به آن اضافه کنید.
برای آگاهی بیشتر اینجا را ببینید.