上QQ阅读APP看书,第一时间看更新
2.1.3 MediaStream方法
1. addTrack()方法
该方法向媒体流中加入新的媒体轨道。
stream.addTrack(track);
- 参数:Track,媒体轨道,类型为MediaStreamTrack。
- 返回值:无。
2. clone()方法
返回当前媒体流的副本,副本具有不同且唯一的标识。
const newstream = stream.clone(); // sameId为false const sameId = newstream.id === stream.id? true : false
- 参数:无。
- 返回值:一个新的媒体流对象。
3. getAudioTracks()方法
返回媒体种类为audio的媒体轨道对象数组,数组成员类型为MediaStreamTrack。
注意,数组的顺序是不确定的,每次调用都可能不同。
const mediaStreamTracks = mediaStream.getAudioTracks()
- 参数:无。
- 返回值:mediaStreamTracks,媒体轨道对象数组,如果当前媒体流没有音频轨道,则返回数组为空。
代码清单2-2使用getUserMedia()方法获取包含视频及音频轨道的媒体流,如果调用成功,则将媒体流附加到<video>元素,然后设置计时器,5s后调用getAudioTracks()方法获取所有音频轨道,最后停止播放第一个音频轨道。
代码清单2-2 getAudioTracks()方法示例
navigator.mediaDevices.getUserMedia({audio: true, video: true}) .then(mediaStream => { document.querySelector('video').srcObject = mediaStream; // 5s后,停止播放第一个音频轨道 setTimeout(() => { const tracks = mediaStream.getAudioTracks() tracks[0].stop() }, 5000) })
4. getVideoTracks()方法
返回kind属性值为video的媒体轨道对象数组,媒体轨道对象类型为MediaStream Track。
注意,对象在数组中的顺序是不确定的,每次调用都可能不同。
const mediaStreamTracks = mediaStream.getVideoTracks()
- 参数:无。
- 返回值:mediaStreamTracks是媒体轨道对象数组。如果当前媒体流没有视频轨道,则返回数组为空。
代码清单2-3调用getUserMedia()方法获取视频流,如果调用成功,则将媒体流附加到<video>元素,之后获取第一个视频轨道并从视频轨道截取图片。
代码清单2-3 getVideoTracks()方法示例
navigator.mediaDevices.getUserMedia({video: true}) .then(mediaStream => { document.querySelector('video').srcObject = mediaStream; const track = mediaStream.getVideoTracks()[0]; // 截取图片 const imageCapture = new ImageCapture(track); return imageCapture; })
5. getTrackById()方法
返回指定ID的轨道对象。如果未提供参数,或者未匹配ID值,则返回null;如果存在多个相同ID的轨道,该方法返回匹配到的第一个轨道。
const track = MediaStream.getTrackById(id);
- 参数:id,类型为字符串。
- 返回值:如果输入参数id与MediaStreamTrack.id匹配,则返回相应的MediaStream-Track对象,否则返回null。
代码清单2-4获取指定ID的媒体轨道并应用约束,将音量调整到0.5。
代码清单2-4 getTrackById()方法示例
stream.getTrackById("primary-audio-track").applyConstraints({ volume: 0.5 });
6. getTracks()方法
返回所有媒体轨道对象数组,包括所有视频及音频轨道。数组中对象的顺序不确定,每次调用都有可能不同。
const mediaStreamTracks = mediaStream.getTracks()
- 参数:无。
- 返回值:媒体轨道对象数组。
代码清单2-5使用getUserMedia()方法获取包含视频轨道的流,如果调用成功,则将流附加到<video>元素,然后设置计时器,5s后获取所有媒体轨道,并停止播放第一个媒体轨道(即视频轨道)。
代码清单2-5 getTracks()方法示例
navigator.mediaDevices.getUserMedia({audio: false, video: true}) .then(mediaStream => { document.querySelector('video').srcObject = mediaStream; // 5s后,停止播放第一个媒体轨道 setTimeout(() => { const tracks = mediaStream.getTracks() tracks[0].stop() }, 5000) })