WebRTC记录音视频流 _视频流

监听开始事件

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest) 。
addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

document.querySelector('button#start').addEventListener('click', async () => {document.querySelector('button#start').disabled = true;const constraints = {audio: {},video: {width: 1280, height: 720}};await init(constraints);});

获取音视频轨道

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。
它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

async function init(constraints) {try {const stream = await navigator.mediaDevices.getUserMedia(constraints);handleSuccess(stream);} catch (e) {console.error('navigator.getUserMedia error:', e);}}

htmlMediaElement 接口的 srcObject 属性设定或返回一个对象，这个对象提供了一个与HTMLMediaElement关联的媒体源，这个对象通常是 MediaStream ，但根据规范可以是 MediaSource， Blob 或者 File 。

function handleSuccess(stream) {recordButton.disabled = false;window.stream = stream;const gumVideo = document.querySelector('video#gum');gumVideo.srcObject = stream;}

录制媒体流

MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象
MediaRecorder.ondataavailable 事件处理程序API处理dataavailable事件，在响应运行代码Blob数据被提供使用。
dataavailable当MediaRecorder将媒体数据传递到您的应用程序以供使用时，将触发该事件。数据在包含数据的Blob对象中提供。这在四种情况下发生：
- 媒体流结束时，所有尚未传递到ondataavailable处理程序的媒体数据都将在单个Blob中传递。
- 当调用MediaRecorder.stop() (en-US)时，自记录开始或dataavailable事件最后一次发生以来已捕获的所有媒体数据都将传递到Blob中；此后，捕获结束。
- 调用MediaRecorder.requestData() (en-US) dataavailable时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据；然后Blob创建一个新文件，并将媒体捕获继续到该blob中。
- 如果将timeslice属性传递到开始媒体捕获的MediaRecorder.start() (en-US)方法中，dataavailable则每timeslice毫秒触发一次事件。这意味着每个Blob都有特定的持续时间（最后一个Blob除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。

【WebRTC记录音视频流】

let mediaRecorder;const recordButton = document.querySelector('button#record');recordButton.addEventListener('click', () => {if (recordButton.textContent === '开始记录') {startRecording();} else {stopRecording();recordButton.textContent = '开始记录';playButton.disabled = false;}});function startRecording() {recordedBlobs = [];try {mediaRecorder = new MediaRecorder(window.stream);} catch (e) {console.error('创建MediaRecorder时异常:', e);}recordButton.textContent = '停止记录';playButton.disabled = true;mediaRecorder.ondataavailable = handleDataAvailable;mediaRecorder.start();}function stopRecording() {mediaRecorder.stop();}function handleDataAvailable(event) {if (event.data && event.data.size > 0) {recordedBlobs.push(event.data);}}

播放媒体流