调用浏览器摄像头权限

[{"insert":"通过window.navigator.mediaDevices获取MediaDevices对象，它提供设备的媒体数据。enumerateDevices方法可以获取到系统中可用的媒体输入和输出设备，它返回一个包含MediaDeviceInfo对象的数组，每个MediaDeviceInfo对象都描述一个可用的媒体设备。\n"},{"insert":{"image":"R10580997-7e737c5e15d56b588a0c2c1587685525_70031_434_340.png"}},{"insert":"\nMediaDeviceInfo对象字段如图所示。deviceId为这个设备的标识符，清除cookie时会被重置；groupId为组标识符，当两个设备属于同一个物理设备时groupId将会相同；kind为该设备的类型，可以为audioinput、audiooutput和videoinput；label为该设备的描述，当未拥有媒体设备的可持续访问权限时该字段为空。\n"},{"insert":{"image":"R10580997-c0053fca5ca5353065cca99b2a0dc77b_11207_544_103.png"}},{"insert":"\ngetUserMedia方法会请求媒体设备的权限，它返回一个MediaStream媒体流，里面包含所请求的媒体轨道。它接收一个MediaStreamConstraints对象，它包含audio和video两个MediaTrackSupportedConstraints描述对象，浏览器会根据所写的要求查找对应的媒体源。MediaTrackSupportedConstraints所支持的字段可以通过MediaDeviceInfo.getSupportedConstraints获取到。获取到媒体流后可以直接给video标签对象的srcObject赋值，然后在onloadedmetadata事件中执行play方法播放媒体流。详情请看"},{"attributes":{"link":"https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia"},"insert":"https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia"},{"insert":"\n"},{"insert":{"image":"R10580997-8f63784717fb400f322bb4c8e965b252_73834_535_326.png"}},{"insert":"\n需要注意在微信浏览器中因为其隐私保护机制无法获取到持久的媒体权限，所获取到的MediaDeviceInfo对象中label字段将会是空字符，这时可以通过以下方式直接获取前置后置摄像头。\n"},{"insert":{"image":"R10580997-c5427ba86518bf00858edda0fed780b3_15703_820_318.png"}},{"insert":"\n在需要暂停或切换摄像头的时候需要停止媒体源的播放，可以通过MediaStream的getTracks方法获取到媒体轨道并对每条轨道执行stop()方法，此时可以通过标签页中的红色小点是否消失来查看媒体源是否已停止播放。在这之后设置video的srcObject为null并执行load方法，可以使video回到初始状态。\n"},{"insert":{"image":"R10580997-2c803c684a88132763a2cb47aef1a464_1943_111_39.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-704c4dd89211e866bfcde451326273aa_51372_529_239.png"}},{"insert":"\n"}]