0
点赞
收藏
分享

微信扫一扫

h5/web 获取实时视频并预览

sullay 2022-01-13 阅读 69

注意:需要在 https 或者 localhost 下才能成功调起摄像头(如果是html使用file协议也能成功)

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>摄像头拍照</title>
	</head>
	<body>
		<video id="video" width="300" height="300" controls>
		</video>
		<div>
			<button id="capture">拍照</button>
		</div>
		<canvas id="canvas" width="480" height="320"></canvas>
		<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.11.0/vconsole.min.js"></script>
		<script>
			// var vConsole = new VConsole();
			
			//访问用户媒体设备的兼容方法
			function getUserMedia(constraints, success, error) {
				if (navigator.mediaDevices.getUserMedia) {
					//最新的标准API
					navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
				} else if (navigator.webkitGetUserMedia) {
					//webkit核心浏览器
					navigator.webkitGetUserMedia(constraints, success, error)
				} else if (navigator.mozGetUserMedia) {
					//firfox浏览器
					navigator.mozGetUserMedia(constraints, success, error);
				} else if (navigator.getUserMedia) {
					//旧版API
					navigator.getUserMedia(constraints, success, error);
				}
			}

			let video = document.getElementById('video');
			let canvas = document.getElementById('canvas');
			let context = canvas.getContext('2d');

			function success(stream) {
				//兼容webkit核心浏览器
				let CompatibleURL = window.URL || window.webkitURL;
				//将视频流设置为video元素的源
				console.log(stream);

				// video.src = CompatibleURL.createObjectURL(new Blob(stream));
				video.srcObject = stream;
				video.play();
			}

			function error(error) {
				console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
				console.log(error)
			}

			if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
				.mozGetUserMedia) {
				//调用用户媒体设备, 访问摄像头
				getUserMedia({
					video: {
						width: 300,
						height: 300
					}
				}, success, error);
			} else {
				alert('不支持访问用户媒体');
			}

			document.getElementById('capture').addEventListener('click', function() {
				context.drawImage(video, 0, 0, 480, 320);
			})
			
		</script>
	</body>
</html>

vue 中使用

<template>
  <div>
    <video id="video" width="300" height="300" controls></video>
    <div>
      <button id="capture" @click="btnClick">拍照</button>
    </div>
    <canvas id="canvas" width="320" height="320"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      video: null,
      canvas: null,
      context: null,
    }
  },
  mounted() {
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    // uniapp 对 video 标签进行了封装 所以用下面的方式获取
    // let video = document.getElementsByClassName('uni-video-video')[0]
    // let canvas = document.getElementsByTagName('canvas')[0]

    console.log(canvas)
    let context = canvas.getContext('2d');

    this.video = video
    this.init()
    this.canvas = canvas
    this.context = context
  },
  methods: {
    // 获取设备
    getUserMedia(constraints, successCallback, errorCallback) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, successCallback, errorCallback)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, successCallback, errorCallback);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, successCallback, errorCallback);
      }
    },
    successCallback(stream) {
      //兼容webkit核心浏览器
      // let CompatibleURL = window.URL || window.webkitURL;
      // video.src = CompatibleURL.createObjectURL(new Blob(stream));
      //将视频流设置为video元素的源
      console.log(stream);
      console.log(this.video)

      this.video.srcObject = stream;
      this.video.play();
    },
    errorCallback(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
      console.log(error)
    },
    init() {
      if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        this.getUserMedia(
          {
            video: { width: 320, height: 320 },
          },
          this.successCallback,
          this.errorCallback
        );
      } else {
        alert('不支持访问用户媒体');
      }
    },
    btnClick() {
      this.context.drawImage(this.video, 0, 0, 320, 320);
    }
  }
}
</script>

<style>
</style>


uniapp h5端 使用

<template>
	<view>
		<video id="video" width="300" height="300" controls>
		</video>
		<div>
			<button id="capture" @click="btnClick">拍照</button>
		</div>
		<canvas id="canvas" width="320" height="320"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video: null,
				canvas: null,
				context: null,
			}
		},
		onReady() {
			// let video = document.getElementById('video');
			// uniapp 对 video 标签进行了封装 所以用下面的方式获取
			let video = document.getElementsByClassName('uni-video-video')[0]
			// let canvas = document.getElementById('canvas');
			let canvas = document.getElementsByTagName('canvas')[0]
			console.log(canvas)
			let context = canvas.getContext('2d');
			
			this.video = video
			this.init()
			this.canvas = canvas
			this.context = context
		},
		methods: {
			// 获取设备
			getUserMedia(constraints, successCallback, errorCallback) {
				if (navigator.mediaDevices.getUserMedia) {
					//最新的标准API
					navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback);
				} else if (navigator.webkitGetUserMedia) {
					//webkit核心浏览器
					navigator.webkitGetUserMedia(constraints, successCallback, errorCallback)
				} else if (navigator.mozGetUserMedia) {
					//firfox浏览器
					navigator.mozGetUserMedia(constraints, successCallback, errorCallback);
				} else if (navigator.getUserMedia) {
					//旧版API
					navigator.getUserMedia(constraints, successCallback, errorCallback);
				}
			},
			successCallback(stream) {
				//兼容webkit核心浏览器
				// let CompatibleURL = window.URL || window.webkitURL;
				// video.src = CompatibleURL.createObjectURL(new Blob(stream));
				//将视频流设置为video元素的源
				console.log(stream);
				console.log(this.video)
				
				this.video.srcObject = stream;
				this.video.play();
			},
			errorCallback(error) {
				console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
				console.log(error)
			},
			init() {
				if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator .mozGetUserMedia) {
					//调用用户媒体设备, 访问摄像头
					this.getUserMedia(
						{ 
							video: { width: 320, height: 320 } ,
						},
						this.successCallback,
						this.errorCallback
					);
				} else {
					alert('不支持访问用户媒体');
				}
			},
			btnClick() {
				this.context.drawImage(this.video, 0, 0, 320, 320);
			}
		}
	}
</script>

<style>

</style>

举报

相关推荐

0 条评论