原创

前端直播案例


js直播案例

使用主流浏览器内置 navigator.mediaDevices.getUserMedia 方法

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div>
  【<button onclick="changeMovie('user')">前置摄像头直播</button>
  <button onclick="changeMovie('environment')">后置摄像头直播</button>】
  【<button onclick="closeMove()">关闭直播</button>】
  【<button onclick="onPhotograph()">拍照</button>】
</div>
<div>

</div>
<video></video>
</body>
<script>
  let isOpen = false
  let facingMode = "user"
  let MediaStreamTrack = null
  let video = document.getElementsByTagName("video")[0]

  function changeMovie(newFacingMode) {
    facingMode = newFacingMode
    openMovie()
  }

  function openMovie() {
    if (isOpen) return
    /**
     * facingMode: ‘user’ , ‘environment’ 代表前后置。
     sampleRate:指定采样率。
     sampleSize:每个采样点大小的位数
     volume:从0(静音)到1(最大)取值
     echoCancellation:是否使用回声消除来尝试去除通过麦克风回传到扬声器的音频
     autoGainControl:是否要修改麦克风的输入音量
     noiseSuppression:是否尝试去除音频信号中的背景噪声
     latency:以秒为单位,控制开始处理声音和下一步可以使用数据之间的时间,不是很确定为什么要设更高的延迟,但是音频编解码器的延时确实有所不同。
     channelCount:规定了单声道的时候为1,立体声的时候为2。
     */
    navigator.mediaDevices
      .getUserMedia({
        audio: {
          sampleRate: 16000
        },
        video: {
          facingMode
        }
      })
      .then(stream => {
        MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
        if ("srcObject" in video) {
          video.srcObject = stream;
        } else {
          // 防止在新的浏览器里使用它,应为它已经不再支持了
          video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = () => {
          video.play();
          isOpen = true
        };
      })
      .catch(err => {
        console.log("录屏失败", err);
      });
  }

  function closeMove() {
    if (!isOpen) return
    MediaStreamTrack && MediaStreamTrack.stop()
    video.pause()
    isOpen = false
  }
  function onPhotograph() {
    let canvas = document.createElement("canvas");
    canvas.width = video.clientWidth
    canvas.height = video.clientHeight
    let context = canvas.getContext("2d");
    context.drawImage(video,0,0,canvas.width,canvas.height);
    let image = document.createElement("img");
    image.src = canvas.toDataURL("image/png");
    document.body.appendChild(image)
  }
</script>
</html>

兼容写法

  //访问用户媒体设备的兼容方法
  function getUserMedia(constrains,success,error){
    //debugger
    if(navigator.mediaDevices.getUserMedia){
      //最新标准API
      navigator.mediaDevices.getUserMedia(constrains).then(success);
    } else if (navigator.webkitGetUserMedia){
      //webkit内核浏览器
      navigator.webkitGetUserMedia(constrains).then(success);
    } else if (navigator.mozGetUserMedia){
      //Firefox浏览器
      navagator.mozGetUserMedia(constrains).then(success);
    } else if (navigator.getUserMedia){
      //旧版API
      navigator.getUserMedia(constrains).then(success);
    }
  }
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
    //调用用户媒体设备,访问摄像头
    //debugger
    getUserMedia({
      video:{width:480,height:320}
    },success,error);
  } else {
    alert("你的浏览器不支持访问用户媒体设备");
  }

演示案例

前端直播案例

flvJs播放直播流案例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flv.js test</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>
<video id="videoElement" width="800"></video>
<script>
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      "isLive": true,
      url: '' //flv文件流地址
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
  }
</script>
</body>
</html>
JavaScript
html
  • 作者:零三(联系作者)
  • 最后更新时间:2020-05-30 14:29
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn