Skip to content

Commit c6b638e

Browse files
WscatsWscats
committed
增加录屏的案例
1 parent 916fb1a commit c6b638e

2 files changed

Lines changed: 403 additions & 0 deletions

File tree

‎uploadFiles/录屏下载/README.md‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
# BAQ
2+
3+
`createObjectURL`错误`Failed to execute 'createObjectURL' on 'URL'`
4+
```js
5+
window.URL.createObjectURL(data)
6+
7+
var binaryData = [];
8+
binaryData.push(data);
9+
window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}));
10+
```
11+
12+
# navigator
13+
14+
- `navigator.mediaDevices.getDisplayMedia`屏幕源
15+
- `navigator.mediaDevices.getUserMedia`摄像头源
16+
17+
```html
18+
<!DOCTYPE html>
19+
<html lang="en">
20+
21+
<head>
22+
<meta charset="UTF-8">
23+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
24+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
25+
<title>Document</title>
26+
</head>
27+
28+
<body>
29+
<style>
30+
video {
31+
width: 1000px;
32+
height: 500px
33+
}
34+
</style>
35+
<video autoplay id="video">Video stream not available.</video>
36+
<script>
37+
let video = document.getElementById('video');
38+
navigator.mediaDevices.getDisplayMedia({
39+
video: true,
40+
audio: true
41+
})
42+
.then(stream => {
43+
// we have a stream, attach it to a feedback video element
44+
console.log(stream);
45+
46+
video.srcObject = stream;
47+
}, error => {
48+
console.log("Unable to acquire screen capture", error);
49+
});
50+
</script>
51+
</body>
52+
53+
</html>
54+
```
55+
56+
# MediaRecorder
57+
58+
用`MediaRecorder`录制视频或者音频的步骤
59+
- `navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {}`获取音视频的`stream`
60+
- `var mediaRecorder = new MediaRecorder(stream)`实例化`mediaRecorder`，`mediaRecorder`会不断接受`navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {}`所提供的`stream`，并且它自身有多个方法
61+
- `mediaRecorder.start()`点击事件触发开始录制
62+
- `mediaRecorder.onstop = function(e) {}`往`mediaRecorder`监听停止事件`var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });chunks = [];`这里的`chunks`会从无到有，随着音视频流被监听，不断增加，注意`onstop`会触发两次，一开始未录制和暂停都会触发
63+
- `mediaRecorder.ondataavailable = function(e) {chunks.push(e.data);}`不断监听`stream`，并往`chunks`数组添加音视频流的数据
64+
- `mediaRecorder.stop()`点击事件触发暂停录制
65+
- `var audioURL = URL.createObjectURL(blob);audio.src = audioURL;console.log("recorder stopped");`用`blob`生成一个`url`挂载到`audio`或者`video`标签上面去播放
66+
67+
```js
68+
var constraints = { audio: true };
69+
var chunks = [];
70+
71+
navigator.mediaDevices.getUserMedia(constraints)
72+
.then(function(stream) {
73+
74+
var mediaRecorder = new MediaRecorder(stream);
75+
76+
record.onclick = function() {
77+
mediaRecorder.start();
78+
console.log(mediaRecorder.state);
79+
}
80+
81+
stop.onclick = function() {
82+
mediaRecorder.stop();
83+
console.log(mediaRecorder.state);
84+
}
85+
86+
mediaRecorder.onstop = function(e) {
87+
audio.setAttribute('controls', '');
88+
audio.controls = true;
89+
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
90+
chunks = [];
91+
var audioURL = URL.createObjectURL(blob);
92+
audio.src = audioURL;
93+
console.log("recorder stopped");
94+
}
95+
96+
mediaRecorder.ondataavailable = function(e) {
97+
chunks.push(e.data);
98+
}
99+
})
100+
.catch(function(err) {
101+
console.log('The following error occurred: ' + err);
102+
})
103+
```
104+
105+
# webkitRTCPeerConnection
106+
107+
```js
108+
localPeerConnection = new RTCPeerConnection(null);
109+
localPeerConnection.onicecandidate = function(event) {
110+
if (event.candidate) {
111+
remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate)); //answer方接收ICE
112+
}
113+
};
114+
115+
remotePeerConnection = new RTCPeerConnection(null);
116+
remotePeerConnection.onicecandidate = function(event) {
117+
if (event.candidate) {
118+
localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate)); //offer方接收ICE
119+
}
120+
};
121+
122+
remotePeerConnection.onaddstream = function gotRemoteStream(event) {
123+
recordedVideo.srcObject = event.stream;
124+
};
125+
126+
localPeerConnection.addStream(recordStream);
127+
localPeerConnection.createOffer(function (description) { //description是offer方的 SD ==> 传输的内容
128+
localPeerConnection.setLocalDescription(description);
129+
remotePeerConnection.setRemoteDescription(description); //answer方接收offer的SD
130+
remotePeerConnection.createAnswer(function (description) {
131+
remotePeerConnection.setLocalDescription(description); //answer方设置本身自己的SD
132+
localPeerConnection.setRemoteDescription(description); //offer接收answer方的SD
133+
}, function (error) {
134+
console.log(error)
135+
}); //answer方发送自己的SD
136+
}, function (error) {
137+
console.log(error)
138+
});
139+
```
140+
141+
# Blob
142+
143+
`Blob`是`Binary Large Object`的缩写，代表二进制类型的大对象
144+
145+
```js
146+
new Blob(blobParts, [options]);
147+
```
148+
149+
## 用法
150+
151+
- blobParts：数组类型，数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString 。
152+
153+
- options：可选项，字典格式类型，可以指定如下两个属性：
154+
- type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
155+
- endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。
156+
157+
```js
158+
var data1 = "a";
159+
var data2 = "b";
160+
var data3 = "<div style='color:red;'>This is a blob</div>";
161+
var data4 = {
162+
"name": "abc"
163+
};
164+
165+
var blob1 = new Blob([data1]);
166+
var blob2 = new Blob([data1, data2]);
167+
var blob3 = new Blob([data3]);
168+
var blob4 = new Blob([JSON.stringify(data4)]);
169+
var blob5 = new Blob([data4]);
170+
var blob6 = new Blob([data3, data4]);
171+
172+
console.log(blob1); //输出：Blob {size: 1, type: ""}
173+
console.log(blob2); //输出：Blob {size: 2, type: ""}
174+
console.log(blob3); //输出：Blob {size: 44, type: ""}
175+
console.log(blob4); //输出：Blob {size: 14, type: ""}
176+
console.log(blob5); //输出：Blob {size: 15, type: ""}
177+
console.log(blob6); //输出：Blob {size: 59, type: ""}
178+
```
179+
180+
## slice方法
181+
182+
`Blob`对象有一个`slice`方法，返回一个新的`Blob`对象，包含了源`Blob`对象中指定范围内的数据。
183+
```js
184+
slice([start], [end], [contentType])
185+
```
186+
187+
- start： 可选，代表`Blob`里的下标，表示第一个会被会被拷贝进新的`Blob`的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。
188+
- end： 可选，代表的是`Blob`的一个下标，这个下标-1的对应的字节将会是被拷贝进新的`Blob`的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。
189+
- contentType： 可选，给新的`Blob`赋予一个新的文档类型。这将会把它的`type`属性设为被传入的值。它的默认值是一个空的字符串。
190+
191+
```js
192+
var data = "abcdef";
193+
var blob1 = new Blob([data]);
194+
var blob2 = blob1.slice(0, 3);
195+
196+
console.log(blob1); //输出：Blob {size: 6, type: ""}
197+
console.log(blob2); //输出：Blob {size: 3, type: ""}
198+
let href = URL.createObjectURL(blob2); //浏览器可以直接打开href连接看输出
199+
console.log(href); //abc
200+
```
201+
202+
## URL.createObjectURL()
203+
204+
`URL.createObjectURL()`静态方法会创建一个`DOMString`，其中包含一个表示参数中给出的对象的URL。这个`URL`的生命周期和创建它的窗口中的`document`绑定。这个新的`URL`对象表示指定的`File`对象或`Blob`对象。
205+
```js
206+
objectURL = URL.createObjectURL(blob);
207+
```
208+
209+
# URL.revokeObjectURL()
210+
211+
`URL.revokeObjectURL()`静态方法用来释放一个之前通过调用`URL.createObjectURL()`创建的已经存在的`URL`对象。当你结束使用某个`URL`对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
212+
```js
213+
window.URL.revokeObjectURL(objectURL);
214+
```
215+
216+
## 分割上传
217+
218+
目前，`Blob`对象大多是运用在，处理大文件分割上传（利用`Blob`中`slice`方法），处理图片`canvas`跨域(避免增加`crossOrigin = "Anonymous"`,生成当前域名的`url`，然后`URL.revokeObjectURL()`释放，`createjs`有用到)，以及隐藏视频源路径等等。
219+
```js
220+
function upload(blobOrFile) {
221+
var xhr = new XMLHttpRequest();
222+
xhr.open('POST', '/server', true);
223+
xhr.onload = function (e) {
224+
// ...
225+
};
226+
xhr.send(blobOrFile);
227+
}
228+
229+
document.querySelector('input[type="file"]').addEventListener('change', function (e) {
230+
var blob = this.files[0];
231+
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
232+
const SIZE = blob.size;
233+
var start = 0;
234+
var end = BYTES_PER_CHUNK;
235+
while (start < SIZE) {
236+
upload(blob.slice(start, end));
237+
start = end;
238+
end = start + BYTES_PER_CHUNK;
239+
}
240+
}, false);
241+
```
242+
243+
# 下载
244+
245+
```js
246+
var xhr = new XMLHttpRequest();
247+
xhr.open('GET', '/path/to/image.png', true);
248+
xhr.responseType = 'blob';
249+
xhr.send()
250+
251+
xhr.onload = function (e) {
252+
if (this.status == 200) {
253+
var blob = this.response;
254+
255+
var img = document.createElement('img');
256+
var URL = window.URL || window.webkitURL; //兼容处理
257+
var objectUrl = URL.createObjectURL(blob);
258+
img.onload = function (e) {
259+
window.URL.revokeObjectURL(img.src); // 释放 url.
260+
};
261+
262+
img.src = objectUrl;
263+
document.body.appendChild(img);
264+
// ...
265+
}
266+
};
267+
268+
xhr.send();
269+
```
270+
271+
|代码|作用|类型|
272+
|-|-|-|
273+
|`navigator.mediaDevices.getUserMedia(constraints).then(function(stream){};`|根据音视频源头生成`stream`|MediaStream|
274+
|`mediaRecorder = new MediaRecorder(window.stream, options)`|根据音视频源头把`stream`交给`mediaRecorder`处理|MediaRecorder|
275+
|`mediaRecorder.ondataavailable = function (event) {recordedBlobs.push(event.data);}`|根据`stream`获取每一片段的`BlobEvent`并存入`recordedBlobs`数组|BlobEvent|
276+
|`let buffer = new Blob(recordedBlobs, {type: "video/webm"});`|得到`Blob`格式的音视频流|Blob|
277+
|`test.src = window.URL.createObjectURL(buffer);`|可用`window.URL.createObjectURL`方法处理Blob并配合`video`或者`audio`标签播放|src|
278+
|`recordStream = test.captureStream();`|把`Blob`转化为`MediaStream`|MediaStream|
279+
|`new RTCPeerConnection(null).addStream(recordStream);`|将`recordStream`交给`RTCPeerConnection`处理|MediaStream|
280+
```js
281+
mediaRecorder = new MediaRecorder(window.stream, options); // 设置音频录入源、格式
282+
mediaRecorder.ondataavailable = function (event) {
283+
// 这个会不断接受BlobEvent
284+
console.log(event);
285+
if (event.data && event.data.size > 0) {
286+
recordedBlobs.push(event.data);
287+
}
288+
}; // 存放获取的数据
289+
let buffer = new Blob(recordedBlobs, {
290+
type: "video/webm"
291+
});
292+
console.log(buffer);
293+
test.src = window.URL.createObjectURL(buffer);
294+
recordStream = test.captureStream();
295+
```
296+
297+
# 参考文档
298+
299+
- RTCPeerConnection
300+
- [MDN API文档](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos#Get_the_video)
301+
- [MDN例子](https://mdn-samples.mozilla.org/s/webrtc-capturestill/)
302+
- [有没有人用MediaRecorder在pc上录制视频并上传到服务器](https://segmentfault.com/q/1010000011489899)
303+
- [MDN RTCPeerConnection文档](https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection)
304+
305+
- MediaRecorder
306+
- [MDN MediaRecorder文档](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)

0 commit comments

Comments
 (0)