江苏龙网

  1. 主页 > 生活百科 > >

高级Web应用开发前沿技术简述( 三 )

Web应用


但是由于WebGL毕竟是相对底层的API，可能不是那么容易上手，所以Apple推荐开发者使用现成的封装库提高开发的效率，比如A-frame、babylon.js、playcanvas、three.js等.
3.2 WebM & VP9
WebM是一种免版权的视频文件格式，它定义了文件的容器结构、视频和音频格式，WebM文件由使用VP8或VP9视频编解码器压缩的视频流和使用Vorbis或Opus音频编解码器压缩的音频流组成 。WebM和MP4等格式相比，在保证出色视频质量的前提下有更高的压缩率，国外的Youtube，国内的腾讯视频都支持WebM格式视频的上传发布 。Safari也终于在今年增加了对WebM的支持 。

  • macOS11.3 支持VP8/VP9视频格式 + Vorbis音频的WebM文件
  • macOS12 支持VP8/VP9视频格式 + Vorbis/Opus音频的WebM文件
  • iPadOS15 支持通过Media Source Extension API来播放WebM文件
由于不同设备对WebM支持的情况存在差异，在实际编码中可以通过MediaCapabilities API判断当前设备是否支持WebM 。
const mediaconfig = {type = 'media-source',video:{contentType: 'video/webm; codecs="vp09.00.10.08"'width: 1920, height:1080, bitrate:2646242,}};navigator.mediaCapabilities.decodingInfo(mediaConfig).then(//do something else)上文提及的VP9是一种在性能上可以和H265一较高下的视频编码技术，目前可以应用于macOS/iPadOS上的Streaming和WebRTC应用中，但是在其他设备上还需要根据上述的API来判断是否支持 。如果希望web内容中的视频具备更好的浏览器兼容性，还是更推荐H264或者HEVC的编码格式，HEVC对高视频的支持更加完善 。
3.3 Storage Access
在网页中播放来自第三方的视频内容是一种很常见的应用形态，比如要在main.domain的Web页面中播放来自video.domain的视频内容，通常有两种方式：
1.直接从video.domain获取内容 。
2.创建一个iframe用于加载video.domain的内容 。
但是出于安全考虑，由于IPT策略的限制，默认情况下第三方的iframe是没有权限访问宿主站点下的storage数据的 。也就是说假如video.com的资源请求是从main.com发起的，这个请求就无法访问video.com域名下存储的cookies信息 。这就意味着video.com在向授权用户提供资源的时候会出现问题，没有cookies就意味着无法通过认证 。
高级Web应用开发前沿技术简述

文章插图
 
这时候借助The Storage Access API向用户申请了授权，像这样：
高级Web应用开发前沿技术简述

文章插图
 
那么第三方iframe就可以拿到宿主站点存储的cookies信息了 。
高级Web应用开发前沿技术简述

文章插图
 
这个The Storage Access API现有主流浏览器和webkit已经支持，具体用法如下：
document.hasStorageAccess().then(hasAccess => {if (hasAccess) {// storage access has been granted already.} else {// storage access hasn't been granted already;// you may want to call requestStorageAccess().}});为了增加适用范围，今年又新增了两个特性：
1.可以在per-page scope中申请用户授权，这样做的目的就是一旦用户对一个第三方iframe进行了授权，在同一页面上的所有其他资源也可以获得相同的访问授权，也就不用为每一个iframe都进行访问授权了 。
2.允许嵌套在iframe中的iframe向宿主获取Cookies信息 。
3.4 Media Recorder & Audio Worklet
这部分主要介绍如果通过Media Recorder在Web上实现录音功能，随后通过Audio Worklet实现音频的加工 。下面这部分代码就是录音功能的简单实现 。需要注意的在处理录音逻辑之前，需要首先通过
navigator.mediaDevices.getUserMedia的方式向用户申请录音权限 。
var recorder;async function startRecording() {try{//await方式向用户获取录音权限let stream = await navigator.mediaDevices.getUserMedia({ audio: true});recorder = new MediaRecorder(stream);recorder.addEventListener('dataavailable', onDataAvailable);recorder.addEventListener('stop', onStop);recorder.start();} catch(error){console.log(error);}}function stopRecording() {if(recorder) {recorder.stop();}}//create downlaodable datavar dataChunks = [];function onDataAvailable(event) {dataChunks.push(event.data);}function onStop() {const blob = new Blob(dataChunks, {'type': 'audio/mp3'});let audio = document.getElementById('audio');audio.src = https://www.isolves.com/it/cxkf/qd/2022-07-26/URL.createObjectURL(blob);}Audio Worklet API的作用是通过调用自定义脚本实现音频处理，这里的脚本可以是js或wasm 。当前的Module和自定义的js之间通过AudioWorkletNode实现连接 。与之前Safari中运行自定义脚本的解决方案ScriptProcessorNode相比，它减少了渲染线程和主线程之间的频繁切换，确保了更低延迟的实现音频处理 。使用方法如下://使用AudioWorklet自定义语音处理脚本let stream = await navigator.mediaDevices.getUserMedia({ audio: true});//获取用户授权//process input data using AudioWorklet APIlet audioContext = new AudioContext();let source = audioContext.createMediaStreamSource(stream);//创建一个sourceawait audioContext.audioWorklet.addModule('distortion-processor.js');const workletNode = new AudioWorkletNode(audioContext, 'distortion-processor');let destination = audioContext.createMediaStreamDestination();source.connect(workletNode).connect(destination);//把连接了自定义实现的workletNode和输出关联在一起mediaRecorder = new MediaRecorder(destination.stream);mediaRecorder.addEventListener('dataavailable', onDataAvailable);mediaRecorder.addEventListener('stop', onStop);mediaRecorder.start();其中distortion-processor.js就是自定义的音频处理脚本，实现如下：//audio processing script for AudioWorklet//这个类必须继承自AudioWorkletProcessor，并且实现其中的process方法class DistorationProcessor extends AudioWorkletProcessor {process(inputs, outputs) {const input = inputs[0];const output = outputs[0];for (let i = 0; i


推荐阅读


上一篇：没有了

下一篇：从JsonPath和XPath到SPL