developer.mozilla.org/zh-CN/docs/…
步骤
1.用navigator.mediaDevices 和 navigator.mediaDevices.getUserMedia判断浏览器是否支持
2.用navigator.mediaDevices.getUserMedia()方法获取媒体流
3.将获取的媒体流赋给video标签的srcObject属性
4.使用cnavas元素从video中获取某一帧的数据，并将数据处理后赋给img
5.关闭媒体流的所有轨道
html部分
<span>打开相机</span>
<span>拍照</span>
<span>关闭相机</span>
<video src=""></video>
<canvas style="display: none;"></canvas>
<img src="" alt="">
基础js部分
let spanStart = document.querySelectorAll('span')[0]
let spanClick = document.querySelectorAll('span')[1]
let spanEnd = document.querySelectorAll('span')[2]
spanStart.addEventListener('click',function(){
})
spanClick.addEventListener('click',function(){
})
spanEnd.addEventListener('click',function(){
})
判断浏览器是否支持
let spanStart = document.querySelectorAll('span')[0]
let spanClick = document.querySelectorAll('span')[1]
let spanEnd = document.querySelectorAll('span')[2]
spanStart.addEventListener('click',function(){
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
}
else console.log('浏览器不支持');
})
spanClick.addEventListener('click',function(){
})
spanEnd.addEventListener('click',function(){
})
getUserMedia获取媒体流
let spanStart = document.querySelectorAll('span')[0]
let spanClick = document.querySelectorAll('span')[1]
let spanEnd = document.querySelectorAll('span')[2]
spanStart.addEventListener('click',function(){
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia({audio: true,video: true}).then( stream =>{
}).catch( err => {
console.log(err);
})
}
else console.log('浏览器不支持');
})
spanClick.addEventListener('click',function(){
})
spanEnd.addEventListener('click',function(){
})
将媒体流注入到video标签的srcObject中，并让视频播放
！！！video的src 是播多媒体文件的；srcobj 是实时流
let spanStart = document.querySelectorAll('span')[0]
let spanClick = document.querySelectorAll('span')[1]
let spanEnd = document.querySelectorAll('span')[2]
let video = document.querySelector('video')
spanStart.addEventListener('click',function(){
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia({audio: true,video: true}).then( stream =>{
video.srcObject = stream // src 是播多媒体文件的；srcobj 是实时流
video.play()
}).catch( err => {
console.log(err);
})
}
else console.log('浏览器不支持');
})
spanClick.addEventListener('click',function(){
})
spanEnd.addEventListener('click',function(){
})
从流中捕获帧
使用canvas从video中获取某一帧的数据，显示在img中
let spanStart = document.querySelectorAll('span')[0]
let spanClick = document.querySelectorAll('span')[1]
let spanEnd = document.querySelectorAll('span')[2]
let video = document.querySelector('video')
let canvas = document.querySelector('canvas')
let img = document.querySelector('img')
spanStart.addEventListener('click',function(){
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia({audio: true,video: true}).then( stream =>{
video.srcObject = stream // src 是播多媒体文件的；srcobj 是实时流
video.play()
}).catch( err => {
console.log(err);
})
}
else console.log('浏览器不支持');
})
spanClick.addEventListener('click',function(){
let context = canvas.getContext('2d')
context.drawImage(video, 0, 0, 300, 150)
let data = canvas.toDataURL('image/png');
img.setAttribute('src', data)
})
spanEnd.addEventListener('click',function(){
})
关闭媒体流，并将video标签关闭
let spanStart = document.querySelectorAll('span')[0]
let spanClick = document.querySelectorAll('span')[1]
let spanEnd = document.querySelectorAll('span')[2]
let video = document.querySelector('video')
let canvas = document.querySelector('canvas')
let img = document.querySelector('img')
let mediaStream = null
spanStart.addEventListener('click',function(){
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia({audio: true,video: true}).then( stream =>{
mediaStream = stream
video.style = "display: inline_block"
video.srcObject = stream // src 是播多媒体文件的；srcobj 是实时流
video.play()
}).catch( err => {
console.log(err);
})
}
else console.log('浏览器不支持');
})
spanClick.addEventListener('click',function(){
let context = canvas.getContext('2d')
context.drawImage(video, 0, 0, 300, 150)
let data = canvas.toDataURL('image/png');
img.setAttribute('src', data)
})
spanEnd.addEventListener('click',function(){
mediaStream.getTracks().forEach(track => {
track.stop() // 关闭媒体流的所有轨道
video.style = "display: none"
});
})
