WebRTC 开启视频

最新推荐文章于 2024-01-27 23:42:30 发布

hybaym

最新推荐文章于 2024-01-27 23:42:30 发布

阅读量504

点赞数

本文链接：https://blog.csdn.net/hybaym/article/details/105191571

版权

Web前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
  <meta charset="utf-8">
  <title>web RTC 测试</title>
  <style>
    .booth {
      width:400px;
     
      background:#ccc;
      border: 10px solid #ddd;
      margin: 0 auto;
    }
  </style>
</head>
<body>
    <article>
      <section>
        <video id="video"></video>
      </section>
      <section>
        <audio id="audio"></audio>
      </section>
      <button id="btn">拍照</button>
      <section>
        <canvas id="canvas"></canvas>
      </section>
      <section><img src="" alt="" id="img"></section>
    </article>

    <article>
      <header>相关知识</header>
      <h2>获取用户媒体:</h2>
      <p>
        <code>navigator.mediaDevices.getUserMedia({video: true, audio: true})  // 异步操作</code>
      </p>

      <h2>枚举媒体数:video,audio输入输出设备</h2>
      <p><code>navigator.mediaDevices.enumerateDevices()  // 异步操作</code></p>
    </article>
  <script>
    let convas = document.querySelector("#canvas"); //
    let video = document.querySelector("#video");
    let audio = document.querySelector("audio");
    let img = document.querySelector("#img");
    let btn = document.querySelector("button");
    let context = canvas.getContext('2d');
    let width = 320; //视频和canvas的宽度
    let height = 0; //
    let streaming = false; // 是否开始捕获媒体
    
    // 获取用户媒体,包含视频和音频
    navigator.mediaDevices.getUserMedia({video: true, audio: true})
      .then(stream => {
      video.srcObject = stream; // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
      video.play(); //  播放视频
      audio.srcObject = stream;
      audio.play();
    });
    
    
    function tackcapture() {
      // 需要判断媒体流是否就绪
      if(streaming){
          context.drawImage(video, 0, 0, 350, 200);// 将视频画面捕捉后绘制到canvas里面
          img.src = canvas.toDataURL('image/png');// 将canvas的数据传送到img里
      }
    
    }
    
    btn.addEventListener('click',tackcapture,false); // 按钮点击事件
    
    // 监听视频流就位事件,即视频可以播放了
    video.addEventListener('canplay', function(ev){
          if (!streaming) {
            height = video.videoHeight / (video.videoWidth/width);
          
            video.setAttribute('width', width);
            video.setAttribute('height', height);
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            streaming = true;
          }
        }, false);
  </script>
</body>
</html>

hybaym

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebRTC 开启视频

<!DOCTYPE html><html lang="ZH-CN"><head> <meta charset="utf-8"> <title>web RTC 测试</title> <style> .booth { width:400px; backgro...
复制链接

扫一扫