html 调用win 摄像头,html pc调用摄像头进行拍照

前段时间，同事要我帮忙弄个浏览器调用摄像头拍照的demo给客户，一想，这个简单，直接上代码：

1

2

3 拍照

4 停止

1 $(function() {

2 var pageSelf = $('.page');

3 var mediaStreamTrack = null;

4 init()

5 // 调用摄像头

6 function init() {

7 try{

8 navigator.getUserMedia = navigator.getUserMedia ||

9 navigator.webkitGetUserMedia ||

10 navigator.mozGetUserMedia ||

11 navigator.mediaDevices.getUserMedia;

12 }catch(e) {

13

14 }

15 if (navigator.getUserMedia) {

16 navigator.getUserMedia({

17 audio: true,

18 video: {

19 width: 300,

20 height: 400

21 }

22 }, function(stream) {

23 console.log(stream)

24 mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];

25 console.log(mediaStreamTrack)

26 var video = document.getElementById("video");

27 if ('srcObject' in video) {

28 console.log('支持srcObject')

29 video.srcObject = stream;

30 } else {

31 console.log('支持src')

32 video.src = (window.URL || window.webkitURL).createObjectURL(stream);

33 }

34 video.play();

35 }, function(err) {

36 // 调取摄像头失败

37 console.log("The following error occurred: ");

38 });

39 } else {

40 console.log("getUserMedia not supported");

41

42 // 调取摄像头失败

43 }

44 }

45

46 pageSelf.on('click', '#takePhotos', function() {

47 takePhotos()

48 })

49

50 pageSelf.on('click', '#stopTakePhotos', function() {

51 mediaStreamTrack && mediaStreamTrack.stop();

52 })

53

54 // 拍照

55 function takePhotos() {

56 var video = document.getElementById("video"),

57 canvas = document.getElementById("canvas"),

58 context = canvas.getContext("2d"),

59 vHeight = video.offsetHeight,

60 vWidth = video.offsetWidth;

61 canvas.width = vWidth; // 改变画布的宽高

62 canvas.height = vHeight;

63 context.drawImage(video, 0, 0, vWidth, vHeight);

64 // 获取图片src base64格式

65 photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);

66 }

67

68 })

View Code  js

运行后，没毛病。

然而，客户说需要用在IE上，8-11。what？万恶的IE。。。

找了好久，没办法 用了  jquery.webcam.js 勉强解决了。

1

2

3

4

5 拍照

ie-html

1 // 该控件默认只支持320*240尺寸。

2 // 如果需要修改，可以参考 https://blog.csdn.net/qq_34310906/article/details/105573012

3 // 打开demo时，如果不能播放，请用http:// 方式打开，而不是file:///C:/ 方式

4 $(function() {

5 var w = 320,

6 h = 240;

7 var pos = 0,

8 ctx = null,

9 saveCB;

10 var canvas = document.getElementById("canvas")

11 if (canvas.toDataURL) {

12 ctx = canvas.getContext("2d");

13 var image = ctx.getImageData(0, 0, w, h);

14 // console.log(image)

15 // let data = image.data

16 saveCB = function(data) {

17 var col = data.split(";");

18 var img = image;

19 // console.log(4123456)

20 for (var i = 0; i < 320; i++) {

21 var tmp = parseInt(col[i]);

22 img.data[pos + 0] = (tmp >> 16) & 0xff;

23 img.data[pos + 1] = (tmp >> 8) & 0xff;

24 img.data[pos + 2] = tmp & 0xff;

25 img.data[pos + 3] = 0xff;

26 pos += 4;

27 }

28 if (pos >= 4 * 320 * 240) {

29 ctx.putImageData(img, 0, 0);

30 var Imagedata = canvas.toDataURL().substring(22); //上传给后台的图片数据

31 pos = 0;

32 console.log(Imagedata)

33 }

34 };

35 } else {

36 // 低版本的ie不支持canvas.toDataURL，需要把数据传给后台转换

37 var image = [];

38 saveCB = function(data) {

39 image.push(data);

40 pos += 4 * 320;

41 if (pos >= 4 * 320 * 240) {

42 $.post(URL, {

43 briStr: image.join(';')

44 }, function(data) {

45 //在页面显示base64图片处理

46 pos = 0;

47 image = [];

48 });

49 }

50 };

51 }

52 $("#camera").webcam({

53 width: w,

54 height: h,

55 mode: "callback",

56 swffile: "./swf/jscam.swf",

57 // swffile: "./swf/jscam_canvas_only.swf",

58 onSave: saveCB,

59 onCapture: function() { //捕获图像

60 webcam.save();

61 },

62 debug: function(type, string) { //控制台信息

63 console.log(type + ": " + string);

64 },

65 onl oad: function() { //flash 加载完毕执行

66 var cams = webcam.getCameraList();

67 for (var i in cams) {

68 jQuery("#cams").append("

" + cams[i] + "");

69 }

70 }

71 });

72

73 $(".play").click(function() {

74 webcam.capture();

75 });

76

77 });

ie-js

标签：function,canvas,pos,pc,html,video,var,data,摄像头

来源： https://www.cnblogs.com/rxl1003/p/12849656.html