ضبط صدا و تصویر با MediaRecorder

Sam Dutton

شامپاین و دونات را بشکنید! ستاره دارترین ویژگی Chrome تاکنون اجرا شده است.

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

MediaRecorder API به شما امکان می دهد صدا و تصویر را از یک برنامه وب ضبط کنید. اکنون در فایرفاکس و کروم برای اندروید و دسکتاپ در دسترس است.

آن را در اینجا امتحان کنید.

API ساده است، که من آن را با استفاده از کدهای نمونه نمایشی مخزن WebRTC نشان خواهم داد. توجه داشته باشید که API فقط می تواند از منابع امن استفاده شود: HTTPS یا میزبان محلی.

ابتدا یک MediaRecorder را با MediaStream نمونه سازی کنید. در صورت تمایل، از یک پارامتر options برای تعیین فرمت خروجی مورد نظر استفاده کنید:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

MediaStream می تواند از:

• یک تماس getUserMedia() .
• پایان دریافت تماس WebRTC.
• یک ضبط صفحه
• Web Audio، پس از اجرای این موضوع .

برای options ، می‌توانید نوع MIME و در آینده نرخ بیت صوتی و تصویری را مشخص کنید.

انواع MIME دارای مقادیر کم و بیش مشخصی هستند که کانتینر و کدک ها را ترکیب می کنند. مثلا:

• صوتی / وب
• ویدئو/وب
• video/webm;codecs=vp8
• video/webm;codecs=vp9

از روش استاتیک MediaRecorder.isTypeSupported() استفاده کنید تا بررسی کنید که آیا یک نوع MIME پشتیبانی می‌شود، به عنوان مثال وقتی MediaRecorder را نمونه‌سازی می‌کنید:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

لیست کامل انواع MIME پشتیبانی شده توسط MediaRecorder در Chrome در اینجا موجود است.

سپس یک کنترلر داده اضافه کنید و متد start() را برای شروع ضبط فراخوانی کنید:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

این مثال هر زمان که داده در دسترس باشد، یک Blob به آرایه recordedChunks اضافه می کند. به متد start() می‌توان به صورت اختیاری یک آرگومان timeSlice داد که طول رسانه‌ای را که باید برای هر Blob ضبط شود مشخص می‌کند.

پس از اتمام ضبط، به MediaRecorder بگویید:

mediaRecorder.stop();

با ایجاد یک "super-Blob" از آرایه Blob های ضبط شده، حباب های ضبط شده را در یک عنصر ویدیویی پخش کنید:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

یا می‌توانید از طریق XHR روی سرور آپلود کنید یا از یک API مانند YouTube استفاده کنید ( نمونه آزمایشی زیر را ببینید).

دانلود را می توان با هک کردن لینک به دست آورد:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

بازخورد در مورد API ها و دموها

توانایی ضبط صدا و تصویر بدون پلاگین برای برنامه های وب نسبتاً جدید است، بنابراین ما به ویژه از بازخورد شما در مورد API ها قدردانی می کنیم.

• اشکال اجرای MediaRecorder: crbug.com/262211
• کروم: crbug.com/new
• فایرفاکس: bugzil.la
• نسخه ی نمایشی: github.com/webrtc/samples

ما همچنین می‌خواهیم بدانیم چه سناریوهای استفاده برای شما مهم‌تر است و چه ویژگی‌هایی را می‌خواهید در اولویت قرار دهیم. در مورد این مقاله نظر دهید یا پیشرفت را در crbug.com/262211 دنبال کنید.

دموها

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (همان کد، آدرس اینترنتی ساده تر برای موبایل!)
• یک ویدیو ضبط کنید و آن را با عنصر <google-youtube-upload> سفارشی آزمایشی در YouTube آپلود کنید

برنامه ها

• برنامه یادداشت های صوتی Paul Lewis اکنون دارای پشتیبانی MediaRecorder است که برای مرورگرهایی که صدای MediaRecorder را پشتیبانی نمی کنند، چند پر شده است.

پلی پرها

• Muaz Khan's MediaStreamRecorder یک کتابخانه جاوا اسکریپت برای ضبط صدا و تصویر است که با MediaRecorder سازگار است.
• Recorderjs ضبط را از یک گره Web Audio API فعال می کند. می توانید این را در عمل در برنامه یادداشت های صوتی پل لوئیس مشاهده کنید.

پشتیبانی از مرورگر

• کروم 49 و بالاتر به صورت پیش فرض
• کروم دسک‌تاپ ۴۷ و ۴۸ با ویژگی‌های پلتفرم وب آزمایشی فعال شده از chrome://flags
• فایرفاکس از نسخه 25
• لبه : "در حال بررسی"

مشخصات

w3c.github.io/mediacapture-record/MediaRecorder.html

اطلاعات API

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API