微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript网络摄像头未在生产环境中打开,但可在localhost中运行

如何解决javascript网络摄像头未在生产环境中打开,但可在localhost中运行

javascript代码

          var pc = null;

          // data channel
          var dc = null,dcInterval = null;

          function createPeerConnection() {
              var config = {
                  sdpSemantics: 'unified-plan'
              };

              pc = new RTCPeerConnection(config);

              // connect video
              pc.addEventListener('track',function(evt) {
                  if (evt.track.kind == 'video')
                      console.log(evt.streams[0],"@@")
                      console.log(document.getElementById('video').srcObject,"==")
                      document.getElementById('video').srcObject = evt.streams[0];
              });

              return pc;
          }

          function negotiate() {
              return pc.createOffer().then(function(offer) {
                  return pc.setLocalDescription(offer);
              }).then(function() {
                  // wait for ICE gathering to complete
                  return new Promise(function(resolve) {
                      if (pc.iceGatheringState === 'complete') {
                          resolve();
                      } else {
                          function checkState() {
                              if (pc.iceGatheringState === 'complete') {
                                  pc.removeEventListener('icegatheringstatechange',checkState);
                                  resolve();
                              }
                          }
                          pc.addEventListener('icegatheringstatechange',checkState);
                      }
                  });
              }).then(function() {
                  var offer = pc.localDescription;

                  return fetch('/offer',{
                      body: JSON.stringify({
                          sdp: offer.sdp,type: offer.type,// video_transform: document.getElementById('video-transform').value
                          video_transform: "makeup_v2"
                      }),headers: {
                          'Content-Type': 'application/json'
                      },method: 'POST'
                  });
              }).then(function(response) {
                  return response.json();
              }).then(function(answer) {
                  return pc.setRemoteDescription(answer);
              }).catch(function(e) {
                  alert(e);
              });
          }

          function start() {
              document.getElementById('start').style.display = 'none';

              pc = createPeerConnection();

              var time_start = null;

              function current_stamp() {
                  if (time_start === null) {
                      time_start = new Date().getTime();
                      return 0;
                  } else {
                      return new Date().getTime() - time_start;
                  }
              }


              var constraints = {
                  video: false
              };

              // if (document.getElementById('use-video').checked) {
                  // var resolution = document.getElementById('video-resolution').value;
                  var resolution = "320x240"
                  if (resolution) {
                      resolution = resolution.split('x');
                      constraints.video = {
                          width: parseInt(resolution[0],0),height: parseInt(resolution[1],0)
                      };
                  } else {
                      constraints.video = true;
                  }
              // }

              if (constraints.video) {
                  if (constraints.video) {
                      document.getElementById('media').style.display = 'block';
                  }
                  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
                      stream.getTracks().forEach(function(track) {
                          pc.addTrack(track,stream);
                      });
                      return negotiate();
                  },function(err) {
                      alert('Could not acquire media: ' + err);
                  });
              } else {
                  negotiate();
              }

              document.getElementById('stop').style.display = 'inline-block';
          }

          function stop() {
              document.getElementById('stop').style.display = 'none';

              // close data channel
              if (dc) {
                  dc.close();
              }

              // close transceivers
              if (pc.getTransceivers) {
                  pc.getTransceivers().forEach(function(transceiver) {
                      if (transceiver.stop) {
                          transceiver.stop();
                      }
                  });
              }

              // close local video
              pc.getSenders().forEach(function(sender) {
                  sender.track.stop();
              });

              // close peer connection
              setTimeout(function() {
                  pc.close();
              },500);
          }

HTML代码

          <html>
          <head>
              <Meta charset="UTF-8"/>
              <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
          </head>
          <body>
          <button id="start" onclick="start()">Start</button>
          <button id="stop" style="display: none" onclick="stop()">Stop</button>
          <div id="media" style="display: none">
          <div style="border:2px solid red;">
              <audio id="audio" autoplay="true"></audio>
              <video id="video" autoplay="true" playsinline="true"></video>
          </div>
          </div>
          <script src="client.js"></script>
          </body>
          </html>

我在打开摄像头并使用进行人脸检测的地方共享了我的代码 后端api逻辑。 该代码在localhost上可以正常工作,但在生产环境中则无法使用

https://science-a47kggcjda-uc.a.run.app/

这是我的生产网址。

响应也将成功,并且控制台中没有日志

这是什么原因。 便携式计算机中摄像头灯已亮起,但是摄像头无法正常工作。

请看看

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。