前端文件处理及流媒体

2020-09-22 本文已影响0人 Mr无愧于心

一、FileReader API

本地图片预览

<input type="file" accept="image/*" onchange="loadFile(event)" />
const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
      };

以上的reader.readAsDataURL用来把本地的file对象转换成 Data URL（base64 编码），Data URL就是file文件的一个临时地址。
FileReader支持把File/Blob对象转换成Data URL 之外，还有readAsArrayBuffer() 和 readAsText()方法，把File/Blob对象转换成其他格式

二、Blob URL。

网络图片预览

      const xhr = new XMLHttpRequest();
      xhr.open('get', '图片文件二进制流地址', true);
      xhr.setRequestHeader('contentType', `application/png`);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          // 接受二进制文件流
          const blob = xhr.response;
          const objectURL = window.URL.createObjectURL(blob);// 生成的二进制流的本地地址
          image.src = objectURL;
          window.URL.revokeObjectURL(objectURL) // 释放掉blob对象
        }
      }
      xhr.send();

它允许 Blob 或 File 对象用作图像，下载二进制数据链接等的 URL 源。

浏览器内部为每个通过 URL.createObjectURL 生成的 URL 存储了一个「URL → Blob」映射。因此，此类 URL 较短，但可以访问 Blob。
URL.revokeObjectURL(url) 方法，从内部映射中删除引用，从而允许删除 Blob（如果没有其他引用），并释放内存

网络文件流下载

js 实现图片、pdf、docx的下载

三、canvas的图片处理

图片灰度处理

 const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, 230, 230);// image绘制到页面的 Canvas 容器
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 获取的图片像素
        const data = imageData.data;

        const grayscale = function () {
          for (let i = 0; i < data.length; i += 4) { // 4 代表rgba4个色值
            const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
            data[i] = avg; // red
            data[i + 1] = avg; // green
            data[i + 2] = avg; // blue
          }
          ctx.putImageData(imageData, 0, 0);
        };

视频截图canvas.toDataURL()

let ctx = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
img.src = canvas.toDataURL();

图片压缩

 const imageDataURL = canvas.toDataURL(mimeType, 0.7);
 // mimeType 图片的类型 0.7压缩比例

四、视频流的处理

直接使用视频地址<video src="/xxxx.mp4"></video>缺少了诸如视频分段加载、视频码率切换、部分加载等等现代播放器应该有的功能。
单纯的使用URL.createObjectURL()的方式讲二进制流装换成本地地址的话，需要将流下载完毕才能进行视频的播放，如果视频过大的话会造成长时间的延迟，所以要使用流媒体的方式使媒体文件可以边下载边播放

1. 流媒体传输协议 HLS和DASH

HLS工作原理是把整个流分成一个个小的基于 HTTP 的msu8文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。后端处理分片视频使用ffmpeg 分割、转码，通过http输出切割后的视频文件。腾讯直播使用这种协议
MPEG-DASH 会将内容分解成一系列小型的基于 HTTP 的MPD文件片段，每个片段包含很短长度的可播放内容，而内容总长度可能长达数小时。bilibili使用这种传输协议，开源了flv.js，纯 JavaScript 编写的 HTML5 Flash Video（FLV）播放器，它底层依赖于 Media Source Extensions。在实际运行过程中，它会自动解析 FLV 格式文件并喂给原生 HTML5 Video 标签播放音视频数据，使浏览器在不借助 Flash 的情况下播放 FLV 成为可能。

2. MediaSource媒体资源对象接口

const video = document.querySelector('video');
//视频资源存放路径，假设下面有5个分段视频 video1.mp4 ~ video5.mp4，第一个段为初始化视频init.mp4
const assetURL = "http://www.demo.com";
//视频格式和编码信息，主要为判断浏览器是否支持视频格式，但如果信息和视频不符可能会报错
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; 
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource); //将video与MediaSource绑定，此处生成一个Blob URL
  mediaSource.addEventListener('sourceopen', sourceOpen); //可以理解为容器打开
} else {
  //浏览器不支持该视频格式
  console.error('Unsupported MIME type or codec: ', mimeCodec);
}

function sourceOpen () {
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  let i = 1;
  function getNextVideo(url) {
    ajax(url, function(buf) {
      //往容器中添加请求到的数据，不会影响当下的视频播放。
      sourceBuffer.appendBuffer(buf);
    });
  }
  //每次appendBuffer数据更新完之后就会触发
  sourceBuffer.addEventListener("updateend", function() {
    if (i === 1) {
      //第一个初始化视频加载完就开始播放
      video.play();
    }
    if (i < 6) {
      //一段视频加载完成后，请求下一段视频
      getNextVideo(`${assetURL}/video${i}.mp4`);
    }
    if (i === 6) {
      //全部视频片段加载完关闭容器
      mediaSource.endOfStream();
      URL.revokeObjectURL(video.src); //Blob URL已经使用并加载，不需要再次使用的话可以释放掉。
    }
    i++;
  });
  //加载初始视频
  getNextVideo(`${assetURL}/init.mp4`);
};
function ajax(url, cb) {
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer"; // "text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象
  xhr.onload = function() {
    cb(new Uint8Array(xhr.response));
  };
  xhr.send();
}

文件编码格式转换关系

image.png

参考：

1. https://juejin.im/post/6850037275579121671#heading-14
2. https://juejin.im/post/6844904117605761031#heading-20
3. https://juejin.im/post/6846687590783909902

前端文件处理及流媒体

一、FileReader API

本地图片预览

二、Blob URL。

网络图片预览

网络文件流下载

三、canvas的图片处理

四、视频流的处理

1. 流媒体传输协议 HLS和DASH

2. MediaSource媒体资源对象接口

参考：

猜你喜欢

热点阅读