ひろばニュース｜2026/04/24~2026/04/29号

//１．音と映像を合流させる『ストリーム・ミキシング』
recordingVideoStream = recordCanvas.captureStream(60); // 60fpsで映像を取得
audioDest = audioCtx.createMediaStreamDestination(); // 音の「横取り先」を作成
// ... (中略) ...
combinedStream = new MediaStream([
    ...recordingVideoStream.getVideoTracks(), // 映像トラック
    ...audioDest.stream.getAudioTracks()      // 音声トラック
]);

//２．．画面サイズに依存しない『録画専用キャンバス』
function setupRecordCanvas() {
    if (bgImage && bgImage.complete && bgImage.naturalWidth) {
        recordCanvas = document.createElement('canvas'); // メモリ内にのみ存在
        recordCanvas.width = bgImage.naturalWidth;   // 元画像の横幅を継承
        recordCanvas.height = bgImage.naturalHeight; // 元画像の縦幅を継承
        recordCtx = recordCanvas.getContext('2d');
// ... (中略) ...

//３．『書き出し方を判別』してエラーを予防！
const exportFormat = document.getElementById('exportFormat').value;
let mimeType = 'video/webm'; // 基本はWebM

if (exportFormat === 'mp4' && isSafari()) {
    // SafariならMP4を優先的に試みる
    const mp4Type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    if (MediaRecorder.isTypeSupported(mp4Type)) {
        mimeType = mp4Type;
    }
}
// ... (中略) ...
mediaRecorder = new MediaRecorder(combinedStream, { mimeType, videoBitsPerSecond: selectedBitrate }); // 最終決定