api.video 媒体记录器

视频 是产品制造者的视频基础设施。 闪电快视频 API 用于在您的应用程序中集成,缩放,并管理点播后低空直播功能.

目录

• 目录
• 项目说明
• 开始
  • 安装
    • 安装方法 1: 需要js
    • 安装方法 # 2 : 打字符
    • 在 Javascript 计划中简单包含
• 文档
  • 证据
    • 选项
      • 使用授权的上传符( 建议):
      • 使用访问符( 损坏 ) :
      • 共同选项
    • 示例
  • 方法
    • start(options?: { timeslice?: number })
      • 选项
    • stop(): Promise<VideoUploadResponse>
    • addEventListener(event: string, listener: Function)
    • getMediaRecorderState(): RecordingState
• 完整实例

项目说明

便于上传数据到一个字节库 媒体结构 (原始内容存档于2018-09-28). to api.video. 它可以方便地从用户的网络相机上上传到api.video,也可以从屏幕录制.

开始

安装

安装方法 1: 需要js

如果您使用需要js, 您可以将库添加为您的项目依赖性

$ npm install --save @api.video/media-recorder

然后可以在脚本中使用库 :

var { ApiVideoMediaRecorder } = require('@api.video/media-recorder');

var recorder = new ApiVideoMediaRecorder(mediaStream, {
    uploadToken: "YOUR_DELEGATED_TOKEN"
    // ... other optional options
}); 

安装方法 # 2 : 打字符

如果您使用 Typescript, 您可以将库添加为您的项目依赖性

$ npm install --save @api.video/media-recorder

然后可以在脚本中使用库 :

import { ApiVideoMediaRecorder } from '@api.video/media-recorder'

const recorder = new ApiVideoMediaRecorder(mediaStream, {file: files[0],
    uploadToken: "YOUR_DELEGATED_TOKEN"
    // ... other optional options
});

在 Javascript 计划中简单包含

将库包含在您的 HTML 文件里 :

<head>
    ...
    <script src="https://unpkg.com/@api.video/media-recorder" defer></script>
</head>

然后,一旦 window.onload 事件已被三进制, 使用 new ApiVideoMediaRecorder()数字 :

...
<script type="text/javascript"> 
    const recorder = new ApiVideoMediaRecorder(mediaStream, {
        uploadToken: "YOUR_DELEGATED_TOKEN"
    });
    recorder.start();
    // ...
    recorder.stop().then((video) => console.log(video));
</script>

文档

证据

选项

媒体记录器对象使用一个 媒体结构 还有一个 options 对象。 要提供选项取决于您要认证到 API 的方式: 要么使用授权的上传符( recommanded) , 要么使用通常的访问符.

使用授权的上传符( 建议):

在从客户端上传时,使用授权上传符进行认证是最佳选项. 更多关于授权上传信条 授权上传。 。 。 .

使用访问符( 损坏 ) :

3⁄4 ̄ ̧漯B: 注意暴露您的访问符客户端会导致巨大的安全问题. 只有你知道自己在做什么,才使用这种方法:).

共同选项

示例

    const mediaRecorder = new ApiVideoMediaRecorder(myMediaStream, {
        uploadToken: "YOUR_DELEGATED_TOKEN",
        retries: 10,
    });

方法

start(options?: { timeslice?: number })

开始()方法开始上传从MediaStream检索的内容. 这需要选择 options 参数.

选项

示例

    // ... mediaRecorder instantiation

    mediaRecorder.start();
    // or, with a 2 seconds timeslice:
    // mediaRecorder.start({ timeslice: 2000 });

stop(): Promise<VideoUploadResponse>

开始()方法停止了媒体录制. 它上传了从MediaStream上检索到的最后一部分内容(这将开始将视频部分汇总在api.video侧). 它不需要参数。 它返回了一个承诺 解决新创建的视频.

addEventListener(event: string, listener: Function)

为媒体记录器定义事件收听器 。 现有活动如下:

• "error": 当发生错误时
• "recordingStopped": 当录音停止时
• "videoPlayable": 当视频可以播放时

示例

    // ... mediaRecorder instantiation

    mediaRecorder.addEventListener("error", (event) => {
       console.log(event.data);
    });

getMediaRecorderState(): RecordingState

返回底线状态 媒体记录. 状态可以是以下之一: inactive, (中文(简体) ), paused, (中文(简体) ), recording。 。 。 .

示例

    // ... mediaRecorder instantiation

    mediaRecorder.stop()
        .then(video => console.log(video));

完整实例

<html>
    <head>
        <script src="../dist/index.js"></script>
        <style>
            #container {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            #video {
                width: 640;
                height: 480;
                border: 1px solid gray;
            }
            #container div {
                margin: 10px 0;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div>
                <video id="video"></video>
            </div>
            <div>
                <button id="start" disabled>start recording</button>
                <button id="stop" disabled>stop recording</button>
            </div>
            <div>
                <p>Video link: <span id="video-link"><i>will be displayed when the recording is finished</i></span></p>
            </div>
        </div>
        
        <script> 
            const video = document.querySelector('#video');
            const startButton = document.getElementById("start");
            const stopButton = document.getElementById("stop");
            const videoLink = document.getElementById("video-link");
            let stream, recorder;

            var constraints = window.constraints = {
                audio: true,
                video: true
            };

            navigator.mediaDevices.getUserMedia(constraints).then((s) => {
                stream = s;
                video.srcObject = s;
                video.play();
                startButton.disabled = false;
            });

            document.getElementById("start").addEventListener("click", () => {
                recorder = new ApiVideoMediaRecorder(stream, {
                    uploadToken: "UPLOAD_TOKEN"
                });
                
                recorder.start();
                
                startButton.disabled = true;
                stopButton.disabled = false;
            });

            document.getElementById("stop").addEventListener("click", () => {
                startButton.disabled = false;
                stopButton.disabled = true;

                recorder.stop().then(v => videoLink.innerHTML = v.assets.player);
            });
        </script>
    </body>
</html>