1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
| HTML部分
<div>
<video autoplay controls playsinline id="video" style="width: 800px;height: 600px;"></video>
<video autoplay controls playsinline id="recordVideo" style="width: 600px;height: 400px;"></video>
</div>
<div>
<button id="user">摄像头录制</button>
摄像头选择:
<select id="selectVideo" style="width: 100px;"></select>
麦克风选择:
<select id="selectAudio" style="width: 100px;"></select>
<button id="desktop">桌面共享</button>
<button id="start">视频录制</button>
<button id="pause">视频录制暂停</button>
<button id="stop">视频录制停止</button>
<button id="resume">继续录制</button>
<button id="show">展示录制视频</button>
<button id="download">下载录制的视频</button>
选择录制视频的格式:
<select id="select" style="width: 120px;"> </select>
</div>
JS部分
<script>
let video = document.querySelector('#video')
let recordVideo = document.querySelector('#recordVideo')
let user = document.querySelector('#user')
let desktop = document.querySelector('#desktop')
let select = document.querySelector('#select')
let selectVideo = document.querySelector('#selectVideo')
let selectAudio = document.querySelector('#selectAudio')
let start = document.querySelector('#start')
let pause = document.querySelector('#pause')
let stop = document.querySelector('#stop')
let show = document.querySelector('#show')
let resume = document.querySelector('#resume')
let download = document.querySelector('#download')
let types = ['webm','mp4','ogg','mov','avi','wmv','flv','mkv','ts','x=matroska']
let codecs = ['vp9','vp9.0','vp8','vp8.0','avc1','av1','h265','h264']
let mimeType = 'video/webm;codecs=vp8'
let stream,blobList=[],recordStream
//获取用户摄像头权限
user.addEventListener('click',async()=>{
stream = await navigator.mediaDevices.getUserMedia({
video :{
width:800,
height:600
},
audio:true
})
video.srcObject = stream
})
//获取用户桌面共享权限
desktop.addEventListener('click',async()=>{
stream = await navigator.mediaDevices.getDisplayMedia({
video:{
width:800,
height:600
},
audio:false
})
video.srcObject = stream
})
//开始录制
start.addEventListener('click',()=>{
if(recordStream) return //如果已经在开始录制就返回，防止重复录制
recordStream = new MediaRecorder(stream,{mimeType})
recordStream.start(1000)
recordStream.ondataavailable = (e)=>{
blobList.push(e.data) //e.data为blob,将blob用数组储存方便后面展示以及下载
}
})
select.addEventListener('click',support())
selectVideo.addEventListener('click',selectDevice('video'))
selectAudio.addEventListener('click',selectDevice('audio'))
pause.addEventListener('click',()=>{if(recordStream) recordStream.pause()})
stop.addEventListener('click',()=>{if(recordStream) recordStream.stop()})
show.addEventListener('click',()=>{
if(blobList.length>0){
let blob = new Blob(blobList)
let url = URL.createObjectURL(blob)
recordVideo.src = url
}
})
resume.addEventListener('click',()=>{if(recordStream) recordStream.resume()})
download.addEventListener('click',downloadVideo)
function support(){
let click //闭包，事件委托。第一次点击时获取用户浏览器支持的录制格式，之后获取用户选择的录制格式。
return async function(e){
if(click){
mimeType = e.target.value
}else{
click = true
let list = await getSupportList()
list.forEach((type)=>{
let option = document.createElement('option')
option.text = type
option.value = type
select.add(option)
})
}
}
}
function getSupportList(){
let list = []
types.forEach((type)=>{
codecs.forEach(async(code)=>{
let videoType = `video/${type};codecs=${code}`
let res = await MediaRecorder.isTypeSupported(videoType)
if(res) list.push(videoType)
})
})
return list
}
function selectDevice(type){
let video,audio
return async function(e){
if(type=='video'&&!video||type=='audio'&&!audio){
if(type=='video') video = true
if(type=='audio') audio = true
let deviceList = await navigator.mediaDevices.enumerateDevices()
deviceList.forEach((device)=>{
let {deviceId,label,kind,groupId} = device
if(type=='video'&&kind=='videoinput'){
let option = document.createElement('option')
option.text = label
option.value = deviceId
selectVideo.add(option)
}else if(type=='audio'&&kind=='audioinput'){
let option = document.createElement('option')
option.text = label
option.value = deviceId
selectAudio.add(option)
}
})
}else{
if(e.target.value){
switchCamera(e.target.value)
}
}
}
}
//切换摄像头前先停止录制，将录制的媒体流的所有轨暂停同时将媒体流设置为空
function stopCamera(){
if(stream){
let trackList = stream.getTracks()
trackList.forEach((track)=>{
track.stop()
})
video.srcObject = null
stream = null
}
}
async function switchCamera(deviceId){
stopCamera()
stream = navigator.mediaDevices.getUserMedia({
video:{
width:800,
height:600
},
audio:false,
deviceId
})
video.srcObject = stream
}
function downloadVideo(){
let blob = new Blob(blobList,{ type: 'video/mp4' })
let url = URL.createObjectURL(blob)
let a = document.createElement('a')
a.href = url
a.download = '1' //给a链接一个download即可下载
a.click() //点击a下载
URL.revokeObjectURL(url) //URL.createObjectURL生成的url是储存在内存中，即时清空防止内存泄露
}
</script>
|
