Question

我正在编写以下代码，用于启动相机并使用webRTC技术在Google Chrome浏览器上观看我的视频。我创建了两个文件index.html和client.js。我附上了两者的代码。 Node.js服务器安装在我的电脑上。问题是我的相机正在开启，但我无法看到视频流。

client.js

function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
} 

if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 

   //enabling video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector('video'); 

      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
} else { 
   alert("WebRTC is not supported"); 
}`

的index.html

<!DOCTYPE html> 
<html lang = "en">

   <head> 
      <meta charset = "utf-8" /> 
       <link rel="stylesheet" href="css/main.css" />
   </head> 

   <body> 
      <video autoplay></video>
      <script src = "js/client.js"></script>     
   </body>
    </html>

Answer 1

您似乎正在使用旧代码，现在API已经更好地开始使用最新的API。

请参阅Demo和Source

在您的client.js

中尝试以下代码段

<template>
    <el-dialog title="Order in progress" size="large" :visible.sync="show" @visible-change="updateShowLoadOrder"></el-dialog>
</template>

<script>
  let popUpData;
  export default {
    name: '',
    data () {
      return {
        ordersInProgress: [],
        show: this.showLoadOrder
      }
    },
    props: ['showLoadOrder'],
    methods: {
      updateShowLoadOrder (isVisible) {
        if (isVisible) return false;
        this.$emit('update:showLoadOrder', false)
      }
    },
    created () {
      const _this = this;
      if (!popUpData) {
        axios.get('api/mtm/apiGetOrdersInProgress').then((response) => {
          _this.ordersInProgress = popUpData = response.data;
        });
      } else {
        this.ordersInProgress = popUpData;
      }
    }
  }
</script>

如何使用webRTC启动视频流？

1 个答案: