Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4092

Add option to select front-facing or user-facing camera to video-enabled components

XMLWordPrintable

    • Icon: New Feature New Feature
    • Resolution: Done
    • Icon: Normal Normal
    • 8.6.0
    • 8.6.0
    • None
    • Security Level: Jimmy
    • None
    • None

      In current implementation of components using getUserMedia(), the camera direction is not selected.
      https://github.com/zkoss/zkcml/blob/master/zkmax/src/archive/web/js/zkmax/med/Camera.js#L145
      https://github.com/zkoss/zkcml/blob/master/zkmax/src/archive/web/js/zkmax/barscanner/Barcodescanner.js#L166

      On this type of components, it would be good to have an attribute such as facingMode accepting a string to let developers choose camera modes, or event a userMedia attribute accepting an array of options to add to the constraints (which would cover more potential use cases).
      This would also let developers implement a "switch camera" button, or a "select camera source" button on mobile and tablets

      For example, the following is currently necessary to show the back camera on a mobile device:

      	<script><![CDATA[
      zk.afterLoad('zkmax.barscanner', function() {
      	
      	var xBarcodescanner = {};
      	zk.override(zkmax.barscanner.Barcodescanner.prototype, xBarcodescanner ,{
      		bind_: function () {
      			this.$supers('bind_', arguments);
      			var wgt = this;
      			var front = false;
      			var constraints = { video: { facingMode: (front? "user" : "environment") } };
      			navigator.mediaDevices.getUserMedia(constraints).then(function (s) {
      				wgt.$n('video').srcObject = s;
      				wgt._setReaders();
      		});
      	}
      	});//zk.override
      });//zk.afterLoad
      ]]></script>
      

            CharlesQiu CharlesQiu
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day
                1d