上QQ阅读APP看书，第一时间看更新
2.7 播放媒体流
我们使用API成功获取媒体流后，通常希望将该媒体流播放出来。将MediaStream对象指定给HTML的video（或audio）元素即可进行本地播放。
代码清单2-44使用getUserMedia()方法获取包含音视频轨道的媒体流，将流对象赋值给视频元素的srcObject属性，从而实现本地播放音视频。
代码清单2-44 本地播放媒体流示例
<html>
<head>
<title>Local video playback</title>
</head>
<body>
<video id="localVideo" autoplay playsinline controls />
</body>
</html>
async function playVideoFromCamera() {
try {
const constraints = {'video': true, 'audio': true};
const stream = await
navigator.mediaDevices.getUserMedia(constraints);
const videoElement = document.querySelector('video#localVideo');
videoElement.srcObject = stream;
} catch(error) {
console.error('Error opening video camera.', error);
}
}
HTML的video元素通常需要指定autoplay、controls和playsinline属性，autoplay允许自动播放视频，controls显示播放器控制按钮，playsinline允许在Safari环境中进行非全屏播放。
iOS Safari的限制
iOS 10之前的版本，Safari不支持自动播放视频，也不支持内联播放。也就是说，视频只能由用户主动操作才能播放，并且是全屏播放的。
iOS 10版本引入了新的播放政策，通过设置playsinline属性可以让Safari浏览器窗口播放视频；如果不设置playsinline属性，Safari仍会默认全屏播放视频。
iOS 10版本还允许自动播放无音轨或者静音的视频，但是对于有声音的视频，仍然需要用户进行如下主动操作。
1）用户点击播放按钮。
2）若用户触发了click/doubleclick/keydown等事件，则在事情处理函数中调用video.play()方法。