Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

前端mux.js播放ts视频没有声音

代码:

`var $ = document.querySelector.bind(document);

var vjsParsed,
    video, 
    mediaSource;
// 定义通用的事件回调处理函数,只做打印事件类型
function logevent (event) {
  console.log(event);
}

// ajax
let xhr = new XMLHttpRequest();
xhr.open('GET', "./AM_1.044.ts");
// 接收的是 video/mp2t 二进制数据,并且arraybuffer类型方便后续直接处理 
xhr.responseType = "arraybuffer";
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState ==4) {
    if (xhr.status == 200) {
      transferFormat(xhr.response);
    } else {
      console.log('error');
    }
  }
}

function transferFormat (data) {
  // 将源数据从ArrayBuffer格式保存为可操作的Uint8Array格式
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
  var segment = new Uint8Array(data); 
  var combined = false;
  // 接收无音频ts文件,OutputType设置为'video',带音频ts设置为'combined'
  var outputType = 'combined';
  var remuxedSegments = [];
  var remuxedBytesLength = 0;
  var remuxedInitSegment = null;

  // remux选项默认为true,将源数据的音频视频混合为mp4,设为false则不混合
  var transmuxer = new muxjs.mp4.Transmuxer({remux: true});

  // 监听data事件,开始转换流
  transmuxer.on('data', function(event) {
    console.log(event);
    if (event.type === outputType) {
      remuxedSegments.push(event);
      remuxedBytesLength += event.data.byteLength;
      remuxedInitSegment = event.initSegment;
    }
  });
  // 监听转换完成事件,拼接最后结果并传入MediaSource
  transmuxer.on('done', function () {
    var offset = 0;
    var bytes = new Uint8Array(remuxedInitSegment.byteLength + remuxedBytesLength)
    bytes.set(remuxedInitSegment, offset);
    offset += remuxedInitSegment.byteLength;

    for (var j = 0, i = offset; j < remuxedSegments.length; j++) {
      bytes.set(remuxedSegments[j].data, i);
      i += remuxedSegments[j].byteLength;
    }
    remuxedSegments = [];
    remuxedBytesLength = 0;
    // 解析出转换后的mp4相关信息,与最终转换结果无关
    vjsParsed = muxjs.mp4.tools.inspect(bytes);
    console.log('transmuxed', vjsParsed);

    prepareSourceBuffer(combined, outputType, bytes);
  });
  // push方法可能会触发'data'事件,因此要在事件注册完成后调用
  transmuxer.push(segment); // 传入源二进制数据,分割为m2ts包
  // flush的调用会直接触发'done'事件,因此要事件注册完成后调用
  transmuxer.flush(); // 将所有数据从缓存区清出来
}

function prepareSourceBuffer (combined, outputType, bytes) {
  var buffer;
  video = document.createElement('video');
  video.controls = true;
  // MediaSource Web API: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource
  mediaSource = new MediaSource(); 
  video.src = URL.createObjectURL(mediaSource);

  $('#video-place').appendChild(video);

  // 转换后mp4的音频格式 视频格式
  var codecsArray = ["avc1.64001f", "mp4a.40.5"];

  mediaSource.addEventListener('sourceopen', function () {
    // MediaSource 实例默认的duration属性为NaN
    mediaSource.duration = 0;
    // 转换为带音频、视频的mp4
    if (combined) {
      buffer = mediaSource.addSourceBuffer('video/mp4;codecs="' + 'avc1.64001f,mp4a.40.5' + '"');
    } else if (outputType === 'video') {
      // 转换为只含视频的mp4
      buffer = mediaSource.addSourceBuffer('video/mp4;codecs="' + codecsArray[0] + '"');
    } else if (outputType === 'audio') {
      // 转换为只含音频的mp4
      buffer = mediaSource.addSourceBuffer('audio/mp4;codecs="' + (codecsArray[1] ||codecsArray[0]) + '"');
    }

    buffer.addEventListener('updatestart', logevent);
    buffer.addEventListener('updateend', logevent);
    buffer.addEventListener('error', logevent);
    video.addEventListener('error', logevent);
    // mp4 buffer 准备完毕,传入转换后的数据
    // return callback(buffer);
    // 将 bytes 放入 MediaSource 创建的sourceBuffer中
    // https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/appendBuffer
    buffer.appendBuffer(bytes);
    // 自动播放
    // video.play();
  });
};`

没有办法打开喇叭,按照网上提供的教程依然是这样。转码出来的视频没得声音,可以确认的是原视频有声音,
如图:
VORQ6_BPG)${BJ75HEUE6{I.png
源代码地址:https://github.com/SunnySunMo...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

63 comments

56.5k users

...